frontbacked-svg 5.0.0

package/src/get-default-fields-value.ts

@@ -0,0 +1,64 @@
+import { Fields, FieldsData } from "./types.ts"
+import { textGenCodeParser } from "./textGenCodeParser.ts"
+import { useDataForRandSeed } from "./utils.ts"
+import { dateToTimestamp } from "./time.ts"
+
+
+const getDefaultFieldsValue = (fieldsData?: FieldsData, fields?: Fields | null, templateId?: string | null, fieldString?: string | null, currentTemplateId?: string | null) => {
+    const newFieldString = fields? JSON.stringify(fields) : undefined
+    let defaultFieldsData
+    let newCurrentTemplateId
+    if(fieldsData && fields && fieldString != newFieldString) {
+        if(templateId) newCurrentTemplateId = templateId
+        const def: FieldsData = {} as FieldsData
+        for(const field of Object.values(fields)) {
+            
+            if(field.type == "checkbox") {
+                def[field.id] = true
+
+            } else if(field.type == "date") {
+                def[field.id] = dateToTimestamp(new Date())
+
+            } else if(field.type == "defgen" && field.code) {
+                if(fieldsData) {
+                    def[field.id] = textGenCodeParser(field.code, fieldsData, useDataForRandSeed)
+                }
+
+            } else if(field.type == "image_select") {
+                if(fieldsData && field?.options) {
+                    def[field.id] = Object.values(field?.options)[0]?.id
+                }
+
+            } else if(field.type == "text_select") {
+                if(fieldsData && field?.selections) {
+                    def[field.id] = Object.values(field?.selections)[0]?.value
+                }
+
+            } else if(!["image_upload", "faceshot", "sign"].includes(field.type) && field.placeholder && typeof field.placeholder === "string" && field.placeholder.length > 0) {
+                def[field.id] = field.placeholder
+            }
+        }
+        
+        if(Object.keys(def).length > 0) {
+            defaultFieldsData = {
+                ...def,
+                is_freemium: true,
+                template_id: templateId || ""
+            }
+        }
+        
+    } else if(currentTemplateId != templateId) {
+        if(templateId) newCurrentTemplateId = templateId
+        defaultFieldsData = {
+            ...(fieldsData || {} as FieldsData),
+            is_freemium: true,
+            template_id: templateId || ""
+        }
+    }
+
+    return {
+        newFieldString, newCurrentTemplateId, defaultFieldsData
+    }
+}
+
+export default getDefaultFieldsValue

package/src/getSvg.ts

@@ -0,0 +1,284 @@
+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)
+    }
+  });
+};

package/src/imageHelper.ts

