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) {
+    const imageElement = node.querySelector('image[clip-path]');
-      domtoimage
+
-        .toPng(node, {
+    // Temporarily remove the clip-path for saving the square image
-          style: {
+    if (imageElement) {
-            border: "none",
+      imageElement.removeAttribute('clip-path');
-            padding: "0",
+    }
-            margin: "0",
+
-            outline: "none",
+    try {
-          },
+      const dataUrl = await domtoimage.toPng(node, {
-        })
+        style: {
-        .then((dataUrl: string) => {
+          border: "none",
-          var link = document.createElement("a");
+          padding: "0",
-          link.download = "avatar.png";
+          margin: "0",
-          link.href = dataUrl;
+          outline: "none",
-          link.click();
+        },
-        });
+      });
+      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)');
+      }
     }
   }