Mercurial > gemma
diff client/src/components/fairway/Fairwayprofile.vue @ 4807:7cd40008124b
client: image-export: render diagram offscreen and use mixins in fairway-diagram
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 28 Oct 2019 16:38:23 +0100 |
parents | 75e6ec39a0b7 |
children | db450fcc8ed7 |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Oct 28 13:07:01 2019 +0100 +++ b/client/src/components/fairway/Fairwayprofile.vue Mon Oct 28 16:38:23 2019 +0100 @@ -91,8 +91,8 @@ <translate>Export to PDF</translate> </button> <a - @click="exportImage" - id="downloadimage" + @click="downloadImage('fairwaypng')" + id="fairwaypng" class="btn btn-sm btn-info text-white d-block w-100 mt-2" :download="`${fileName}.png`" > @@ -160,7 +160,6 @@ import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; -import canvg from "canvg"; const GROUND_COLOR = "#4A2F06"; const WATER_COLOR = "#005DFF"; @@ -294,17 +293,6 @@ } }, methods: { - exportImage() { - const diagramContainer = document.getElementById("pdfContainer"); - const { clientHeight, clientWidth } = diagramContainer; - const svg = document.querySelector("#pdfContainer>svg"); - svg.setAttribute("height", clientHeight); - svg.setAttribute("width", clientWidth); - const canvas = document.createElement("canvas"); - canvg(canvas, svg.outerHTML); - const imgData = canvas.toDataURL("image/png"); - document.getElementById("downloadimage").setAttribute("href", imgData); - }, close() { this.$store.commit( "application/paneSetup",