diff client/src/components/fairway/Fairwayprofile.vue @ 4807:7cd40008124b

client: image-export: render diagram offscreen and use mixins in fairway-diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 28 Oct 2019 16:38:23 +0100
parents 75e6ec39a0b7
children db450fcc8ed7
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 13:07:01 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 16:38:23 2019 +0100
@@ -91,8 +91,8 @@
             <translate>Export to PDF</translate>
           </button>
           <a
-            @click="exportImage"
-            id="downloadimage"
+            @click="downloadImage('fairwaypng')"
+            id="fairwaypng"
             class="btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
           >
@@ -160,7 +160,6 @@
 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";
@@ -294,17 +293,6 @@
     }
   },
   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",