frontbacked-svg 5.0.0

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "frontbacked-svg",
+  "version": "5.0.0",
+  "description": "frontbacked svg renderer",
+  "types": "dist/main.d.ts",
+  "type": "module",
+  "bin.disable": {
+    "frontbacked-svg": "dist/bin/cli.cjs"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/main.d.ts",
+        "default": "./dist/main.mjs"
+      },
+      "require": {
+        "types": "./dist/main.d.cts",
+        "default": "./dist/main.cjs"
+      },
+      "default": "./dist/main.mjs"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "packageManager": "npm@8.4.0",
+  "files": [
+    "dist",
+    "src",
+    "bin"
+  ],
+  "scripts": {
+    "build": "tsc && tsup",
+    "s": "node dist/bin/cli.cjs",
+    "t": "npm run build && npm run s",
+    "lint": "eslint . && npm run lint:lockfile",
+    "lint:fix": "eslint . --fix",
+    "lint:lockfile": "lockfile-lint --path package-lock.json --validate-https --allowed-hosts npm yarn",
+    "test": "c8 node --loader ts-node/esm --test __tests__/**",
+    "test:watch": "c8 node --loader ts-node/esm --test --watch __tests__/**",
+    "coverage:view": "open coverage/lcov-report/index.html",
+    "version": "changeset version",
+    "release": "changeset publish"
+  },
+  "author": {
+    "name": "feyi-tech",
+    "email": "jinminetics@gmail.com",
+    "url": "https://github.com/feyi-tech"
+  },
+  "publishConfig": {
+    "provenance": false,
+    "access": "public"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    ""
+  ],
+  "homepage": "https://github.com/feyi-tech/frontbacked-svg",
+  "bugs": {
+    "url": "https://github.com/feyi-tech/frontbacked-svg/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/feyi-tech/frontbacked-svg.git"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.7",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.14.10",
+    "c8": "^10.1.2",
+    "eslint": "^9.6.0",
+    "eslint-plugin-security": "^3.0.1",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "lockfile-lint": "^4.14.0",
+    "neostandard": "^0.11.0",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.3",
+    "validate-conventional-commit": "^1.0.4"
+  },
+  "peerDependencies": {
+    "firebase": ">=8.0.0"
+  },
+  "lint-staged": {
+    "**/*.{js,json}": [
+      "npm run lint:fix"
+    ]
+  },
+  "dependencies": {
+    "@types/firebase": "^3.2.1",
+    "canvas": "^3.1.0",
+    "jsdom": "^26.0.0",
+    "jspdf": "^2.5.1",
+    "svgson": "^5.3.1"
+  }
+}

package/src/base64Image.ts

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

package/src/cssParser.ts

@@ -0,0 +1,59 @@
+import { Declaration } from "./types.ts";
+
+
+export const getIdentifier = (selectorOrProperty: string, propertyValue?: string) => {
+  return `${selectorOrProperty.replace(/\s/g, "")}${propertyValue? `:${propertyValue.replace(/\s/g, "")}` : ""}`
+}
+
+export function parseValueUnit(input: string) {
+  const match = input.match(/^([-+]?\d*\.?\d+)([a-zA-Z]+)$/);
+  if (match) {
+    return {
+      value: match[1],
+      unit: match[2]
+    };
+  } else {
+    throw new Error(`Invalid input format: ${input}`);
+  }
+}
+
+export function parseAndModifyCSS(cssString: string, callback: (selector: string, declarations: Declaration[]) => Declaration[]) {
+    const cssObject: {[x: string]:  Declaration[]} = {};
+  
+    // Regular expression to match selectors and their declarations
+    const regex = /([^{]+)\{([^}]+)\}/g;
+    let match;
+  
+    // Parse the CSS content into an object
+    while ((match = regex.exec(cssString)) !== null) {
+      const selector = match[1].trim();
+      const declarations = match[2].trim().split(';').filter(Boolean).map(decl => {
+        const [property, value] = decl.split(':').map(item => item.trim());
+        return { property, value };
+      });
+  
+      cssObject[selector] = declarations;
+    }
+  
+    // Function to process each selector and its declarations using the callback
+    Object.keys(cssObject).forEach(selector => {
+      const declarations = cssObject[selector];
+  
+      // Call the callback, passing the selector and its declarations
+      const updatedDeclarations = callback(selector, declarations);
+  
+      // Replace the original declarations with the returned value
+      cssObject[selector] = updatedDeclarations;
+    });
+  
+    // Convert the object back to a CSS string
+    let newCssString = '';
+    Object.keys(cssObject).forEach(selector => {
+      const declarations = cssObject[selector]
+        .map(({ property, value }) => `${property}: ${value};`)
+        .join(' ');
+      newCssString += `${selector} { ${declarations} }\n`;
+    });
+  
+    return newCssString;
+}

