--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 10:41:12 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 11:25:25 2019 +0100
@@ -90,10 +90,17 @@
           >
             <translate>Export to PDF</translate>
           </button>
+          <a
+            @click="exportImage"
+            id="downloadimage"
+            class="btn btn-sm btn-info text-white d-block w-100 mt-2"
+            :download="`${fileName}.png`"
+          >
+            <translate>Export as Image</translate>
+          </a>
         </div>
       </DiagramLegend>
       <div
-        ref="pdfContainer"
         id="pdfContainer"
         class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative"
       >
@@ -153,6 +160,7 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
+import canvg from "canvg";
 
 const GROUND_COLOR = "#4A2F06";
 const WATER_COLOR = "#005DFF";
@@ -244,6 +252,12 @@
     refWaterlevel() {
       if (!this.selectedSurvey) return 0;
       return this.selectedSurvey.waterlevel_value;
+    },
+    fileName() {
+      return this.downloadFilename(
+        this.$gettext("Fairwayprofile"),
+        this.selectedBottleneck
+      );
     }
   },
   watch: {
@@ -280,6 +294,17 @@
     }
   },
   methods: {
+    exportImage() {
+      const diagramContainer = document.getElementById("pdfContainer");
+      const { clientHeight, clientWidth } = diagramContainer;
+      const svg = document.querySelector("#pdfContainer>svg");
+      svg.setAttribute("height", clientHeight);
+      svg.setAttribute("width", clientWidth);
+      const canvas = document.createElement("canvas");
+      canvg(canvas, svg.outerHTML);
+      const imgData = canvas.toDataURL("image/png");
+      document.getElementById("downloadimage").setAttribute("href", imgData);
+    },
     close() {
       this.$store.commit(
         "application/paneSetup",
@@ -332,12 +357,7 @@
         templateData: this.templateData,
         diagramTitle: fairwayInfo
       });
-      this.pdf.doc.save(
-        this.downloadFilename(
-          this.$gettext("Fairwayprofile"),
-          this.selectedBottleneck
-        ) + ".pdf"
-      );
+      this.pdf.doc.save(this.fileName + ".pdf");
     },
 
     // Diagram legend
@@ -435,6 +455,12 @@
       let svg = d3.select(element).append("svg");
       svg.attr("width", "100%");
       svg.attr("height", "100%");
+      svg
+        .append("g")
+        .append("rect")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("fill", "#ffffff");
       const width = dimensions.width;
       const height = dimensions.mainHeight;
       const offsetY = 15;