--- a/client/src/components/gauge/Waterlevel.vue	Fri Oct 25 13:03:50 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Oct 25 13:46:05 2019 +0200
@@ -64,7 +64,17 @@
           >
             <translate>Export as CSV</translate>
           </a>
-
+          <a
+            @click="downloadImage"
+            id="downloadimage"
+            :class="[
+              'btn btn-sm btn-info d-block w-100 mt-2',
+              { disabled: !waterlevels.length }
+            ]"
+            :download="imageFilename"
+          >
+            <translate>Export as Image</translate>
+          </a>
           <!--
           <button
             @click="downloadSVG"
@@ -128,6 +138,7 @@
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
 import { localeDateString } from "@/lib/datelocalization";
+
 // we should load only d3 modules we need but for now we'll go with the lazy way
 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
@@ -183,6 +194,14 @@
         "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV)
       );
     },
+    imageFilename() {
+      return (
+        this.downloadFilename(
+          this.$gettext("Waterlevel"),
+          this.selectedGauge.properties.objname
+        ) + ".png"
+      );
+    },
     csvFileName() {
       if (!this.dateFromD || !this.dateToD) return "";
       return (
@@ -222,6 +241,7 @@
           : "DEFAULT"
       );
     },
+
     downloadSVG() {
       let svg = document.getElementById(this.containerId).firstElementChild;
       let svgXML = new XMLSerializer().serializeToString(svg);
@@ -400,6 +420,14 @@
         .append("svg")
         .attr("width", "100%")
         .attr("height", "100%");
+      // add white background in the size of the svg
+      // to solve alpha-channel problem when using canvg to export image
+      svg
+        .append("g")
+        .append("rect")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("fill", "#ffffff");
 
       // create container for main diagram
       const diagram = svg