From c4a03cddb62a1e10f6a444538f857183dd5c1b0b Mon Sep 17 00:00:00 2001
From: Serverus Snap <serverussnap@outlook.com>
Date: Fri, 29 Aug 2025 10:09:05 +0300
Subject: [PATCH] circle to squad images to save

---
 src/routes/+page.svelte | 44 +++++++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 40e0bc6..20b15d5 100644
--- a/src/routes/+page.svelte
+++ b/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)');
+      }
     }
   }