Mercurial > gemma
diff client/src/components/gauge/Waterlevel.vue @ 3787:f86220aa8a72 yworks-svg2pdf
Waterlevel: prefetch images of template and convert to dataURI
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 03 Jul 2019 16:42:38 +0200 |
parents | d36ccff8de5f |
children | d428f283fe10 |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Wed Jul 03 16:23:22 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Wed Jul 03 16:42:38 2019 +0200 @@ -388,7 +388,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;