--- a/client/src/components/gauge/Waterlevel.vue	Wed Jul 03 16:23:22 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Wed Jul 03 16:42:38 2019 +0200
@@ -388,7 +388,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;

--- a/client/src/lib/mixins.js	Wed Jul 03 16:23:22 2019 +0200
+++ b/client/src/lib/mixins.js	Wed Jul 03 16:42:38 2019 +0200
@@ -153,11 +153,7 @@
       this.addRoundedBox(x, y, width, height, color, rounding, brcolor);
     },
     getTextHeight(numberOfLines) {
-      return (
-        numberOfLines *
-        ((this.pdf.doc.getFontSize() * 25.4) / 80) *
-        this.pdf.doc.getLineHeightFactor()
-      );
+      return numberOfLines * ((this.pdf.doc.getFontSize() * 25.4) / 80) * 1.15;
     },
     // title for diagram
     addDiagramTitle(position, offset, size, color, text) {