# HG changeset patch # User Thomas Junk # Date 1562163802 -7200 # Node ID a2da2328bb8621a7bf2a4596cc92de647dc8e184 # Parent 0c5816af79a5c2c16cbf040bae241a7fc3fdc2ca PDFTool: prefetch images of template and convert to dataURI diff -r 0c5816af79a5 -r a2da2328bb86 client/src/components/Pdftool.vue --- a/client/src/components/Pdftool.vue Wed Jul 03 13:12:32 2019 +0200 +++ b/client/src/components/Pdftool.vue Wed Jul 03 16:23:22 2019 +0200 @@ -225,9 +225,44 @@ ) .then(response => { this.templateData = response.data.template_data; - this.form.format = this.templateData.properties.format; - this.form.paperSize = this.templateData.properties.paperSize; - this.form.resolution = this.templateData.properties.resolution; + /** + * 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.form.format = this.templateData.properties.format; + this.form.paperSize = this.templateData.properties.paperSize; + this.form.resolution = this.templateData.properties.resolution; + }); }) .catch(e => { const { status, data } = e.response; @@ -804,8 +839,6 @@ } }, mounted() { - this.form.template = this.templates[0]; - this.templateData = this.form.template; HTTP.get("/templates/map", { headers: { "X-Gemma-Auth": localStorage.getItem("token"), @@ -817,6 +850,9 @@ this.templates = response.data; this.form.template = this.templates[0]; this.applyTemplateToForm(); + } else { + this.form.template = this.templates[0]; + this.templateData = this.form.template; } }) .catch(e => {