frontbacked-svg 5.0.0 → 5.0.2

package/src/getSvg.ts

@@ -1,284 +1,476 @@
-import jsPDF from "jspdf"
-import { getCanvas, getImageDimension, loadImageWithTimeout } from "./imageHelper.ts"
-import { ImageWrapper } from "./polyfills/Image.ts";
-
-const pngToPdf = async (image: string, filename: string, resolve: (result: string) => void, reject: (result: Error) => void) => {
-  // Create a new jsPDF instance
-  const size = await getImageDimension(image)
-  const pdfDoc = new jsPDF({
-    unit: 'px',
-    format: [size.width, size.height], // Set PDF dimensions to match the image
-  });
-
-  // Add the image to the PDF
-  pdfDoc.addImage(image, 'PNG', 0, 0, size.width, size.height);
-
-  pdfDoc.save(filename);
-  resolve(image)
-}
-
-export function entitiesToCharacters(text: string) {
-  // Define a mapping of HTML entities to their corresponding characters
-  const entityToCharMap: { [x: string]: string } = {
-      "'": "'",
-      "&": "&",
-      "&lt;": "<",
-      "&gt;": ">",
-      "&quot;": '"',
-      "&#39;": "'",
-      "&#039;": "'",
-      "&#x22;": '"',
-      "&#x27;": "'",
-      "&#60;": "<",
-      "&#62;": ">",
-      "&#x3C;": "<",
-      "&#x3E;": ">",
-      "&#x2F;": "/",
-      "&#x5C;": "\\",
-      "&#x60;": "`",
-      "&#x25;": "%",
-      "&#x3A;": ":",
-      "&#x3B;": ";",
-      "&#x5F;": "_",
-      "&#x40;": "@"
-  };
-
-  // Use a regular expression to match and replace all entities
-  return text.replace(/&[a-zA-Z0-9#]+;/g, (match) => {
-      return entityToCharMap[match] || match; // Replace with corresponding character or keep unchanged
-  });
-}
-
-function charactersToEntities(text: string) {
-  // Define a mapping of characters to their corresponding HTML entities
-  const charToEntityMap: { [x: string]: string } = {
-      "&": "&amp;",
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;",
-      "`": "&#x60;",
-      "/": "&#x2F;",
-      "\\": "&#x5C;",
-      "%": "&#x25;",
-      ":": "&#x3A;",
-      ";": "&#x3B;",
-      "_": "&#x5F;",
-      "@": "&#x40;"
-  };
-
-  // Use a regular expression to match and replace all characters
-  return text.replace(/[&<>"'`\/%:;_@]/g, (match) => {
-      return charToEntityMap[match] || match; // Replace with corresponding entity or keep unchanged
-  });
-}
-
-export const escapeHtmlEntities = (input?: string | null) => {
-  if(!input) return ""
-  return charactersToEntities(input)/*
-  const entities: {[x: string]: string} = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#39;',
-    '/': '&#47;', // Some scenarios might require this, but usually, it’s not necessary for XML contexts
-  };
-
-  return `${input}`.replace(/[&<>"'\/]/g, function(match) {
-    return entities[match];
-  });*/
-}
-
-const isNode = typeof window === 'undefined';
-
-const getNodeImageDimensionAttr = (img: any, attr: string) => {
-  try {
-    return parseFloat(img.getAttribute(attr) || "0")
-
-  } catch(e) {
-    return 0
-  }
-}
-
-async function processBase64Image(base64Image: string, side?: "front" | "back" | "front_hr" | "back_hr", format: 'png' | 'jpeg' | 'pdf' | string = 'png'): Promise<string> {
-  return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-          const canvas = getCanvas(img.width, img.height);
-          const ctx = canvas.getContext("2d") as any;
-          if (!ctx) return reject("Canvas context not supported");
-          
-          let sx = 0, sy = 0, sw = img.width, sh = img.height;
-
-          switch (side) {
-              case "front":
-                  sw = img.width / 2; // Left half
-                  break;
-              case "back":
-                  sx = img.width / 2; // Right half
-                  sw = img.width / 2;
-                  break;
-              case "front_hr":
-                  sh = img.height / 2; // Top half
-                  break;
-              case "back_hr":
-                  sy = img.height / 2; // Bottom half
-                  sh = img.height / 2;
-                  break;
-              default:
-                  return resolve(base64Image); // Return original if side is undefined
-          }
-
-          canvas.width = sw;
-          canvas.height = sh;
-          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
-          ctx.drawImage(realImage, sx, sy, sw, sh, 0, 0, sw, sh);
-          resolve(canvas.toDataURL(`image/${format === 'pdf' ? 'png' : format}`));
-      };
-      img.onerror = () => reject("Image loading error");
-      img.src = base64Image;
-  });
-}
-
-export const downloadSvgAsImage = (
-  svgString: string,
-  format: 'png' | 'jpeg' | 'pdf' | string = 'png',
-  fileName: string = 'downloadedImage',
-  downloadSide?: 'front' | 'back' | 'front_hr' | 'back_hr',
-  skipBrowserDownload?: boolean | null
-): Promise<string> => {
-  return new Promise((resolve, reject) => {
-    try {
-      let svgUrl: string;
-
-      if (isNode) {
-        // Node.js: Convert SVG to base64 using Buffer
-        const buffer = Buffer.from(svgString, 'utf-8');
-        svgUrl = `data:image/svg+xml;base64,${buffer.toString('base64')}`;
-        
-      } else {
-        const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
-        svgUrl = URL.createObjectURL(svgBlob);
-      }
-
-      //console.error("downloadSvgAsImage.call", svgUrl? svgUrl.substring(0, 30) : "no svg url")
-
-      const img = new Image();
-      
-      img.onload = async function () {
-        //console.error("downloadSvgAsImage.onload", img.width, img.height)
-        // Limit canvas size to avoid crashes
-        const MAX_DIMENSION = 4096;
-        const scaleFactor = Math.min(1, MAX_DIMENSION / Math.max(img.width, img.height));
-
-        // Create canvas
-        const canvas = getCanvas(img.width * scaleFactor, img.height * scaleFactor);
-        //const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d') as any;
-
-        let canvasWidth = img.width * scaleFactor;
-        let canvasHeight = img.height * scaleFactor;
-
-        canvas.width = canvasWidth;
-        canvas.height = canvasHeight;
-
-        const downloadImage = (dataUrl: string, sideLabel?: string) => {
-          const fileFullname = sideLabel
-            ? `${sideLabel.toUpperCase()}_${fileName}.${format}`
-            : `${fileName}.${format}`;
-
-          if (format === 'pdf') {
-            pngToPdf(dataUrl, fileFullname, resolve, reject);
-          } else {
-            if(!isNode && !skipBrowserDownload) {
-              const downloadLink = document.createElement('a');
-              downloadLink.href = dataUrl;
-              downloadLink.download = fileFullname;
-              downloadLink.click();
-            }
-            resolve(dataUrl);
-          }
-        };
-
-        const parser = new DOMParser();//isNode? new DOMParserWrapper() : new DOMParser();
-        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
-        const images = svgDoc.getElementsByTagName('image');
-        //console.log("svgDoc.images:", images, svgDoc)
-        //console.error("downloadSvgAsImage.parser", images, images?.length)
-
-        try {
-
-          if (context) {
-            //context.clearRect(0, 0, canvas.width, canvas.height);
-            
-            if (images.length > 0) {
-              // Preload all images with timeout
-              await Promise.all(
-                Array.from(images).map((image: any) => {
-                  return new Promise<void>(async (resolve) => {
-                    const imageUrl = !isNode? image.getAttributeNS('http://www.w3.org/1999/xlink', 'href') : image.getAttribute("xlink:href") || image.getAttribute("href") || "";
-                    //console.error("downloadSvgAsImage.images.imageUrl:", imageUrl)
-                    if (!imageUrl) return resolve(); // Skip if no image URL
-
-                    try {
-                      const imageImg = await loadImageWithTimeout(imageUrl)
-                      const x = image?.x?.baseVal?.value || getNodeImageDimensionAttr(image, "x") || 0;
-                      const y = image?.y?.baseVal?.value || getNodeImageDimensionAttr(image, "y") || 0;
-                      const width = Math.min(
-                        image?.width?.baseVal?.value || getNodeImageDimensionAttr(image, "width") || canvas.width, 
-                        canvas.width
-                      );
-                      const height = Math.min(
-                        image?.height?.baseVal?.value || getNodeImageDimensionAttr(image, "height") || canvas.height, 
-                        canvas.height
-                      );
-                      context?.drawImage(imageImg, x, y, width, height);
-                      //console.error("downloadSvgAsImage.loadImageWithTimeout", isNode, imageImg, x, y, width, height)
-                      try {
-                        //console.error("downloadSvgAsImage.image.stringify", JSON.stringify(image))
-
-                      } catch(e) {}
-                      resolve();
-
-                    } catch(err: any) {
-                      //console.error("downloadSvgAsImage.loadImageWithTimeout.error", err.message); // Log the error but continue
-                      resolve();
-                    }
-                  });
-                })
-              );
-            }
-            
-            const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
-
-            context.drawImage(realImage, 0, 0, canvas.width, canvas.height);
-
-            // Convert canvas to Data URL and download
-            if(!downloadSide) {
-              var dataUrl = canvas.toDataURL(`image/${format === 'pdf' ? 'png' : format}`);
-
-            } else {
-              var dataUrl = canvas.toDataURL(`image/png`);
-              dataUrl = await processBase64Image(dataUrl, downloadSide, format)
-            }
-            downloadImage(dataUrl, downloadSide);
-          } else {
-            reject(new Error('Unsupported Browser. Please try to download from another browser.'));
-          }
-        } catch (err) {
-          reject(err);
-        }
-      };
-
-      img.onerror = function () {
-        reject(new Error('Error loading the SVG.'));
-      };
-
-      img.src = svgUrl;
-    } catch(error: any) {
-      //console.error("downloadSvgAsImage.call.catch", error)
-      reject(error)
-    }
-  });
-};
+import jsPDF from "jspdf"
+import { getCanvas, getImageDimension, loadImageWithTimeout } from "./imageHelper.ts"
+import { ImageWrapper } from "./polyfills/Image.ts";
+
+const getPdfImageFormat = (image: string): "PNG" | "JPEG" => {
+  return image.startsWith("data:image/jpeg") || image.startsWith("data:image/jpg") ? "JPEG" : "PNG";
+}
+
+const dataUrlToBlob = (dataUrl: string): Blob => {
+  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 });
+}
+
+const isAppleMobileDevice = (): boolean => {
+  if (isNode || 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);
+}
+
+const openBlobInBrowser = (blob: Blob, fileName: string, openInNewTab = false): void => {
+  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), 30000);
+}
+
+const shareBlob = async (blob: Blob, fileName: string): Promise<boolean> => {
+  const shareApi = typeof navigator !== "undefined" ? (navigator as any).share : null;
+  const canShare = typeof navigator !== "undefined" ? (navigator as any).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;
+}
+
+const promptAppleMobileSave = (blob: Blob, fileName: string): Promise<void> => {
+  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 = () => {
+      document.body.removeChild(overlay);
+    };
+
+    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: any) {
+        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);
+  });
+}
+
+const downloadBlobInBrowser = async (blob: Blob, fileName: string): Promise<void> => {
+  if (isNode) return;
+
+  if (isAppleMobileDevice()) {
+    await promptAppleMobileSave(blob, fileName);
+    return;
+  }
+
+  openBlobInBrowser(blob, fileName);
+}
+
+const downloadDataUrlInBrowser = async (dataUrl: string, fileName: string): Promise<void> => {
+  await downloadBlobInBrowser(dataUrlToBlob(dataUrl), fileName);
+}
+
+const pngToPdf = async (
+  image: string,
+  filename: string,
+  resolve: (result: string) => void,
+  reject: (result: Error) => void,
+  skipBrowserDownload?: boolean | null
+) => {
+  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, undefined, "FAST");
+
+    const pdfDataUrl = pdfDoc.output("datauristring");
+    if (!isNode && !skipBrowserDownload) {
+      const pdfBlob = new Blob([pdfDoc.output("arraybuffer")], { type: "application/pdf" });
+      await downloadBlobInBrowser(pdfBlob, filename);
+    }
+
+    resolve(pdfDataUrl)
+  } catch (error: any) {
+    reject(error)
+  }
+}
+
+export function entitiesToCharacters(text: string) {
+  // Define a mapping of HTML entities to their corresponding characters
+  const entityToCharMap: { [x: string]: string } = {
+      "&apos;": "'",
+      "&amp;": "&",
+      "&lt;": "<",
+      "&gt;": ">",
+      "&quot;": '"',
+      "&#39;": "'",
+      "&#039;": "'",
+      "&#x22;": '"',
+      "&#x27;": "'",
+      "&#60;": "<",
+      "&#62;": ">",
+      "&#x3C;": "<",
+      "&#x3E;": ">",
+      "&#x2F;": "/",
+      "&#x5C;": "\\",
+      "&#x60;": "`",
+      "&#x25;": "%",
+      "&#x3A;": ":",
+      "&#x3B;": ";",
+      "&#x5F;": "_",
+      "&#x40;": "@"
+  };
+
+  // Use a regular expression to match and replace all entities
+  return text.replace(/&[a-zA-Z0-9#]+;/g, (match) => {
+      return entityToCharMap[match] || match; // Replace with corresponding character or keep unchanged
+  });
+}
+
+function charactersToEntities(text: string) {
+  // Define a mapping of characters to their corresponding HTML entities
+  const charToEntityMap: { [x: string]: string } = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+      "`": "&#x60;",
+      "/": "&#x2F;",
+      "\\": "&#x5C;",
+      "%": "&#x25;",
+      ":": "&#x3A;",
+      ";": "&#x3B;",
+      "_": "&#x5F;",
+      "@": "&#x40;"
+  };
+
+  // Use a regular expression to match and replace all characters
+  return text.replace(/[&<>"'`\/%:;_@]/g, (match) => {
+      return charToEntityMap[match] || match; // Replace with corresponding entity or keep unchanged
+  });
+}
+
+export const escapeHtmlEntities = (input?: string | null) => {
+  if(!input) return ""
+  return charactersToEntities(input)/*
+  const entities: {[x: string]: string} = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#47;', // Some scenarios might require this, but usually, it’s not necessary for XML contexts
+  };
+
+  return `${input}`.replace(/[&<>"'\/]/g, function(match) {
+    return entities[match];
+  });*/
+}
+
+const isNode = typeof window === 'undefined';
+
+const getNodeImageDimensionAttr = (img: any, attr: string) => {
+  try {
+    return parseFloat(img.getAttribute(attr) || "0")
+
+  } catch(e) {
+    return 0
+  }
+}
+
+async function processBase64Image(base64Image: string, side?: "front" | "back" | "front_hr" | "back_hr", format: 'png' | 'jpeg' | 'pdf' | string = 'png'): Promise<string> {
+  return new Promise((resolve, reject) => {
+      const img = new Image();
+      if (!isNode) img.crossOrigin = "anonymous";
+      img.onload = () => {
+          const canvas = getCanvas(img.width, img.height);
+          const ctx = canvas.getContext("2d") as any;
+          if (!ctx) return reject("Canvas context not supported");
+          
+          let sx = 0, sy = 0, sw = img.width, sh = img.height;
+
+          switch (side) {
+              case "front":
+                  sw = img.width / 2; // Left half
+                  break;
+              case "back":
+                  sx = img.width / 2; // Right half
+                  sw = img.width / 2;
+                  break;
+              case "front_hr":
+                  sh = img.height / 2; // Top half
+                  break;
+              case "back_hr":
+                  sy = img.height / 2; // Bottom half
+                  sh = img.height / 2;
+                  break;
+              default:
+                  return resolve(base64Image); // Return original if side is undefined
+          }
+
+          canvas.width = sw;
+          canvas.height = sh;
+          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+          ctx.drawImage(realImage, sx, sy, sw, sh, 0, 0, sw, sh);
+          resolve(canvas.toDataURL(`image/${format === 'pdf' ? 'png' : format}`));
+      };
+      img.onerror = () => reject("Image loading error");
+      img.src = base64Image;
+  });
+}
+
+export const downloadSvgAsImage = (
+  svgString: string,
+  format: 'png' | 'jpeg' | 'pdf' | string = 'png',
+  fileName: string = 'downloadedImage',
+  downloadSide?: 'front' | 'back' | 'front_hr' | 'back_hr',
+  skipBrowserDownload?: boolean | null
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    try {
+      let svgUrl: string;
+
+      if (isNode) {
+        // Node.js: Convert SVG to base64 using Buffer
+        const buffer = Buffer.from(svgString, 'utf-8');
+        svgUrl = `data:image/svg+xml;base64,${buffer.toString('base64')}`;
+        
+      } else {
+        const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
+        svgUrl = URL.createObjectURL(svgBlob);
+      }
+
+      //console.error("downloadSvgAsImage.call", svgUrl? svgUrl.substring(0, 30) : "no svg url")
+
+      const img = new Image();
+      
+      img.onload = async function () {
+        //console.error("downloadSvgAsImage.onload", img.width, img.height)
+        // Limit canvas size to avoid crashes
+        const MAX_DIMENSION = 4096;
+        const scaleFactor = Math.min(1, MAX_DIMENSION / Math.max(img.width, img.height));
+
+        // Create canvas
+        const canvas = getCanvas(img.width * scaleFactor, img.height * scaleFactor);
+        //const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d') as any;
+
+        let canvasWidth = img.width * scaleFactor;
+        let canvasHeight = img.height * scaleFactor;
+
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+
+        const downloadImage = async (dataUrl: string, sideLabel?: string) => {
+          const fileFullname = sideLabel
+            ? `${sideLabel.toUpperCase()}_${fileName}.${format}`
+            : `${fileName}.${format}`;
+
+          if (format === 'pdf') {
+            await pngToPdf(dataUrl, fileFullname, resolve, reject, skipBrowserDownload);
+          } else {
+            if(!isNode && !skipBrowserDownload) {
+              await downloadDataUrlInBrowser(dataUrl, fileFullname);
+            }
+            resolve(dataUrl);
+          }
+        };
+
+        const parser = new DOMParser();//isNode? new DOMParserWrapper() : new DOMParser();
+        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+        const images = svgDoc.getElementsByTagName('image');
+        //console.log("svgDoc.images:", images, svgDoc)
+        //console.error("downloadSvgAsImage.parser", images, images?.length)
+
+        try {
+
+          if (context) {
+            //context.clearRect(0, 0, canvas.width, canvas.height);
+            
+            if (images.length > 0) {
+              // Preload all images with timeout
+              await Promise.all(
+                Array.from(images).map((image: any) => {
+                  return new Promise<void>(async (resolve) => {
+                    const imageUrl = !isNode? image.getAttributeNS('http://www.w3.org/1999/xlink', 'href') : image.getAttribute("xlink:href") || image.getAttribute("href") || "";
+                    //console.error("downloadSvgAsImage.images.imageUrl:", imageUrl)
+                    if (!imageUrl) return resolve(); // Skip if no image URL
+
+                    try {
+                      const imageImg = await loadImageWithTimeout(imageUrl)
+                      const x = image?.x?.baseVal?.value || getNodeImageDimensionAttr(image, "x") || 0;
+                      const y = image?.y?.baseVal?.value || getNodeImageDimensionAttr(image, "y") || 0;
+                      const width = Math.min(
+                        image?.width?.baseVal?.value || getNodeImageDimensionAttr(image, "width") || canvas.width, 
+                        canvas.width
+                      );
+                      const height = Math.min(
+                        image?.height?.baseVal?.value || getNodeImageDimensionAttr(image, "height") || canvas.height, 
+                        canvas.height
+                      );
+                      context?.drawImage(imageImg, x, y, width, height);
+                      //console.error("downloadSvgAsImage.loadImageWithTimeout", isNode, imageImg, x, y, width, height)
+                      try {
+                        //console.error("downloadSvgAsImage.image.stringify", JSON.stringify(image))
+
+                      } catch(e) {}
+                      resolve();
+
+                    } catch(err: any) {
+                      //console.error("downloadSvgAsImage.loadImageWithTimeout.error", err.message); // Log the error but continue
+                      resolve();
+                    }
+                  });
+                })
+              );
+            }
+            
+            const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+
+            context.drawImage(realImage, 0, 0, canvas.width, canvas.height);
+
+            // Convert canvas to Data URL and download
+            if(!downloadSide) {
+              var dataUrl = canvas.toDataURL(`image/${format === 'pdf' ? 'png' : format}`);
+
+            } else {
+              var dataUrl = canvas.toDataURL(`image/png`);
+              dataUrl = await processBase64Image(dataUrl, downloadSide, format)
+            }
+            await downloadImage(dataUrl, downloadSide);
+          } else {
+            reject(new Error('Unsupported Browser. Please try to download from another browser.'));
+          }
+        } catch (err) {
+          reject(err);
+        }
+      };
+
+      img.onerror = function () {
+        reject(new Error('Error loading the SVG.'));
+      };
+
+      img.src = svgUrl;
+    } catch(error: any) {
+      //console.error("downloadSvgAsImage.call.catch", error)
+      reject(error)
+    }
+  });
+};