Mercurial > gemma
changeset 3791:6081743c0d98 yworks-svg2pdf
client: merge
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 03 Jul 2019 16:54:17 +0200 |
parents | c66cdde873b5 (diff) 60977e18e227 (current diff) |
children | 3878bc0c8e58 |
files | |
diffstat | 1 files changed, 36 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed Jul 03 16:53:06 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Wed Jul 03 16:54:17 2019 +0200 @@ -419,7 +419,42 @@ } }) .then(response => { - this.templateData = response.data.template_data; + /** + * In order to render the images from the template, we need to convert + * each image to dataURIs. Since this happens asynchronous, + * we need to wrap each image into its own promise and only after all are + * finished, we continue with the flow. + */ + const imageElementLoaders = response.data.template_data.elements.reduce( + (o, n, i) => { + if (n.type === "image") { + o.push( + new Promise(resolve => { + const image = new Image(); + image.onload = function() { + var canvas = document.createElement("canvas"); + canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size + canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size + canvas.getContext("2d").drawImage(this, 0, 0); + resolve({ + index: i, + url: canvas.toDataURL("image/png") + }); + }; + image.src = n.url; + }) + ); + } + return o; + }, + [] + ); + Promise.all(imageElementLoaders).then(values => { + values.forEach(v => { + response.data.template_data.elements[v.index].url = v.url; + }); + this.templateData = response.data.template_data; + }); }) .catch(e => { const { status, data } = e.response;