diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index 29269b8f..3c73b52b 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -19,7 +19,7 @@ type CanvasImageEditorProps = {
   imageSrc: string;
   disabled?: boolean;
   imguid: string | number;
-  onSave: (imageData: { mask: string; img: string }) => void;
+  onSave: (imageData: { mask: string | null; img: string }) => void;
   uploadButton: React.ReactNode;
   imageStatus: {
     isOriginal: boolean;
@@ -148,6 +148,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   };
 
   const generateMask = useCallback(() => {
+    if (strokesRef.current.length === 0) {
+      return null;
+    }
     const overlayCanvas = overlayCanvasRef.current!;
     const maskCanvas = document.createElement('canvas');
     maskCanvas.width = overlayCanvas.width;
@@ -197,7 +200,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
 
     const link = document.createElement('a');
     link.download = 'mask.png';
-    link.href = mask;
+    link.href = mask || '';
     link.click();
   }, [generateMask]);
 
@@ -524,6 +527,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
       redrawStrokes(strokesRef.current);
     }
     updateCursorSize();
+    saveImage();
   }, [drawImage, onReset, redrawStrokes, imguid]);
 
   const updateZoom = (scaleChange: number, mouseX: number, mouseY: number) => {
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
index b41cb141..5e676955 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/src/pages/playground/components/image-edit.tsx
@@ -122,7 +122,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const form = useRef<any>(null);
   const inputRef = useRef<any>(null);
   const [image, setImage] = useState<string>('');
-  const [mask, setMask] = useState<string>('');
+  const [mask, setMask] = useState<string | null>(null);
   const [uploadList, setUploadList] = useState<any[]>([]);
   const [modelMeta, setModelMeta] = useState<any>({});
   const [imageStatus, setImageStatus] = useState<{
@@ -640,14 +640,17 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setImageList([]);
   }, []);
 
-  const handleOnSave = useCallback((data: { img: string; mask: string }) => {
-    setImageStatus({
-      isOriginal: true,
-      isResetNeeded: false
-    });
-    setMask(data.mask);
-    setImage(data.img);
-  }, []);
+  const handleOnSave = useCallback(
+    (data: { img: string; mask: string | null }) => {
+      setImageStatus({
+        isOriginal: true,
+        isResetNeeded: false
+      });
+      setMask(data.mask || null);
+      setImage(data.img);
+    },
+    []
+  );
 
   const renderImageEditor = useMemo(() => {
     if (image) {