circle to squad images to save

src/routes/+page.svelte

@@ -75,24 +75,34 @@
   async function saveImage(): Promise<void> {
     if (!image) return;
 
-    let node = document.getElementById("result");
+    const node = document.getElementById("result");
+    if (!node) return;
 
-    if (node) {
-      domtoimage
-        .toPng(node, {
-          style: {
-            border: "none",
-            padding: "0",
-            margin: "0",
-            outline: "none",
-          },
-        })
-        .then((dataUrl: string) => {
-          var link = document.createElement("a");
-          link.download = "avatar.png";
-          link.href = dataUrl;
-          link.click();
-        });
+    const imageElement = node.querySelector('image[clip-path]');
+
+    // Temporarily remove the clip-path for saving the square image
+    if (imageElement) {
+      imageElement.removeAttribute('clip-path');
+    }
+
+    try {
+      const dataUrl = await domtoimage.toPng(node, {
+        style: {
+          border: "none",
+          padding: "0",
+          margin: "0",
+          outline: "none",
+        },
+      });
+      const link = document.createElement("a");
+      link.download = "avatar.png";
+      link.href = dataUrl;
+      link.click();
+    } finally {
+      // Restore the clip-path for the UI to keep the circle
+      if (imageElement) {
+        imageElement.setAttribute('clip-path', 'url(#circle-clip)');
+      }
     }
   }