diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx
index 381a1759..2d1a14ef 100644
--- a/gui/src/components/input/MaskCanvas.tsx
+++ b/gui/src/components/input/MaskCanvas.tsx
@@ -1,5 +1,5 @@
import { doesExist, Maybe, mustExist } from '@apextoaster/js-utils';
-import { FormatColorFill, Gradient, InvertColors, Undo } from '@mui/icons-material';
+import { Download, FormatColorFill, Gradient, InvertColors, Save, Undo } from '@mui/icons-material';
import { Button, Stack, Typography } from '@mui/material';
import { throttle } from 'lodash';
import React, { RefObject, useContext, useEffect, useMemo, useRef } from 'react';
@@ -251,6 +251,27 @@ export function MaskCanvas(props: MaskCanvasProps) {
};
return
+
+ }
+ onClick={() => {
+ if (doesExist(maskRef.current)) {
+ const data = maskRef.current.toDataURL('image/png');
+ const link = document.createElement('a');
+
+ link.setAttribute('download', 'mask.png');
+ link.setAttribute('href', data.replace('image/png', 'image/octet-stream'));
+ link.click();
+ }
+ }}
+ />
+ }
+ onClick={() => drawUndo()}
+ />
+
- }
- onClick={() => drawUndo()}
- />
}