@@ -0,0 +1,293 @@
+import { ImageWrapper } from './polyfills/Image.ts';
+
+const isNode = typeof window === 'undefined';
+
+export function cropImage(imageUrl: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+      const img = new Image();
+      
+      img.onload = function () {
+          const canvas = getCanvas(img.width, img.height)
+          const ctx = canvas.getContext("2d") as any;
+          if (!ctx) return reject(new Error("Failed to get canvas context"));
+
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+          ctx.drawImage(realImage, 0, 0);
+
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+
+          let minX = canvas.width;
+          let minY = canvas.height;
+          let maxX = 0;
+          let maxY = 0;
+
+          for (let y = 0; y < canvas.height; y++) {
+              for (let x = 0; x < canvas.width; x++) {
+                  const index = (y * canvas.width + x) * 4;
+                  if (data[index + 3] > 0) {
+                      minX = Math.min(minX, x);
+                      minY = Math.min(minY, y);
+                      maxX = Math.max(maxX, x);
+                      maxY = Math.max(maxY, y);
+                  }
+              }
+          }
+
+          const cropWidth = maxX - minX;
+          const cropHeight = maxY - minY;
+          const croppedCanvas = getCanvas(cropWidth, cropHeight);
+          const croppedCtx = croppedCanvas.getContext("2d") as any;
+          if (!croppedCtx) return reject(new Error("Failed to get canvas context"));
+
+          croppedCanvas.width = cropWidth;
+          croppedCanvas.height = cropHeight;
+          croppedCtx.drawImage(canvas, minX, minY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+
+          resolve(croppedCanvas.toDataURL("image/png"));
+      };
+
+      img.onerror = () => reject(new Error('Error loading image'));
+      img.src = imageUrl;
+  });
+}
+
+export function isBlankImage(imageUrl: string): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = function () {
+            const canvas = getCanvas(img.width, img.height);
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext("2d") as any;
+            if (!ctx) return reject(new Error("Failed to get canvas context"));
+            const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+            ctx.drawImage(realImage, 0, 0);
+
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+            resolve(imageData.every((value: any) => value === 0));
+        };
+
+        img.onerror = () => reject(new Error('Error loading image'));
+        img.src = imageUrl;
+    });
+}
+
+export function getImageDimension(imageUrl: string): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve({ width: img.width, height: img.height });
+      img.onerror = () => reject(new Error('Error loading image'));
+      img.src = imageUrl;
+  });
+}
+
+export function imageToStamp(base64Image: string, color: [number, number, number], holePct: number): Promise<string | null> {
+  return new Promise((resolve, reject) => {
+      if (!base64Image) return resolve(null);
+      const img = new Image();
+      img.onload = function () {
+          const canvas = getCanvas(img.width, img.height);
+          const ctx = canvas.getContext("2d") as any;
+          if (!ctx) return reject(new Error("Failed to get canvas context"));
+
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+          ctx.drawImage(realImage, 0, 0);
+
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+
+          const numTransparentPixels = Math.floor((holePct / 100) * (canvas.width * canvas.height));
+
+          for (let i = 0; i < numTransparentPixels; i++) {
+              const x = Math.floor(Math.random() * canvas.width);
+              const y = Math.floor(Math.random() * canvas.height);
+              const index = (y * canvas.width + x) * 4;
+              data[index + 3] = 0;
+          }
+
+          ctx.putImageData(imageData, 0, 0);
+          resolve(canvas.toDataURL("image/png"));
+      };
+
+      img.onerror = () => reject(new Error('Error loading image'));
+      img.src = base64Image;
+  });
+}
+
+export function getImageColor(base64ImageUrl: string, useDominantColor = true): Promise<[number, number, number] | null> {
+  return new Promise((resolve, reject) => {
+      if (!base64ImageUrl) return resolve(null);
+      const img = new Image();
+      img.onload = function () {
+          const canvas = getCanvas(img.width, img.height);
+          const ctx = canvas.getContext("2d") as any;
+          if (!ctx) return reject(new Error("Failed to get canvas context"));
+
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+          ctx.drawImage(realImage, 0, 0);
+
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+
+          let totalRed = 0, totalGreen = 0, totalBlue = 0, totalPixels = 0;
+          const colorCount: Record<string, number> = {};
+
+          for (let i = 0; i < data.length; i += 4) {
+              const red = data[i], green = data[i + 1], blue = data[i + 2];
+              totalRed += red;
+              totalGreen += green;
+              totalBlue += blue;
+              totalPixels++;
+              const colorKey = `${red},${green},${blue}`;
+              colorCount[colorKey] = (colorCount[colorKey] || 0) + 1;
+          }
+
+          const averageColor: [number, number, number] = [
+              Math.round(totalRed / totalPixels),
+              Math.round(totalGreen / totalPixels),
+              Math.round(totalBlue / totalPixels)
+          ];
+
+          if (useDominantColor) {
+              let dominantColor: [number, number, number] = averageColor;
+              let maxCount = 0;
+              for (const colorKey in colorCount) {
+                  if (colorCount[colorKey] > maxCount) {
+                      dominantColor = colorKey.split(",").map(Number) as [number, number, number];
+                      maxCount = colorCount[colorKey];
+                  }
+              }
+              resolve(dominantColor);
+          } else {
+              resolve(averageColor);
+          }
+      };
+
+      img.onerror = () => reject(new Error('Error loading image'));
+      img.src = base64ImageUrl;
+  });
+}
+
+export function reduceBase64Image(base64: string, targetWidth: number, quality=1) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        const { width: originalWidth, height: originalHeight } = img;
+  
+        // If the target width is greater than original, return original
+        if (targetWidth > originalWidth) {
+          return resolve(base64);
+        }
+  
+        const aspectRatio = originalHeight / originalWidth;
+        let targetHeight = targetWidth * aspectRatio;
+        if(targetWidth == 0 || targetWidth == originalWidth) {
+            targetWidth = originalWidth
+            targetHeight = originalHeight;
+        }
+  
+        const canvas = getCanvas(targetWidth, targetHeight);
+        //const canvas = document.createElement('canvas');
+        canvas.width = targetWidth;
+        canvas.height = targetHeight;
+  
+        const ctx = canvas.getContext('2d') as any;
+        const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+
+        if(targetWidth == 0 || targetHeight == 0 || !realImage) {
+            console.log("invimg:2", targetWidth, targetHeight, realImage)
+        }
+
+        ctx.drawImage(realImage, 0, 0, targetWidth, targetHeight);
+  
+        const matches = base64.match(/^data:(.+);base64,(.+)$/);
+        let resizedBase64
+        if (matches) {
+            const mimeType = matches[1]; // Extract MIME type
+            resizedBase64 = canvas.toDataURL(mimeType, quality); // default is image/png
+
+        } else {
+            resizedBase64 = canvas.toDataURL(); // default is image/png
+        }
+
+        
+        resolve(resizedBase64);
+      };
+      img.onerror = (err) => reject(err);
+      img.src = base64;
+    });
+}
+
+// Helper to load images with a timeout
+export const loadImageWithTimeoutFallback = (src: string, timeout = 5000): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      if (isNode) {
+        const { loadImage } = require('canvas');
+        if (src.startsWith('data:image/') || src.startsWith('data:img/')) {
+            const buffer = Buffer.from(src.split(',')[1], 'base64');
+            loadImage(buffer).then(resolve).catch(reject);
+
+        } else {
+            loadImage(src).then(resolve).catch(reject);
+        }
+
+      } else {
+        const img = new Image();
+        const timer = setTimeout(() => {
+          reject(new Error(`Image load timeout: ${src}`));
+        }, timeout);
+
+        img.onload = () => {
+          clearTimeout(timer);
+          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+          resolve(realImage);
+        };
+
+        img.onerror = (error: any) => {
+          clearTimeout(timer);
+          reject(new Error(`Error loading image: ${src.substring(0, 30)}`, error));
+        };
+
+        img.src = src;
+      }
+    });
+};
+
+export const loadImageWithTimeout = (src: string, timeout = 5000): Promise<any> => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const timer = setTimeout(() => {
+          reject(new Error(`Image load timeout: ${src}`));
+        }, timeout);
+
+        img.onload = () => {
+          clearTimeout(timer);
+          const realImage = ((img as any) as ImageWrapper).realImage? ((img as any) as ImageWrapper).realImage : img
+          resolve(realImage);
+        };
+
+        img.onerror = (error: any) => {
+          clearTimeout(timer);
+          reject(new Error(`Error loading image: ${src.substring(0, 30)}`, error));
+        };
+
+        img.src = src;
+    });
+};
+
+export const getCanvas = (width: number, height: number) => {
+  if(isNode) {
+    const { createCanvas } = require('canvas');
+    return createCanvas(width, height)
+
+  } else {
+    return document.createElement('canvas')
+  }
+}