修复内存溢出问题

src/utils/imageUtils.ts

@@ -23,6 +23,12 @@ export function blobToBase64(blob: Blob): Promise<string> {
   });
 }
 
+// 将URL转换为Blob
+export async function urlToBlob(url: string): Promise<Blob> {
+  const response = await fetch(url);
+  return await response.blob();
+}
+
 export function createImageFromBase64(base64: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -48,16 +54,93 @@ export function generateId(): string {
   return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
 
-export function downloadImage(base64: string, filename: string): void {
-  const blob = base64ToBlob(base64);
-  const url = URL.createObjectURL(blob);
-  
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  
-  URL.revokeObjectURL(url);
+export function downloadImage(imageData: string, filename: string): void {
+  if (imageData.startsWith('blob:')) {
+    // 对于Blob URL，我们需要获取实际的Blob数据
+    fetch(imageData)
+      .then(response => response.blob())
+      .then(blob => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      });
+  } else if (imageData.startsWith('data:')) {
+    // 对于数据URL，直接下载
+    const a = document.createElement('a');
+    a.href = imageData;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } else {
+    // 对于其他URL，获取并转换为blob
+    fetch(imageData)
+      .then(response => response.blob())
+      .then(blob => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      });
+  }
+}
+
+// 优化的图像压缩函数
+export async function compressImage(blob: Blob, quality: number = 0.8): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    
+    if (!ctx) {
+      reject(new Error('无法获取canvas上下文'));
+      return;
+    }
+    
+    const img = new Image();
+    img.onload = () => {
+      // 设置canvas尺寸
+      canvas.width = img.width;
+      canvas.height = img.height;
+      
+      // 绘制图像
+      ctx.drawImage(img, 0, 0);
+      
+      // 转换为Blob
+      canvas.toBlob(
+        (compressedBlob) => {
+          if (compressedBlob) {
+            resolve(compressedBlob);
+          } else {
+            reject(new Error('图像压缩失败'));
+          }
+        },
+        'image/jpeg',
+        quality
+      );
+    };
+    
+    img.onerror = reject;
+    
+    // 将Blob转换为URL以便加载到图像中
+    const url = URL.createObjectURL(blob);
+    img.src = url;
+    
+    // 清理URL
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      // 调用原始的onload处理程序
+      if (img.onload) {
+        (img.onload as any).call(img);
+      }
+    };
+  });
 }