feat: add download mask button

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();
+
+}

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";

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>