# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1562165428 -7200
# Node ID c66cdde873b55538b232b96fd62276f073dca90d
# Parent  3ca5a83e46aff1df68d99c5623ca2007d7b48b22
Hydrological_Conditions: prefetch images of template and convert to dataURI

diff -r 3ca5a83e46af -r c66cdde873b5 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Wed Jul 03 16:44:45 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Wed Jul 03 16:50:28 2019 +0200
@@ -419,7 +419,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;