package/src/filters.ts

@@ -0,0 +1,226 @@
+import { FilterArgs, Filters } from "./types.ts";
+import { AnalyzeResult, transformImageByTemplate } from "./imagePassportUtils.ts";
+import { ImageWrapper } from './polyfills/Image.ts';
+import { getCanvas } from "./imageHelper.ts";
+
+const isNode = typeof window === 'undefined';
+// Helper function to apply the filter
+const applyFilter = (base64ImageString: string, filter: (data: ImageData, args?: FilterArgs | null) => void, args?: FilterArgs | null): Promise<string> => {
+    //alert(`Filter will apply`)
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+
+        img.onload = () => {
+
+            const canvas = getCanvas(img.width, img.width);
+            //const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d') as any;
+            if (!ctx) {
+                return reject(new Error("Canvas not supported"));
+            }
+
+            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);
+            filter(imageData, args);
+            ctx.putImageData(imageData, 0, 0);
+
+            resolve(canvas.toDataURL());
+        };
+
+        img.src = base64ImageString;
+
+        img.onerror = reject;
+    });
+};
+
+const BLUR_RADII = ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7",/* "0.8", "0.9", "1"*/]
+// Define the FILTERS object with filter functions and corresponding React components
+const FILTERS: Filters = {
+    Whitescale: {
+        id: "Whitescale",
+        filter: (base64ImageString) => applyFilter(base64ImageString, (data) => {
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                pixels[i] = 255;    // R
+                pixels[i + 1] = 255; // G
+                pixels[i + 2] = 255; // B
+            }
+        })
+    },
+    Blackscale: {
+        id: "Blackscale",
+        filter: (base64ImageString) => applyFilter(base64ImageString, (data) => {
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                pixels[i] = 0;    // R
+                pixels[i + 1] = 0; // G
+                pixels[i + 2] = 0; // B
+            }
+        })
+    },
+    Greyscale: {
+        id: "Greyscale",
+        filter: (base64ImageString) => applyFilter(base64ImageString, (data) => {
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                const avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
+                pixels[i] = avg;    // R
+                pixels[i + 1] = avg; // G
+                pixels[i + 2] = avg; // B
+            }
+        })
+    },
+    Redscale: {
+        id: "Redscale",
+        filter: (base64ImageString) => applyFilter(base64ImageString, (data) => {
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                pixels[i + 1] = 0; // G
+                pixels[i + 2] = 0; // B
+            }
+        })
+    },
+    Greenscale: {
+        id: "Greenscale",
+        filter: (base64ImageString) => applyFilter(base64ImageString, (data) => {
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                pixels[i] = 0;    // R
+                pixels[i + 2] = 0; // B
+            }
+        })
+    },
+    Bluescale: {
+        id: "Bluescale",
+        filter: (base64ImageString) => applyFilter(base64ImageString, (data) => {
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                pixels[i] = 0;    // R
+                pixels[i + 1] = 0; // G
+            }
+        })
+    },
+    Sepia: {
+        id: "Sepia",
+        filter: (base64ImageString, args) => applyFilter(base64ImageString, (data) => {
+            // Set default values for sepia transformation or use provided args
+            const rMult = args?.rMult ?? 0.393;
+            const gMult = args?.gMult ?? 0.769;
+            const bMult = args?.bMult ?? 0.189;
+            const rAdd = args?.rAdd ?? 0.349;
+            const gAdd = args?.gAdd ?? 0.686;
+            const bAdd = args?.bAdd ?? 0.272;
+    
+            const pixels = data.data;
+            for (let i = 0; i < pixels.length; i += 4) {
+                const r = pixels[i];     // Red
+                const g = pixels[i + 1]; // Green
+                const b = pixels[i + 2]; // Blue
+    
+                // Apply customizable sepia transformation
+                const tr = rMult * r + gMult * g + bMult * b;
+                const tg = rAdd * r + gAdd * g + bAdd * b;
+                const tb = bAdd * r + bAdd * g + bAdd * b;
+    
+                pixels[i] = tr > 255 ? 255 : tr;       // Red
+                pixels[i + 1] = tg > 255 ? 255 : tg;   // Green
+                pixels[i + 2] = tb > 255 ? 255 : tb;   // Blue
+            }
+        })
+    },
+    Guassianblur: {
+        id: "Guassianblur",
+        filter: (base64ImageString, args) => applyFilter(base64ImageString, (data, args) => {
+            const minRadius = Number(BLUR_RADII[0])
+            const maxRadius = Number(BLUR_RADII[BLUR_RADII.length - 1])
+            var radius = args?.radius && !isNaN(args.radius) ? Number(args.radius) : minRadius;// Default radius
+            if(radius > maxRadius) radius = minRadius;
+            radius *= 10;
+            
+            const pixels = data.data;
+            const width = data.width;
+            const height = data.height;
+
+            // Create a copy of the original pixel data
+            const copyData = new Uint8ClampedArray(pixels);
+
+            // Apply separable Gaussian blur: first horizontal, then vertical
+            // Horizontal pass
+            function blurHorizontal() {
+                for (let y = 0; y < height; y++) {
+                    for (let x = 0; x < width; x++) {
+                        let r = 0, g = 0, b = 0, a = 0, count = 0;
+
+                        for (let dx = -radius; dx <= radius; dx++) {
+                            const nx = x + dx;
+
+                            if (nx >= 0 && nx < width) {
+                                const i = (y * width + nx) * 4;
+                                r += copyData[i];
+                                g += copyData[i + 1];
+                                b += copyData[i + 2];
+                                a += copyData[i + 3];
+                                count++;
+                            }
+                        }
+
+                        const idx = (y * width + x) * 4;
+                        pixels[idx] = r / count;
+                        pixels[idx + 1] = g / count;
+                        pixels[idx + 2] = b / count;
+                        pixels[idx + 3] = a / count;
+                    }
+                }
+            }
+
+            // Vertical pass
+            function blurVertical() {
+                for (let x = 0; x < width; x++) {
+                    for (let y = 0; y < height; y++) {
+                        let r = 0, g = 0, b = 0, a = 0, count = 0;
+
+                        for (let dy = -radius; dy <= radius; dy++) {
+                            const ny = y + dy;
+
+                            if (ny >= 0 && ny < height) {
+                                const i = (ny * width + x) * 4;
+                                r += copyData[i];
+                                g += copyData[i + 1];
+                                b += copyData[i + 2];
+                                a += copyData[i + 3];
+                                count++;
+                            }
+                        }
+
+                        const idx = (y * width + x) * 4;
+                        pixels[idx] = r / count;
+                        pixels[idx + 1] = g / count;
+                        pixels[idx + 2] = b / count;
+                        pixels[idx + 3] = a / count;
+                    }
+                }
+            }
+
+            // Apply the separable blur
+            blurHorizontal();  // First pass
+            blurVertical();    // Second pass
+        }, args)
+    },/*
+    Rotate: {
+        id: "Rotate",
+        filter: (base64ImageString, args) => new Promise((resolve, reject) => {
+            resolve(base64ImageString)
+        }),
+        render: null
+    },*/
+    ImageTransform: {
+        id: "ImageTransform",
+        filter: (base64ImageString, args) => transformImageByTemplate(args as AnalyzeResult, base64ImageString, 2)
+    },
+}
+
+export default FILTERS

