From 6e6b0df8b8fd13dec52b7f48783522ec27f228d4 Mon Sep 17 00:00:00 2001
From: Serverus Snap <serverussnap@outlook.com>
Date: Thu, 28 Aug 2025 19:54:40 +0300
Subject: [PATCH] fix download

---
 src/routes/+page.svelte | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b814337..40e0bc6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import domtoimage from "dom-to-image";
+  import { onMount } from "svelte";
   import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
   import gradiImage from "$lib/images/image.png"
 
@@ -19,6 +20,20 @@
   let isDragging: boolean = false;
   let isModalOpen: boolean = false;
   let fontSize: number = 2.5;
+  let gradiImageDataUrl: string = "";
+
+  async function toDataURL(url: string): Promise<string> {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+
+  onMount(async () => (gradiImageDataUrl = await toDataURL(gradiImage)));
 
   async function validateAndLoadImage(file: File): Promise<void> {
     error = "";
@@ -175,7 +190,7 @@
                 </clipPath>
 
                 <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
-                  <image href={gradiImage} width="512" height="512"/>
+                  <image href={gradiImageDataUrl} width="512" height="512"/>
                 </pattern>
               </defs>
               <image href={image} width="512" height="512" clip-path="url(#circle-clip)" />