frontbacked-svg 5.0.1 → 5.0.2

package/dist/main.cjs

@@ -431,6 +431,7 @@ __name(reduceBase64Image, "reduceBase64Image");
 var loadImageWithTimeout = /* @__PURE__ */ __name((src, timeout = 5e3) => {
   return new Promise((resolve, reject) => {
     const img = new Image();
+    if (!isNode4 && !src.startsWith("data:")) img.crossOrigin = "anonymous";
     const timer = setTimeout(() => {
       reject(new Error(`Image load timeout: ${src}`));
     }, timeout);
@@ -2372,16 +2373,173 @@ __name(createFontThumbnail, "createFontThumbnail");
 
 // src/getSvg.ts
 var import_jspdf = __toESM(require("jspdf"), 1);
-var pngToPdf = /* @__PURE__ */ __name(async (image, filename, resolve, reject) => {
-  const size = await getImageDimension(image);
-  const pdfDoc = new import_jspdf.default({
-    unit: "px",
-    format: [size.width, size.height]
-    // Set PDF dimensions to match the image
+var getPdfImageFormat = /* @__PURE__ */ __name((image) => {
+  return image.startsWith("data:image/jpeg") || image.startsWith("data:image/jpg") ? "JPEG" : "PNG";
+}, "getPdfImageFormat");
+var dataUrlToBlob = /* @__PURE__ */ __name((dataUrl) => {
+  const [header, data] = dataUrl.split(",");
+  const mimeType = header.match(/:(.*?);/)?.[1] || "application/octet-stream";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new Blob([bytes], { type: mimeType });
+}, "dataUrlToBlob");
+var isAppleMobileDevice = /* @__PURE__ */ __name(() => {
+  if (isNode5 || typeof navigator === "undefined") return false;
+  const userAgent = navigator.userAgent || "";
+  const platform = navigator.platform || "";
+  const maxTouchPoints = navigator.maxTouchPoints || 0;
+  return /iPad|iPhone|iPod/i.test(userAgent) || platform === "MacIntel" && maxTouchPoints > 1;
+}, "isAppleMobileDevice");
+var openBlobInBrowser = /* @__PURE__ */ __name((blob, fileName, openInNewTab = false) => {
+  const objectUrl = URL.createObjectURL(blob);
+  const downloadLink = document.createElement("a");
+  downloadLink.href = objectUrl;
+  downloadLink.rel = "noopener";
+  downloadLink.style.display = "none";
+  if (openInNewTab) {
+    downloadLink.target = "_blank";
+  } else {
+    downloadLink.download = fileName;
+  }
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 3e4);
+}, "openBlobInBrowser");
+var shareBlob = /* @__PURE__ */ __name(async (blob, fileName) => {
+  const shareApi = typeof navigator !== "undefined" ? navigator.share : null;
+  const canShare = typeof navigator !== "undefined" ? navigator.canShare : null;
+  if (!shareApi || typeof File === "undefined") return false;
+  const file = new File([blob], fileName, { type: blob.type || "application/octet-stream" });
+  const shareData = { files: [file], title: fileName };
+  if (canShare && !canShare.call(navigator, shareData)) return false;
+  await shareApi.call(navigator, shareData);
+  return true;
+}, "shareBlob");
+var promptAppleMobileSave = /* @__PURE__ */ __name((blob, fileName) => {
+  return new Promise((resolve, reject) => {
+    const overlay = document.createElement("div");
+    overlay.setAttribute("role", "dialog");
+    overlay.setAttribute("aria-modal", "true");
+    overlay.style.cssText = [
+      "position:fixed",
+      "inset:0",
+      "z-index:2147483647",
+      "display:flex",
+      "align-items:center",
+      "justify-content:center",
+      "padding:24px",
+      "background:rgba(15,23,42,0.58)",
+      "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
+    ].join(";");
+    const dialog = document.createElement("div");
+    dialog.style.cssText = [
+      "width:min(360px,100%)",
+      "border-radius:12px",
+      "background:#fff",
+      "box-shadow:0 20px 60px rgba(15,23,42,0.3)",
+      "padding:18px",
+      "color:#111827",
+      "text-align:left"
+    ].join(";");
+    const title = document.createElement("div");
+    title.textContent = "File ready";
+    title.style.cssText = "font-size:17px;font-weight:700;margin-bottom:8px;";
+    const body = document.createElement("div");
+    body.textContent = "Choose where to save this file.";
+    body.style.cssText = "font-size:14px;line-height:1.45;color:#4b5563;margin-bottom:16px;";
+    const actions = document.createElement("div");
+    actions.style.cssText = "display:flex;gap:10px;justify-content:flex-end;";
+    const cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.textContent = "Cancel";
+    cancelButton.style.cssText = [
+      "border:0",
+      "border-radius:8px",
+      "padding:10px 14px",
+      "background:#f3f4f6",
+      "color:#111827",
+      "font-size:14px",
+      "font-weight:600"
+    ].join(";");
+    const saveButton = document.createElement("button");
+    saveButton.type = "button";
+    saveButton.textContent = "Save File";
+    saveButton.style.cssText = [
+      "border:0",
+      "border-radius:8px",
+      "padding:10px 14px",
+      "background:#2563eb",
+      "color:#fff",
+      "font-size:14px",
+      "font-weight:700"
+    ].join(";");
+    const cleanup = /* @__PURE__ */ __name(() => {
+      document.body.removeChild(overlay);
+    }, "cleanup");
+    cancelButton.onclick = () => {
+      cleanup();
+      reject(new Error("File save was cancelled."));
+    };
+    saveButton.onclick = async () => {
+      saveButton.setAttribute("disabled", "true");
+      try {
+        const shared = await shareBlob(blob, fileName);
+        if (!shared) openBlobInBrowser(blob, fileName, true);
+        cleanup();
+        resolve();
+      } catch (error) {
+        cleanup();
+        if (error?.name === "AbortError") {
+          reject(new Error("File save was cancelled."));
+          return;
+        }
+        openBlobInBrowser(blob, fileName, true);
+        resolve();
+      }
+    };
+    actions.appendChild(cancelButton);
+    actions.appendChild(saveButton);
+    dialog.appendChild(title);
+    dialog.appendChild(body);
+    dialog.appendChild(actions);
+    overlay.appendChild(dialog);
+    document.body.appendChild(overlay);
   });
-  pdfDoc.addImage(image, "PNG", 0, 0, size.width, size.height);
-  pdfDoc.save(filename);
-  resolve(image);
+}, "promptAppleMobileSave");
+var downloadBlobInBrowser = /* @__PURE__ */ __name(async (blob, fileName) => {
+  if (isNode5) return;
+  if (isAppleMobileDevice()) {
+    await promptAppleMobileSave(blob, fileName);
+    return;
+  }
+  openBlobInBrowser(blob, fileName);
+}, "downloadBlobInBrowser");
+var downloadDataUrlInBrowser = /* @__PURE__ */ __name(async (dataUrl, fileName) => {
+  await downloadBlobInBrowser(dataUrlToBlob(dataUrl), fileName);
+}, "downloadDataUrlInBrowser");
+var pngToPdf = /* @__PURE__ */ __name(async (image, filename, resolve, reject, skipBrowserDownload) => {
+  try {
+    const size = await getImageDimension(image);
+    const pdfDoc = new import_jspdf.default({
+      orientation: size.width >= size.height ? "landscape" : "portrait",
+      unit: "pt",
+      format: [size.width, size.height],
+      compress: true
+    });
+    pdfDoc.addImage(image, getPdfImageFormat(image), 0, 0, size.width, size.height, void 0, "FAST");
+    const pdfDataUrl = pdfDoc.output("datauristring");
+    if (!isNode5 && !skipBrowserDownload) {
+      const pdfBlob = new Blob([pdfDoc.output("arraybuffer")], { type: "application/pdf" });
+      await downloadBlobInBrowser(pdfBlob, filename);
+    }
+    resolve(pdfDataUrl);
+  } catch (error) {
+    reject(error);
+  }
 }, "pngToPdf");
 var isNode5 = typeof window === "undefined";
 var getNodeImageDimensionAttr = /* @__PURE__ */ __name((img, attr) => {
@@ -2394,6 +2552,7 @@ var getNodeImageDimensionAttr = /* @__PURE__ */ __name((img, attr) => {
 async function processBase64Image(base64Image, side, format = "png") {
   return new Promise((resolve, reject) => {
     const img = new Image();
+    if (!isNode5) img.crossOrigin = "anonymous";
     img.onload = () => {
       const canvas = getCanvas(img.width, img.height);
       const ctx = canvas.getContext("2d");
@@ -2449,16 +2608,13 @@ var downloadSvgAsImage = /* @__PURE__ */ __name((svgString, format = "png", file
         let canvasHeight = img.height * scaleFactor;
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
-        const downloadImage = /* @__PURE__ */ __name((dataUrl2, sideLabel) => {
+        const downloadImage = /* @__PURE__ */ __name(async (dataUrl2, sideLabel) => {
           const fileFullname = sideLabel ? `${sideLabel.toUpperCase()}_${fileName}.${format}` : `${fileName}.${format}`;
           if (format === "pdf") {
-            pngToPdf(dataUrl2, fileFullname, resolve, reject);
+            await pngToPdf(dataUrl2, fileFullname, resolve, reject, skipBrowserDownload);
           } else {
             if (!isNode5 && !skipBrowserDownload) {
-              const downloadLink = document.createElement("a");
-              downloadLink.href = dataUrl2;
-              downloadLink.download = fileFullname;
-              downloadLink.click();
+              await downloadDataUrlInBrowser(dataUrl2, fileFullname);
             }
             resolve(dataUrl2);
           }
@@ -2506,7 +2662,7 @@ var downloadSvgAsImage = /* @__PURE__ */ __name((svgString, format = "png", file
               var dataUrl = canvas.toDataURL(`image/png`);
               dataUrl = await processBase64Image(dataUrl, downloadSide, format);
             }
-            downloadImage(dataUrl, downloadSide);
+            await downloadImage(dataUrl, downloadSide);
           } else {
             reject(new Error("Unsupported Browser. Please try to download from another browser."));
           }

package/dist/main.mjs

@@ -328,6 +328,7 @@ __name(reduceBase64Image, "reduceBase64Image");
 var loadImageWithTimeout = /* @__PURE__ */ __name((src, timeout = 5e3) => {
   return new Promise((resolve, reject) => {
     const img = new Image();
+    if (!isNode4 && !src.startsWith("data:")) img.crossOrigin = "anonymous";
     const timer = setTimeout(() => {
       reject(new Error(`Image load timeout: ${src}`));
     }, timeout);
@@ -2269,16 +2270,173 @@ __name(createFontThumbnail, "createFontThumbnail");
 
 // src/getSvg.ts
 import jsPDF from "jspdf";
-var pngToPdf = /* @__PURE__ */ __name(async (image, filename, resolve, reject) => {
-  const size = await getImageDimension(image);
-  const pdfDoc = new jsPDF({
-    unit: "px",
-    format: [size.width, size.height]
-    // Set PDF dimensions to match the image
+var getPdfImageFormat = /* @__PURE__ */ __name((image) => {
+  return image.startsWith("data:image/jpeg") || image.startsWith("data:image/jpg") ? "JPEG" : "PNG";
+}, "getPdfImageFormat");
+var dataUrlToBlob = /* @__PURE__ */ __name((dataUrl) => {
+  const [header, data] = dataUrl.split(",");
+  const mimeType = header.match(/:(.*?);/)?.[1] || "application/octet-stream";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new Blob([bytes], { type: mimeType });
+}, "dataUrlToBlob");
+var isAppleMobileDevice = /* @__PURE__ */ __name(() => {
+  if (isNode5 || typeof navigator === "undefined") return false;
+  const userAgent = navigator.userAgent || "";
+  const platform = navigator.platform || "";
+  const maxTouchPoints = navigator.maxTouchPoints || 0;
+  return /iPad|iPhone|iPod/i.test(userAgent) || platform === "MacIntel" && maxTouchPoints > 1;
+}, "isAppleMobileDevice");
+var openBlobInBrowser = /* @__PURE__ */ __name((blob, fileName, openInNewTab = false) => {
+  const objectUrl = URL.createObjectURL(blob);
+  const downloadLink = document.createElement("a");
+  downloadLink.href = objectUrl;
+  downloadLink.rel = "noopener";
+  downloadLink.style.display = "none";
+  if (openInNewTab) {
+    downloadLink.target = "_blank";
+  } else {
+    downloadLink.download = fileName;
+  }
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 3e4);
+}, "openBlobInBrowser");
+var shareBlob = /* @__PURE__ */ __name(async (blob, fileName) => {
+  const shareApi = typeof navigator !== "undefined" ? navigator.share : null;
+  const canShare = typeof navigator !== "undefined" ? navigator.canShare : null;
+  if (!shareApi || typeof File === "undefined") return false;
+  const file = new File([blob], fileName, { type: blob.type || "application/octet-stream" });
+  const shareData = { files: [file], title: fileName };
+  if (canShare && !canShare.call(navigator, shareData)) return false;
+  await shareApi.call(navigator, shareData);
+  return true;
+}, "shareBlob");
+var promptAppleMobileSave = /* @__PURE__ */ __name((blob, fileName) => {
+  return new Promise((resolve, reject) => {
+    const overlay = document.createElement("div");
+    overlay.setAttribute("role", "dialog");
+    overlay.setAttribute("aria-modal", "true");
+    overlay.style.cssText = [
+      "position:fixed",
+      "inset:0",
+      "z-index:2147483647",
+      "display:flex",
+      "align-items:center",
+      "justify-content:center",
+      "padding:24px",
+      "background:rgba(15,23,42,0.58)",
+      "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
+    ].join(";");
+    const dialog = document.createElement("div");
+    dialog.style.cssText = [
+      "width:min(360px,100%)",
+      "border-radius:12px",
+      "background:#fff",
+      "box-shadow:0 20px 60px rgba(15,23,42,0.3)",
+      "padding:18px",
+      "color:#111827",
+      "text-align:left"
+    ].join(";");
+    const title = document.createElement("div");
+    title.textContent = "File ready";
+    title.style.cssText = "font-size:17px;font-weight:700;margin-bottom:8px;";
+    const body = document.createElement("div");
+    body.textContent = "Choose where to save this file.";
+    body.style.cssText = "font-size:14px;line-height:1.45;color:#4b5563;margin-bottom:16px;";
+    const actions = document.createElement("div");
+    actions.style.cssText = "display:flex;gap:10px;justify-content:flex-end;";
+    const cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.textContent = "Cancel";
+    cancelButton.style.cssText = [
+      "border:0",
+      "border-radius:8px",
+      "padding:10px 14px",
+      "background:#f3f4f6",
+      "color:#111827",
+      "font-size:14px",
+      "font-weight:600"
+    ].join(";");
+    const saveButton = document.createElement("button");
+    saveButton.type = "button";
+    saveButton.textContent = "Save File";
+    saveButton.style.cssText = [
+      "border:0",
+      "border-radius:8px",
+      "padding:10px 14px",
+      "background:#2563eb",
+      "color:#fff",
+      "font-size:14px",
+      "font-weight:700"
+    ].join(";");
+    const cleanup = /* @__PURE__ */ __name(() => {
+      document.body.removeChild(overlay);
+    }, "cleanup");
+    cancelButton.onclick = () => {
+      cleanup();
+      reject(new Error("File save was cancelled."));
+    };
+    saveButton.onclick = async () => {
+      saveButton.setAttribute("disabled", "true");
+      try {
+        const shared = await shareBlob(blob, fileName);
+        if (!shared) openBlobInBrowser(blob, fileName, true);
+        cleanup();
+        resolve();
+      } catch (error) {
+        cleanup();
+        if (error?.name === "AbortError") {
+          reject(new Error("File save was cancelled."));
+          return;
+        }
+        openBlobInBrowser(blob, fileName, true);
+        resolve();
+      }
+    };
+    actions.appendChild(cancelButton);
+    actions.appendChild(saveButton);
+    dialog.appendChild(title);
+    dialog.appendChild(body);
+    dialog.appendChild(actions);
+    overlay.appendChild(dialog);
+    document.body.appendChild(overlay);
   });
-  pdfDoc.addImage(image, "PNG", 0, 0, size.width, size.height);
-  pdfDoc.save(filename);
-  resolve(image);
+}, "promptAppleMobileSave");
+var downloadBlobInBrowser = /* @__PURE__ */ __name(async (blob, fileName) => {
+  if (isNode5) return;
+  if (isAppleMobileDevice()) {
+    await promptAppleMobileSave(blob, fileName);
+    return;
+  }
+  openBlobInBrowser(blob, fileName);
+}, "downloadBlobInBrowser");
+var downloadDataUrlInBrowser = /* @__PURE__ */ __name(async (dataUrl, fileName) => {
+  await downloadBlobInBrowser(dataUrlToBlob(dataUrl), fileName);
+}, "downloadDataUrlInBrowser");
+var pngToPdf = /* @__PURE__ */ __name(async (image, filename, resolve, reject, skipBrowserDownload) => {
+  try {
+    const size = await getImageDimension(image);
+    const pdfDoc = new jsPDF({
+      orientation: size.width >= size.height ? "landscape" : "portrait",
+      unit: "pt",
+      format: [size.width, size.height],
+      compress: true
+    });
+    pdfDoc.addImage(image, getPdfImageFormat(image), 0, 0, size.width, size.height, void 0, "FAST");
+    const pdfDataUrl = pdfDoc.output("datauristring");
+    if (!isNode5 && !skipBrowserDownload) {
+      const pdfBlob = new Blob([pdfDoc.output("arraybuffer")], { type: "application/pdf" });
+      await downloadBlobInBrowser(pdfBlob, filename);
+    }
+    resolve(pdfDataUrl);
+  } catch (error) {
+    reject(error);
+  }
 }, "pngToPdf");
 var isNode5 = typeof window === "undefined";
 var getNodeImageDimensionAttr = /* @__PURE__ */ __name((img, attr) => {
@@ -2291,6 +2449,7 @@ var getNodeImageDimensionAttr = /* @__PURE__ */ __name((img, attr) => {
 async function processBase64Image(base64Image, side, format = "png") {
   return new Promise((resolve, reject) => {
     const img = new Image();
+    if (!isNode5) img.crossOrigin = "anonymous";
     img.onload = () => {
       const canvas = getCanvas(img.width, img.height);
       const ctx = canvas.getContext("2d");
@@ -2346,16 +2505,13 @@ var downloadSvgAsImage = /* @__PURE__ */ __name((svgString, format = "png", file
         let canvasHeight = img.height * scaleFactor;
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
-        const downloadImage = /* @__PURE__ */ __name((dataUrl2, sideLabel) => {
+        const downloadImage = /* @__PURE__ */ __name(async (dataUrl2, sideLabel) => {
           const fileFullname = sideLabel ? `${sideLabel.toUpperCase()}_${fileName}.${format}` : `${fileName}.${format}`;
           if (format === "pdf") {
-            pngToPdf(dataUrl2, fileFullname, resolve, reject);
+            await pngToPdf(dataUrl2, fileFullname, resolve, reject, skipBrowserDownload);
           } else {
             if (!isNode5 && !skipBrowserDownload) {
-              const downloadLink = document.createElement("a");
-              downloadLink.href = dataUrl2;
-              downloadLink.download = fileFullname;
-              downloadLink.click();
+              await downloadDataUrlInBrowser(dataUrl2, fileFullname);
             }
             resolve(dataUrl2);
           }
@@ -2403,7 +2559,7 @@ var downloadSvgAsImage = /* @__PURE__ */ __name((svgString, format = "png", file
               var dataUrl = canvas.toDataURL(`image/png`);
               dataUrl = await processBase64Image(dataUrl, downloadSide, format);
             }
-            downloadImage(dataUrl, downloadSide);
+            await downloadImage(dataUrl, downloadSide);
           } else {
             reject(new Error("Unsupported Browser. Please try to download from another browser."));
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontbacked-svg",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "frontbacked svg renderer",
   "types": "dist/main.d.ts",
   "type": "module",

package/src/base64Image.ts

@@ -1,101 +1,101 @@
-import { ImageWrapper } from "./polyfills/Image.ts";
-
-const isNode = typeof window === 'undefined';
-  
-  /**
- * Gets the dimensions (width and height) of an image from a base64 string.
- * 
- * @param base64Image - The base64 string of the image.
- * @returns A Promise that resolves to an object containing the base64 string, width, and height of the image.
- */
-  export function getImageDimensions(base64Image: string): Promise<{ width: number, height: number }> {
-    return new Promise<{ width: number, height: number }>((resolve, reject) => {
-      const img = new Image();
-
-      img.onload = () => {
-        resolve({
-          width: img.width,
-          height: img.height,
-        });
-      };
-
-      img.onerror = (error) => {
-        reject(new Error(`Failed to load image: ${error}`));
-      };
-
-      img.src = base64Image;
-    });
-  }
-
-/**
- * Resizes a base64 image string to the given width while maintaining the aspect ratio.
- * 
- * @param base64Image - The base64 string of the image.
- * @param targetWidth - The desired width for the resized image.
- * @returns A Promise that resolves to the resized image as a base64 string.
- */
-export async function resizeBase64Image(base64Image: string, targetWidth: number): Promise<string> {
-  return new Promise<string>((resolve, reject) => {
-    const img = new Image();
-
-    // Set up the onload handler to resize the image once it's loaded
-    img.onload = () => {
-      const aspectRatio = img.width / img.height;
-      const targetHeight = targetWidth / aspectRatio;
-
-      // Create a canvas and draw the resized image on it
-      const canvas = document.createElement('canvas');
-      canvas.width = targetWidth;
-      canvas.height = targetHeight;
-      const ctx = canvas.getContext('2d') as any;
-
-      if (ctx) {
-        const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
-        ctx.drawImage(realImage, 0, 0, targetWidth, targetHeight);
-
-        // Convert the canvas to a base64 string and resolve the promise
-        const resizedBase64Image = canvas.toDataURL('image/png');
-        resolve(resizedBase64Image);
-      } else {
-        reject(new Error('Failed to get canvas context'));
-      }
-    };
-
-    // Set up the onerror handler to reject the promise if the image fails to load
-    img.onerror = (error) => {
-      reject(new Error(`Failed to load image: ${error}`));
-    };
-
-    // Set the src attribute to the base64 image string to start loading the image
-    img.src = base64Image;
-  });
-}
-
-export function base64UrlToFile(base64Url: string, fileName?: string, fileType?: string): File {
-  // Extract base64 data and the MIME type from the header
-  const [header, base64Data] = base64Url.split(',');
-
-  // Infer the file type from the header if not provided
-  fileType = fileType || header.match(/:(.*?);/)?.[1];
-
-  // If the fileName is not provided, generate a random one with an appropriate extension
-  if (!fileName) {
-    const extension = fileType?.split('/')[1] || 'bin'; // Default to 'bin' if no type is inferred
-    fileName = `file_${Date.now()}.${extension}`;
-  }
-
-  // Decode the base64 string to a binary string
-  const binaryString = window.atob(base64Data);
-  const len = binaryString.length;
-  const bytes = new Uint8Array(len);
-
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-
-  // Create a Blob from the decoded data
-  const blob = new Blob([bytes], { type: fileType });
-
-  // Create and return a File from the Blob
-  return new File([blob], fileName, { type: fileType });
+import { ImageWrapper } from "./polyfills/Image.ts";
+
+const isNode = typeof window === 'undefined';
+  
+  /**
+ * Gets the dimensions (width and height) of an image from a base64 string.
+ * 
+ * @param base64Image - The base64 string of the image.
+ * @returns A Promise that resolves to an object containing the base64 string, width, and height of the image.
+ */
+  export function getImageDimensions(base64Image: string): Promise<{ width: number, height: number }> {
+    return new Promise<{ width: number, height: number }>((resolve, reject) => {
+      const img = new Image();
+
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height,
+        });
+      };
+
+      img.onerror = (error) => {
+        reject(new Error(`Failed to load image: ${error}`));
+      };
+
+      img.src = base64Image;
+    });
+  }
+
+/**
+ * Resizes a base64 image string to the given width while maintaining the aspect ratio.
+ * 
+ * @param base64Image - The base64 string of the image.
+ * @param targetWidth - The desired width for the resized image.
+ * @returns A Promise that resolves to the resized image as a base64 string.
+ */
+export async function resizeBase64Image(base64Image: string, targetWidth: number): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const img = new Image();
+
+    // Set up the onload handler to resize the image once it's loaded
+    img.onload = () => {
+      const aspectRatio = img.width / img.height;
+      const targetHeight = targetWidth / aspectRatio;
+
+      // Create a canvas and draw the resized image on it
+      const canvas = document.createElement('canvas');
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+      const ctx = canvas.getContext('2d') as any;
+
+      if (ctx) {
+        const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+        ctx.drawImage(realImage, 0, 0, targetWidth, targetHeight);
+
+        // Convert the canvas to a base64 string and resolve the promise
+        const resizedBase64Image = canvas.toDataURL('image/png');
+        resolve(resizedBase64Image);
+      } else {
+        reject(new Error('Failed to get canvas context'));
+      }
+    };
+
+    // Set up the onerror handler to reject the promise if the image fails to load
+    img.onerror = (error) => {
+      reject(new Error(`Failed to load image: ${error}`));
+    };
+
+    // Set the src attribute to the base64 image string to start loading the image
+    img.src = base64Image;
+  });
+}
+
+export function base64UrlToFile(base64Url: string, fileName?: string, fileType?: string): File {
+  // Extract base64 data and the MIME type from the header
+  const [header, base64Data] = base64Url.split(',');
+
+  // Infer the file type from the header if not provided
+  fileType = fileType || header.match(/:(.*?);/)?.[1];
+
+  // If the fileName is not provided, generate a random one with an appropriate extension
+  if (!fileName) {
+    const extension = fileType?.split('/')[1] || 'bin'; // Default to 'bin' if no type is inferred
+    fileName = `file_${Date.now()}.${extension}`;
+  }
+
+  // Decode the base64 string to a binary string
+  const binaryString = window.atob(base64Data);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  // Create a Blob from the decoded data
+  const blob = new Blob([bytes], { type: fileType });
+
+  // Create and return a File from the Blob
+  return new File([blob], fileName, { type: fileType });
 }