Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 3786:a2da2328bb86 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
PDFTool: prefetch images of template and convert to dataURI
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 03 Jul 2019 16:23:22 +0200
parents 217fe7b4f909
children 60977e18e227
comparison
equal deleted inserted replaced
3785:0c5816af79a5 3786:a2da2328bb86
223 } 223 }
224 } 224 }
225 ) 225 )
226 .then(response => { 226 .then(response => {
227 this.templateData = response.data.template_data; 227 this.templateData = response.data.template_data;
228 this.form.format = this.templateData.properties.format; 228 /**
229 this.form.paperSize = this.templateData.properties.paperSize; 229 * In order to render the images from the template, we need to convert
230 this.form.resolution = this.templateData.properties.resolution; 230 * each image to dataURIs. Since this happens asynchronous,
231 * we need to wrap each image into its own promise and only after all are
232 * finished, we continue with the flow.
233 */
234 const imageElementLoaders = response.data.template_data.elements.reduce(
235 (o, n, i) => {
236 if (n.type === "image") {
237 o.push(
238 new Promise(resolve => {
239 const image = new Image();
240 image.onload = function() {
241 var canvas = document.createElement("canvas");
242 canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
243 canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
244 canvas.getContext("2d").drawImage(this, 0, 0);
245 resolve({
246 index: i,
247 url: canvas.toDataURL("image/png")
248 });
249 };
250 image.src = n.url;
251 })
252 );
253 }
254 return o;
255 },
256 []
257 );
258 Promise.all(imageElementLoaders).then(values => {
259 values.forEach(v => {
260 response.data.template_data.elements[v.index].url = v.url;
261 });
262 this.form.format = this.templateData.properties.format;
263 this.form.paperSize = this.templateData.properties.paperSize;
264 this.form.resolution = this.templateData.properties.resolution;
265 });
231 }) 266 })
232 .catch(e => { 267 .catch(e => {
233 const { status, data } = e.response; 268 const { status, data } = e.response;
234 displayError({ 269 displayError({
235 title: this.$gettext("Backend Error"), 270 title: this.$gettext("Backend Error"),
802 1.15 // see https://github.com/yWorks/jsPDF/blob/master/jspdf.js#L207 837 1.15 // see https://github.com/yWorks/jsPDF/blob/master/jspdf.js#L207
803 ); 838 );
804 } 839 }
805 }, 840 },
806 mounted() { 841 mounted() {
807 this.form.template = this.templates[0];
808 this.templateData = this.form.template;
809 HTTP.get("/templates/map", { 842 HTTP.get("/templates/map", {
810 headers: { 843 headers: {
811 "X-Gemma-Auth": localStorage.getItem("token"), 844 "X-Gemma-Auth": localStorage.getItem("token"),
812 "Content-type": "text/xml; charset=UTF-8" 845 "Content-type": "text/xml; charset=UTF-8"
813 } 846 }
815 .then(response => { 848 .then(response => {
816 if (response.data.length) { 849 if (response.data.length) {
817 this.templates = response.data; 850 this.templates = response.data;
818 this.form.template = this.templates[0]; 851 this.form.template = this.templates[0];
819 this.applyTemplateToForm(); 852 this.applyTemplateToForm();
853 } else {
854 this.form.template = this.templates[0];
855 this.templateData = this.form.template;
820 } 856 }
821 }) 857 })
822 .catch(e => { 858 .catch(e => {
823 const { status, data } = e.response; 859 const { status, data } = e.response;
824 displayError({ 860 displayError({