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
+    if (imageElement) {
+      imageElement.removeAttribute('clip-path');
+    }
+
+    try {
+      const dataUrl = await domtoimage.toPng(node, {
         style: {
           border: "none",
           padding: "0",
           margin: "0",
           outline: "none",
         },
-        })
+      });
-        .then((dataUrl: string) => {
+      const link = document.createElement("a");
-          var 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)');
+      }
     }
   }