Mercurial > gemma
comparison client/src/components/gauge/HydrologicalConditions.vue @ 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 | 2b6734a6730a |
children | e008197e2215 |
comparison
equal
deleted
inserted
replaced
3788:3ca5a83e46af | 3789:c66cdde873b5 |
---|---|
417 "X-Gemma-Auth": localStorage.getItem("token"), | 417 "X-Gemma-Auth": localStorage.getItem("token"), |
418 "Content-type": "text/xml; charset=UTF-8" | 418 "Content-type": "text/xml; charset=UTF-8" |
419 } | 419 } |
420 }) | 420 }) |
421 .then(response => { | 421 .then(response => { |
422 this.templateData = response.data.template_data; | 422 /** |
423 * In order to render the images from the template, we need to convert | |
424 * each image to dataURIs. Since this happens asynchronous, | |
425 * we need to wrap each image into its own promise and only after all are | |
426 * finished, we continue with the flow. | |
427 */ | |
428 const imageElementLoaders = response.data.template_data.elements.reduce( | |
429 (o, n, i) => { | |
430 if (n.type === "image") { | |
431 o.push( | |
432 new Promise(resolve => { | |
433 const image = new Image(); | |
434 image.onload = function() { | |
435 var canvas = document.createElement("canvas"); | |
436 canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size | |
437 canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size | |
438 canvas.getContext("2d").drawImage(this, 0, 0); | |
439 resolve({ | |
440 index: i, | |
441 url: canvas.toDataURL("image/png") | |
442 }); | |
443 }; | |
444 image.src = n.url; | |
445 }) | |
446 ); | |
447 } | |
448 return o; | |
449 }, | |
450 [] | |
451 ); | |
452 Promise.all(imageElementLoaders).then(values => { | |
453 values.forEach(v => { | |
454 response.data.template_data.elements[v.index].url = v.url; | |
455 }); | |
456 this.templateData = response.data.template_data; | |
457 }); | |
423 }) | 458 }) |
424 .catch(e => { | 459 .catch(e => { |
425 const { status, data } = e.response; | 460 const { status, data } = e.response; |
426 displayError({ | 461 displayError({ |
427 title: this.$gettext("Backend Error"), | 462 title: this.$gettext("Backend Error"), |