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 @@
+