Mercurial > gemma
changeset 4804:75e6ec39a0b7
client: fairwayprofile: implement image-export
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 28 Oct 2019 11:25:25 +0100 |
parents | b3f65cff13e8 |
children | 7de099c4824c |
files | client/src/components/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 33 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Oct 28 10:41:12 2019 +0100 +++ b/client/src/components/fairway/Fairwayprofile.vue Mon Oct 28 11:25:25 2019 +0100 @@ -90,10 +90,17 @@ > <translate>Export to PDF</translate> </button> + <a + @click="exportImage" + id="downloadimage" + class="btn btn-sm btn-info text-white d-block w-100 mt-2" + :download="`${fileName}.png`" + > + <translate>Export as Image</translate> + </a> </div> </DiagramLegend> <div - ref="pdfContainer" id="pdfContainer" class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative" > @@ -153,6 +160,7 @@ 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"; @@ -244,6 +252,12 @@ refWaterlevel() { if (!this.selectedSurvey) return 0; return this.selectedSurvey.waterlevel_value; + }, + fileName() { + return this.downloadFilename( + this.$gettext("Fairwayprofile"), + this.selectedBottleneck + ); } }, watch: { @@ -280,6 +294,17 @@ } }, 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", @@ -332,12 +357,7 @@ templateData: this.templateData, diagramTitle: fairwayInfo }); - this.pdf.doc.save( - this.downloadFilename( - this.$gettext("Fairwayprofile"), - this.selectedBottleneck - ) + ".pdf" - ); + this.pdf.doc.save(this.fileName + ".pdf"); }, // Diagram legend @@ -435,6 +455,12 @@ let svg = d3.select(element).append("svg"); svg.attr("width", "100%"); svg.attr("height", "100%"); + svg + .append("g") + .append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", "#ffffff"); const width = dimensions.width; const height = dimensions.mainHeight; const offsetY = 15;