gemma: client/src/components/gauge/Waterlevel.vue comparison

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	d36ccff8de5f
children	d428f283fe10

comparison

equal deleted inserted replaced

-:a2da2328bb86
+:f86220aa8a72
 "X-Gemma-Auth": localStorage.getItem("token"),
 "Content-type": "text/xml; charset=UTF-8"
 }
 })
 .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;
 displayError({
 title: this.$gettext("Backend Error"),

Mercurial > gemma