package/src/font-utils.ts

@@ -0,0 +1,204 @@
+import { parse, INode } from 'svgson';
+import { Font, FontsMap } from './types.ts';
+import { cleanFilename, isBrowser } from './utils.ts';
+import { getCanvas } from './imageHelper.ts';
+
+const isNode = typeof window === 'undefined';
+
+// Function to recursively traverse the parsed SVG and collect font-family values
+export function collectFontFamilies(node: INode, fontFamilies: Set<string> = new Set()): Set<string> {
+// Check for direct font-family attribute
+if (node.attributes && node.attributes['font-family']) {
+fontFamilies.add(node.attributes['font-family']);
+}
+
+// Check for <defs> and <style> elements
+if (node.name === 'defs' && node.children) {
+node.children.forEach(child => {
+  if (child.name === 'style' && child.children && child.children.length > 0) {
+    const cssContent = child.children[0].value;
+    extractFontFamiliesFromCSS(cssContent, fontFamilies);
+  }
+});
+}
+
+// Recurse into children
+if (node.children && node.children.length > 0) {
+node.children.forEach(child => collectFontFamilies(child, fontFamilies));
+}
+
+return fontFamilies;
+}
+
+// Function to extract font-family values from CSS content
+export function extractFontFamiliesFromCSS(cssContent: string, fontFamilies: Set<string>) {
+const fontFamilyRegex = /font-family:\s*([^;]+);/g;
+let match;
+while ((match = fontFamilyRegex.exec(cssContent)) !== null) {
+fontFamilies.add(match[1].trim());
+}
+}
+
+// Main export function to parse the SVG and return a list of font-family values
+export async function getFontFamiliesFromSVG(svgString: string): Promise<string[]> {
+const parsedSVG = await parse(svgString);
+const fontFamilies = collectFontFamilies(parsedSVG as INode);
+return Array.from(fontFamilies);
+}
+
+
+async function fetchFontDataAsDataUrl(url: string): Promise<string> {
+try {
+  const response = await fetch(url);
+  if (!response.ok) {
+      throw new Error(`HTTP status ${response.status}`);
+  }
+  const blob = await response.blob();
+
+  if (typeof window !== "undefined" && typeof FileReader !== "undefined") {
+      // Browser Environment: Use FileReader
+      return new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+      });
+  } else if (typeof Buffer !== "undefined") {
+      // Node.js Environment: Use Buffer
+      const arrayBuffer = await blob.arrayBuffer();
+      const base64String = Buffer.from(arrayBuffer).toString("base64");
+      const mimeType = blob.type || "application/octet-stream";
+      return `data:${mimeType};base64,${base64String}`;
+  } else {
+      throw new Error("Base64 conversion not supported in this environment");
+  }
+} catch (error: any) {
+  throw new Error(`Failed to fetch font data from ${url}: ${error.message}`);
+}
+}
+
+
+export function getFontId(fontName: string): string {
+    // Convert to lowercase
+    let fontId = fontName.toLowerCase();
+    fontId = fontId.replace(/["']/g, "")
+  
+    // Replace spaces and special characters with hyphens
+    fontId = fontId.replace(/[\s]+/g, '-');
+  
+    // Remove any characters that are not alphanumeric or hyphens
+    fontId = fontId.replace(/[^a-z0-9-]+/g, '');
+  
+    // Ensure no multiple consecutive hyphens
+    fontId = fontId.replace(/-+/g, '-');
+  
+    // Trim hyphens from start and end
+    fontId = fontId.replace(/^-|-$/g, '');
+  
+    return fontId;
+}
+  
+export function generateFontMap(
+    fontsLocationDomain: string,
+    fontNames: string[],
+    fontExtensions = ["ttf", "otf", "woff", "woff2", "eot", "svg"]
+  ): Promise<FontsMap> {
+    return new Promise(async (resolve, reject) => {
+      const fontMap: FontsMap = {};
+  
+      for (const fontName of fontNames) {
+        const fontInfo: Font = {
+          name: fontName.replace(/["']/g, ""),
+          id: getFontId(fontName)
+        };
+    
+        let fontFound = false;
+    
+        for (const ext of fontExtensions) {
+          const url = `https://${fontsLocationDomain}/fonts/${cleanFilename(fontInfo.id)}.${ext}?v=1`;
+          try {
+            const dataUrl = await fetchFontDataAsDataUrl(url);
+            fontInfo.url = url;
+            fontInfo.dataUrl = dataUrl;
+            fontInfo.ext = ext;
+            fontFound = true;
+            break;
+          } catch (error: any) {
+            fontInfo.readError = error.message;
+          }
+        }
+    
+        if (!fontFound) {
+          fontInfo.readError = `No valid font found for ${fontName} with extensions: ${fontExtensions.join(
+            ', '
+          )}`;
+        }
+    
+        fontMap[fontInfo.id] = fontInfo;
+      }
+    
+      resolve(fontMap)
+    })
+}
+  
+export function getFontFormat(extension: string) {
+    const formatMap: {[x: string]: string} = {
+        'ttf': 'truetype',
+        'otf': 'opentype',
+        'woff': 'woff',
+        'woff2': 'woff2',
+        'eot': 'embedded-opentype',
+        'svg': 'svg'
+    };
+
+    return formatMap[extension.toLowerCase()] || 'unknown';
+}
+
+export function createFontThumbnail(fontBase64: string, fontFormat: string): Promise<string> {
+    const mimeTypeMap: {[x: string]: string} = {
+        'ttf': 'font/ttf',
+        'otf': 'font/otf',
+        'woff': 'font/woff',
+        'woff2': 'font/woff2',
+        'eot': 'font/eot',
+        'svg': 'svg'
+    };
+
+    const mimeType = mimeTypeMap[fontFormat.toLowerCase()];
+    if (!mimeType) {
+        return Promise.reject(new Error('Unsupported font format'));
+    }
+
+    return new Promise((resolve, reject) => {
+        //return resolve("")
+        //const fontFace = new FontFace('CustomFont', `url(data:${mimeType};base64,${fontBase64})`);
+
+        if(!isBrowser() || !document?.fonts) return resolve("")
+        const fontFace = new FontFace('CustomFont', `url(${fontBase64})`);
+
+        fontFace.load().then((loadedFontFace) => {
+            (document.fonts as any).add(loadedFontFace);
+
+            const canvas = getCanvas(100, 100);
+            //const canvas = document.createElement('canvas');
+            canvas.width = 100; // Set canvas width
+            canvas.height = 100; // Set canvas height
+
+            const ctx = canvas.getContext('2d') as any;
+            if(!ctx) return
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = '#FFFFFF'; // Set background color
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = '#000000'; // Set text color
+            ctx.font = '50px CustomFont'; // Use the loaded font
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('Aa', canvas.width / 2, canvas.height / 2); // Draw the text
+
+            const dataUrl = canvas.toDataURL('image/png');
+            resolve(dataUrl);
+        }).catch(error => {
+            reject(error);
+        });
+    });
+}