plate-renderer 0.0.3

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/config/platesInfo.ts","../src/utils/imageProcess.ts","../src/index.ts"],"sourcesContent":["interface PlateInfo {\r\n  plateImage: string\r\n  fontColor: string\r\n  fonts: Array<{\r\n    width: number\r\n    height: number\r\n    left: number\r\n    top: number\r\n  }>    \r\n}\r\nexport type Colors = 'green' | 'blue'\r\ntype PlatesInfo = Record<Colors, PlateInfo>\r\n\r\nexport const platesInfo: PlatesInfo = {\r\n  green: {\r\n    plateImage: 'green',\r\n    fontColor: '#000000',\r\n    fonts: [\r\n      {\r\n        \"width\": 0.0929,\r\n        \"height\": 0.6204,\r\n        \"left\": 0.0328,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0874,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.1475,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0902,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.3361,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0902,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.4490,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0874,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.5519,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0874,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.6612,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0902,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.7678,\r\n        \"top\": 0.1852\r\n      },\r\n      {\r\n        \"width\": 0.0902,\r\n        \"height\": 0.6296,\r\n        \"left\": 0.8770,\r\n        \"top\": 0.1852\r\n      }\r\n    ]\r\n  },\r\n  blue: {\r\n    plateImage: 'blue',\r\n    fontColor: '#ffffff',\r\n    fonts: [\r\n      {\r\n        \"width\": 0.1042,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.0357,\r\n        \"top\": 0.1302\r\n      },\r\n      {\r\n        \"width\": 0.1042,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.1619,\r\n        \"top\": 0.1302\r\n      },\r\n      {\r\n        \"width\": 0.0893,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.3461,\r\n        \"top\": 0.1302\r\n      },\r\n      {\r\n        \"width\": 0.1004,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.4741,\r\n        \"top\": 0.1302\r\n      },\r\n      {\r\n        \"width\": 0.0938,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.6139,\r\n        \"top\": 0.1302\r\n      },\r\n      {\r\n        \"width\": 0.0938,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.7479,\r\n        \"top\": 0.1302\r\n      },\r\n      {\r\n        \"width\": 0.1004,\r\n        \"height\": 0.7396,\r\n        \"left\": 0.8818,\r\n        \"top\": 0.1302\r\n      }\r\n    ]\r\n  }\r\n}","export interface Rgb {\n  r: number\n  g: number\n  b: number\n}\n\nexport interface KeyOptions {\n  /** 亮度 <= solid 的像素完全不透明（字身） */\n  solid?: number\n  /** 亮度 >= clear 的像素完全透明（背景） */\n  clear?: number\n}\n\n/**\n * 把「黑字白底」的原图转成「指定颜色 + 透明背景」，并保留原图边缘的灰度过渡。\n *\n * @param imageData getImageData() 的结果，原地修改\n * @param fontColor 目标字色\n */\nexport function keyBlackToAlpha(imageData: ImageData, fontColor: Rgb, options: KeyOptions = {}) {\n  const { solid = 64, clear = 208 } = options\n  const { r, g, b } = fontColor\n  const data = imageData.data\n  const span = clear - solid\n\n  for (let i = 0; i < data.length; i += 4) {\n    // 感知亮度：JPEG 压缩后的边缘噪点用亮度判断比逐通道阈值稳\n    const lum = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]\n\n    let coverage: number\n    if (lum <= solid) {\n      coverage = 1\n    } else if (lum >= clear) {\n      coverage = 0\n    } else {\n      coverage = (clear - lum) / span\n    }\n\n    // 所有像素（包括全透明的）都写成字色，\n    // 缩放时插值不会从背景色里带出灰边或白边\n    data[i] = r\n    data[i + 1] = g\n    data[i + 2] = b\n    data[i + 3] = Math.round(coverage * data[i + 3])\n  }\n}\n\nexport function hexToRgb(hex: string) {\n    // 去掉 # 号\n    let color = hex.replace('#', '');\n    \n    // 处理简写（如 #f00 → #ff0000）\n    if (color.length === 3) {\n        color = color.split('').map(c => c + c).join('');\n    }\n    \n    // 位运算提取 RGB\n    const num = parseInt(color, 16);\n    const r = (num >> 16) & 255;\n    const g = (num >> 8) & 255;\n    const b = num & 255;\n    \n    return { r, g, b };\n}","import { platesInfo, type Colors } from './config/platesInfo'\r\nimport { keyBlackToAlpha, hexToRgb } from './utils/imageProcess'\r\n\r\nexport class PlateRenderer {\r\n  element: HTMLElement\r\n  plateColor: Colors\r\n  plateNumber: String\r\n\r\n  constructor(plateNumber: string, plateColor: Colors, el: string | HTMLElement) {\r\n    let element: HTMLElement\r\n    if (typeof el === 'string') {\r\n      const _el = document.getElementById(el)\r\n      if (!_el) {\r\n        throw new Error(`Element with ID \"${el}\" not found in DOM`)\r\n      }\r\n      element = _el\r\n    } else {\r\n      element = el\r\n    }\r\n\r\n    this.plateColor = plateColor\r\n    this.element = element\r\n    this.plateNumber = plateNumber\r\n  }\r\n\r\n  static async create(plateNumber: string, plateColor: Colors, el: string | HTMLElement) {\r\n    const plateRenderer = new PlateRenderer(plateNumber, plateColor, el)\r\n    const element = plateRenderer.element\r\n    const canvas = document.createElement('canvas')\r\n    const canvasWidth = element.offsetWidth\r\n    const canvasHeight = canvasWidth * 0.2915\r\n    canvas.width = canvasWidth\r\n    canvas.height = canvasHeight\r\n    const ctx = canvas.getContext('2d')\r\n    const img = new Image()\r\n    const plateImageModule = await import(`./assets/plate/${plateColor}.png`)\r\n    img.src = plateImageModule.default\r\n    img.onload = function() {\r\n      ctx?.drawImage(img, 0, 0, canvasWidth, canvasHeight)\r\n      element.appendChild(canvas)\r\n    }\r\n\r\n    const plateInfo = platesInfo[plateColor]\r\n\r\n    ;[...plateNumber].forEach(async (char, index) => {\r\n      //单个字符信息\r\n      const fontInfo = plateInfo.fonts[index]\r\n      if (!fontInfo) return\r\n\r\n      const img = new Image()\r\n      const charModule = await import(`./assets/font/140_${char}.jpg`)\r\n      img.src = charModule.default\r\n      img.onload = () => {\r\n        plateRenderer.extractFontToCanvas(img, canvas, plateInfo.fontColor, canvasWidth * fontInfo.width, canvasHeight * fontInfo.height, canvasWidth * fontInfo.left, canvasHeight * fontInfo.top)\r\n      }\r\n    })\r\n  }\r\n\r\n  extractFontToCanvas(img: HTMLImageElement, targetCanvas: HTMLCanvasElement, fontColor: string, width?: number, height?: number, x?: number, y?: number) {\r\n    width = width || img.width\r\n    height = height || img.height\r\n\r\n    const tempCanvas = document.createElement('canvas');\r\n    tempCanvas.width = img.naturalWidth || img.width;\r\n    tempCanvas.height = img.naturalHeight || img.height;\r\n    const tempCtx = tempCanvas.getContext('2d');\r\n    if (!tempCtx) throw new Error('Canvas 2D context not supported')\r\n    tempCtx.drawImage(img, 0, 0);\r\n\r\n    // 黑字白底 → 字色 + 透明背景，灰边保留为半透明\r\n    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);\r\n    keyBlackToAlpha(imageData, hexToRgb(fontColor));\r\n    tempCtx.putImageData(imageData, 0, 0);\r\n\r\n    const ctx = targetCanvas.getContext('2d');\r\n    if (!ctx) throw new Error('Canvas 2D context not supported')\r\n    ctx.imageSmoothingEnabled = true;\r\n    ctx.imageSmoothingQuality = 'high';\r\n    ctx.drawImage(tempCanvas, x || 0, y || 0, width, height);\r\n  }\r\n}"],"mappings":"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"}

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/imageProcess.d.ts

@@ -0,0 +1,23 @@
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface KeyOptions {
+    /** 亮度 <= solid 的像素完全不透明（字身） */
+    solid?: number;
+    /** 亮度 >= clear 的像素完全透明（背景） */
+    clear?: number;
+}
+/**
+ * 把「黑字白底」的原图转成「指定颜色 + 透明背景」，并保留原图边缘的灰度过渡。
+ *
+ * @param imageData getImageData() 的结果，原地修改
+ * @param fontColor 目标字色
+ */
+export declare function keyBlackToAlpha(imageData: ImageData, fontColor: Rgb, options?: KeyOptions): void;
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "plate-renderer",
+  "version": "0.0.3",
+  "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "build:es": "vite build --config vite.config.es.ts",
+    "build:umd": "vite build --config vite.config.umd.ts"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1",
+    "vite-plugin-dts": "^5.0.3"
+  },
+  "files": [
+    "dist"
+  ]
+}