[feature] export NWK as PNG (first trial, CSS missing) #47

src/assets/utils.ts

@@ -1,10 +1,7 @@
-export function download(filename: string, text: string): void {
+function download(filename: string, dataURL: string): void {
   // based on https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
   const element = document.createElement("a");
-  element.setAttribute(
-    "href",
-    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
-  );
+  element.setAttribute("href", dataURL);
   element.setAttribute("download", filename);
 
   element.style.display = "none";
@@ -15,4 +12,50 @@ export function download(filename: string, text: string): void {
   document.body.removeChild(element);
 }
 
+export function downloadText(filename: string, text: string): void {
+  download(
+    filename,
+    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+  );
+}
+
+export function downloadSVGasPNG(filename: string, svgSelector: string): void {
+  // based on https://stackoverflow.com/a/69695782/1140589
+
+  const svgElem = document.querySelector(svgSelector);
+  if (!svgElem) {
+    console.error("SVG element not found: " + svgSelector);
+    return;
+  }
+
+  const svgData = new XMLSerializer().serializeToString(svgElem);
+  // svgData = '<?xml version="1.0" standalone="no"?>\r\n' + svgData;
+
+  const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+  const DOMURL = window.URL || window.webkitURL || window;
+  const svgUrl = DOMURL.createObjectURL(svgBlob);
+
+  const img = new Image();
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const domRect = (svgElem as SVGGraphicsElement).getBBox();
+    canvas.width = domRect.width;
+    canvas.height = domRect.height;
+    ctx?.drawImage(img, 0, 0, domRect.width, domRect.height);
+    DOMURL.revokeObjectURL(svgUrl);
+
+    const imgURI = canvas
+      .toDataURL("image/png")
+      .replace("image/png", "image/octet-stream");
+
+    download(filename, imgURI);
+  };
+  img.onerror = (e) => {
+    console.error("Image not loaded", e);
+  };
+
+  img.src = svgUrl;
+}
+
 export const SYMBOL_DECEASED = "+"; // "💀";

src/components/SideMenu.vue

@@ -60,6 +60,15 @@
 
         <p><br /></p>
 
+        <button class="button" @click="exportPNG">
+          <span class="icon">
+            <font-awesome-icon icon="file-image" />
+          </span>
+          <span>PNG speichern</span>
+        </button>
+
+        <p><br /></p>
+
         <button class="button" @click="showStatistics">
           <span class="icon">
             <font-awesome-icon icon="chart-bar" />
@@ -93,7 +102,7 @@
 import { computed, defineComponent, ref } from "vue";
 // @ is an alias to /src
 import { useStore } from "@/store";
-import { download } from "@/assets/utils";
+import { downloadSVGasPNG, downloadText } from "@/assets/utils";
 
 export default defineComponent({
   setup(props, { emit }) {
@@ -129,7 +138,7 @@ export default defineComponent({
     };
 
     const save = () => {
-      download(
+      downloadText(
         store.state.nwk.ego.name + ".json",
         JSON.stringify(store.state.nwk)
       );
@@ -148,6 +157,10 @@ export default defineComponent({
         });
     };
 
+    const exportPNG = () => {
+      downloadSVGasPNG(store.state.nwk.ego.name + ".png", "svg#nwkmap");
+    };
+
     const horizons = computed(() => store.state.view.horizons);
 
     const toggleHorizons = () => {
@@ -163,6 +176,7 @@ export default defineComponent({
       open,
       save,
       openDemoData,
+      exportPNG,
 
       showStatistics: () => {
         store.commit("view/enable", "statistics");

src/main.ts

@@ -24,6 +24,7 @@ import {
   faFolderOpen,
   faFile,
   faSave,
+  faFileImage,
   // faChevronDown,
   // faUndoAlt,
   // faRedoAlt,
@@ -48,6 +49,7 @@ library.add(
   faFolderOpen,
   faFile,
   faSave,
+  faFileImage,
   // faChevronDown,
   // faUndoAlt,
   // faRedoAlt,