Mercurial > gemma
changeset 4808:db450fcc8ed7
client: add title for the exported image
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 29 Oct 2019 11:04:14 +0100 |
parents | 7cd40008124b |
children | b6d8570b8480 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
diffstat | 6 files changed, 20 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon Oct 28 16:38:23 2019 +0100 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue Oct 29 11:04:14 2019 +0100 @@ -42,7 +42,7 @@ ><translate>Download CSV</translate></a > <a - @click="downloadImage('AFDpng')" + @click="downloadImage('AFDpng', title)" id="AFDpng" class="btn btn-sm btn-info text-white d-block w-100 mt-2" :download="`${fileName}.png`"
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon Oct 28 16:38:23 2019 +0100 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Oct 29 11:04:14 2019 +0100 @@ -42,7 +42,7 @@ ><translate>Download CSV</translate></a > <a - @click="downloadImage('AFDvsLNWLpng')" + @click="downloadImage('AFDvsLNWLpng', title)" id="AFDvsLNWLpng" class=" btn btn-sm btn-info text-white d-block w-100 mt-2" :download="`${fileName}.png`"
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Oct 28 16:38:23 2019 +0100 +++ b/client/src/components/fairway/Fairwayprofile.vue Tue Oct 29 11:04:14 2019 +0100 @@ -91,7 +91,7 @@ <translate>Export to PDF</translate> </button> <a - @click="downloadImage('fairwaypng')" + @click="downloadImage('fairwaypng', title)" id="fairwaypng" class="btn btn-sm btn-info text-white d-block w-100 mt-2" :download="`${fileName}.png`"
--- a/client/src/components/gauge/HydrologicalConditions.vue Mon Oct 28 16:38:23 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Oct 29 11:04:14 2019 +0100 @@ -80,7 +80,7 @@ <translate>Export as CSV</translate> </a> <a - @click="downloadImage('hydrologicalpng')" + @click="downloadImage('hydrologicalpng', title)" id="hydrologicalpng" :class="[ 'btn btn-sm btn-info text-white d-block w-100 mt-2',
--- a/client/src/components/gauge/Waterlevel.vue Mon Oct 28 16:38:23 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Tue Oct 29 11:04:14 2019 +0100 @@ -65,7 +65,7 @@ <translate>Export as CSV</translate> </a> <a - @click="downloadImage('waterlevelpng')" + @click="downloadImage('waterlevelpng', title)" id="waterlevelpng" :class="[ 'btn btn-sm btn-info text-white d-block w-100 mt-2',
--- a/client/src/lib/mixins.js Mon Oct 28 16:38:23 2019 +0100 +++ b/client/src/lib/mixins.js Tue Oct 29 11:04:14 2019 +0100 @@ -168,7 +168,7 @@ ...mapState("user", ["user"]) }, methods: { - downloadImage(elementName) { + downloadImage(elementName, title) { const offScreen = document.querySelector("#offScreen"); const DPI = 96; const svgWidth = this.millimeter2pixels(428, DPI); @@ -191,10 +191,22 @@ diagramContainer.querySelector("svg").setAttribute("width", clientWidth); diagramContainer .querySelector("svg") - .setAttribute("height", clientHeight); + .setAttribute("height", clientHeight + 70); const svg = diagramContainer.querySelector("svg").outerHTML; const canvas = document.createElement("canvas"); - canvg(canvas, svg); + canvg(canvas, svg, { offsetY: 70 }); + const ctx = canvas.getContext("2d"); + // Draw white rectangular and place the title on it + ctx.beginPath(); + ctx.fillStyle = "#ffffff"; + ctx.fillRect(0, 0, clientWidth, 70); + ctx.stroke(); + ctx.fillStyle = "steelblue"; + ctx.font = "500 30px sans-serif"; + ctx.textAlign = "center"; + ctx.fillText(title, clientWidth / 2, 35); + ctx.closePath(); + const imgData = canvas.toDataURL("image/png"); document.getElementById(elementName).setAttribute("href", imgData); offScreen.removeChild(offScreen.firstChild);