From db706e08f512737d98ba268a08c24e0871a68873 Mon Sep 17 00:00:00 2001
From: Jim Richter <jim-x@web.de>
Date: Wed, 10 Mar 2021 14:32:45 +0100
Subject: [PATCH] feat: add download mask button

---
 view/src/helpers/DownloadImage.ts | 21 +++++++++++++++++++++
 view/src/helpers/index.ts         |  1 +
 view/src/routes/list.svelte       | 11 +++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 view/src/helpers/DownloadImage.ts

diff --git a/view/src/helpers/DownloadImage.ts b/view/src/helpers/DownloadImage.ts
new file mode 100644
index 0000000..44beba6
--- /dev/null
+++ b/view/src/helpers/DownloadImage.ts
@@ -0,0 +1,21 @@
+export default (img: Image) => {
+
+  const canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+  const cx = canvas.getContext("2d");
+
+  const imageData = new ImageData(
+    new Uint8ClampedArray(img.overlayData),
+    img.width,
+    img.height
+  );
+  cx.putImageData(imageData, 0, 0);
+
+  var link = document.createElement('a');
+  link.download = img.name + '_mask.png';
+  link.href = canvas.toDataURL()
+  link.click();
+
+}
\ No newline at end of file
diff --git a/view/src/helpers/index.ts b/view/src/helpers/index.ts
index faf7d7a..63b9159 100644
--- a/view/src/helpers/index.ts
+++ b/view/src/helpers/index.ts
@@ -1,4 +1,5 @@
 export { default as bufToImageUrl } from "./BuffToImg";
 export { default as fileToImage } from "./FileToImage";
 export { default as countPixels } from "./CountPixels";
+export { default as downloadImage } from "./DownloadImage";
 export { default as AI } from "./AI";
\ No newline at end of file
diff --git a/view/src/routes/list.svelte b/view/src/routes/list.svelte
index 47d13ac..9e741b9 100644
--- a/view/src/routes/list.svelte
+++ b/view/src/routes/list.svelte
@@ -2,7 +2,7 @@
   import { Cross } from "../icons";
   import { fly, fade } from "svelte/transition";
   import { images as imageData, route } from "stores";
-  import { bufToImageUrl, AI } from "../helpers";
+  import { bufToImageUrl, AI, downloadImage } from "../helpers";
   import type { Writable } from "svelte/store";
 
   import Toast from "../components/Toast";
@@ -70,7 +70,14 @@
         <button on:click={() => route.set("editor/" + img.id)}>edit</button>
         <button
           on:click={() => {
-            imageData.deleteImage(img);
+            downloadImage(img);
+          }}>download mask</button
+        >
+        <button
+          on:click={() => {
+            Toast.confirm(`Delete <b>${img.name}</b>?`).then(
+              (shouldDelete) => shouldDelete && imageData.deleteImage(img)
+            );
           }}>delete</button
         >
       </div>