Mercurial > gemma
changeset 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 | a905438a7935 |
children | db450fcc8ed7 |
files | client/src/components/fairway/Fairwayprofile.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 26 insertions(+), 18 deletions(-) [+] |
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",
--- a/client/src/lib/mixins.js Mon Oct 28 13:07:01 2019 +0100 +++ b/client/src/lib/mixins.js Mon Oct 28 16:38:23 2019 +0100 @@ -169,15 +169,35 @@ }, methods: { downloadImage(elementName) { - const diagramContainer = document.getElementById(this.containerId); + const offScreen = document.querySelector("#offScreen"); + const DPI = 96; + const svgWidth = this.millimeter2pixels(428, DPI); + const svgHeight = this.millimeter2pixels(119, DPI); + offScreen.style.width = `${svgWidth}px`; + offScreen.style.height = `${svgHeight}px`; + let zoomLevel = this.zoomStore; + const layout = this.getPrintLayout(svgHeight, svgWidth); + this.renderTo({ + element: offScreen, + dimensions: this.getDimensions({ + svgWidth: svgWidth, + svgHeight: svgHeight, + ...layout + }), + zoomLevel // passing the zoom level to draw the diagram on pdf at this point + }); + const diagramContainer = document.getElementById("offScreen"); const { clientHeight, clientWidth } = diagramContainer; - diagramContainer.firstElementChild.setAttribute("width", clientWidth); - diagramContainer.firstElementChild.setAttribute("height", clientHeight); - const svg = diagramContainer.firstElementChild.outerHTML; + diagramContainer.querySelector("svg").setAttribute("width", clientWidth); + diagramContainer + .querySelector("svg") + .setAttribute("height", clientHeight); + const svg = diagramContainer.querySelector("svg").outerHTML; const canvas = document.createElement("canvas"); canvg(canvas, svg); const imgData = canvas.toDataURL("image/png"); document.getElementById(elementName).setAttribute("href", imgData); + offScreen.removeChild(offScreen.firstChild); }, addDiagram(position, offset, width, height) { let x = offset.x,