Mercurial > gemma
changeset 3789:c66cdde873b5 yworks-svg2pdf
Hydrological_Conditions: prefetch images of template and convert to dataURI
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 03 Jul 2019 16:50:28 +0200 |
parents | 3ca5a83e46af |
children | 6081743c0d98 |
files | client/src/components/gauge/HydrologicalConditions.vue |
diffstat | 1 files changed, 36 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed Jul 03 16:44:45 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Wed Jul 03 16:50:28 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;