fix download

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)" />