fix(media): handle SVG inputs using browser Canvas pre-conversion for ImageMagick WASM

lib/media/utils/fileUtils.ts

@@ -112,3 +112,41 @@ export async function downloadBlobsAsZip(files: Array<{ blob: Blob; filename: st
   // Download ZIP
   downloadBlob(zipBlob, zipFilename);
 }
+
+/**
+ * Convert SVG file/blob to PNG blob using browser Canvas
+ */
+export async function convertSvgToPng(svgFile: File | Blob, width: number, height: number): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(svgFile);
+    const img = new Image();
+    
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        URL.revokeObjectURL(url);
+        reject(new Error('Could not get canvas context'));
+        return;
+      }
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob((blob) => {
+        URL.revokeObjectURL(url);
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error('Canvas toBlob failed'));
+        }
+      }, 'image/png');
+    };
+    
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('Failed to load SVG image'));
+    };
+    
+    img.src = url;
+  });
+}