Mercurial > gemma
changeset 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 | a2da2328bb86 |
children | 3ca5a83e46af |
files | client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 37 insertions(+), 6 deletions(-) [+] |
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;
--- a/client/src/lib/mixins.js Wed Jul 03 16:23:22 2019 +0200 +++ b/client/src/lib/mixins.js Wed Jul 03 16:42:38 2019 +0200 @@ -153,11 +153,7 @@ this.addRoundedBox(x, y, width, height, color, rounding, brcolor); }, getTextHeight(numberOfLines) { - return ( - numberOfLines * - ((this.pdf.doc.getFontSize() * 25.4) / 80) * - this.pdf.doc.getLineHeightFactor() - ); + return numberOfLines * ((this.pdf.doc.getFontSize() * 25.4) / 80) * 1.15; }, // title for diagram addDiagramTitle(position, offset, size, color, text) {