id-scanner-lib 1.1.1 → 1.2.2

package/README.md

@@ -277,6 +277,83 @@ const scanner = new IDScanner({
 
 3. **关闭不必要的扫描**：不使用时及时停止扫描，节省资源。
 
+## 高级性能优化
+
+为满足生产环境的高性能需求，库内部实现了多种先进的性能优化策略：
+
+### 1. Web Worker多线程处理
+
+OCR和图像处理等计算密集型任务被移至Web Worker线程中执行，避免阻塞主线程UI渲染。
+
+```javascript
+// 启用Worker线程处理
+const ocrProcessor = new OCRProcessor({
+  useWorker: true // 默认值，可以明确指定
+});
+
+// 初始化会在后台线程创建OCR处理能力
+await ocrProcessor.initialize();
+```
+
+### 2. 内存管理与资源自动释放
+
+实现了资源自动管理机制，防止内存泄漏，特别适合长时间运行的应用场景。
+
+```javascript
+// 所有核心类都实现了Disposable接口
+// 可以通过ResourceManager统一管理
+import { ResourceManager } from 'id-scanner-lib/core';
+
+const resourceManager = new ResourceManager();
+resourceManager.register('scanner', scanner, true); // 最后一个参数为是否自动释放
+
+// 资源会在不使用一段时间后自动释放
+// 也可以手动释放
+await resourceManager.dispose('scanner');
+```
+
+### 3. 图像预处理优化
+
+自动降低分析图像尺寸，在保持识别率的同时大幅提升处理速度。
+
+```javascript
+// 可以配置最大图像尺寸
+const ocrProcessor = new OCRProcessor({
+  maxImageDimension: 1000 // 设置图像处理的最大尺寸
+});
+
+// 内部图像处理会自动缩小过大的图像
+// ImageProcessor.downsampleForProcessing(imageData, maxDimension);
+```
+
+### 4. 节流处理
+
+对视频帧分析应用节流策略，避免过度计算，降低设备发热和电池消耗。
+
+```javascript
+// 设置检测间隔毫秒数
+const detector = new IDCardDetector({
+  detectionInterval: 300 // 默认200ms，可根据需要调整
+});
+```
+
+### 5. 识别结果缓存
+
+通过图像指纹技术，缓存识别结果，短时间内相同图像避免重复识别。
+
+```javascript
+// 启用结果缓存
+const ocrProcessor = new OCRProcessor({
+  enableCache: true, // 默认值，可明确指定
+  cacheSize: 50 // 缓存最近50个结果
+});
+
+// 清除缓存
+ocrProcessor.clearCache();
+```
+
+这些性能优化在默认配置下已经启用，可根据应用特定需求进行调整。在移动设备上，这些优化可以将处理速度提升3-5倍，同时显著降低电池消耗。
+
 ## 常见问题解答
 
 **Q: 为什么我在移动设备上无法访问摄像头？**
@@ -346,6 +423,9 @@ A: 库的大小约为1MB，主要是因为包含OCR引擎。可以考虑按需
 5. **版本更新记录**：
    - v1.0.0: 首次发布版本
    - v1.1.0: 模块化重构，实现按需加载，大幅减小体积
+   - v1.2.0: 实现多种性能优化策略，提升处理速度和降低资源占用
+   - v1.2.1: 修复类型错误和代码健壮性问题
+   - v1.2.2: 完善类型定义，修复所有类型检查警告
 
 ### 运行时性能
 1. **摄像头参数自动优化**：根据设备性能自动调整摄像头分辨率

package/dist/id-scanner-core.esm.js

@@ -10465,6 +10465,166 @@ class ImageProcessor {
         }
         return imageData;
     }
+    /**
+     * 降低图像分辨率以提高处理速度
+     *
+     * 对于OCR和图像分析，降低分辨率可以在保持识别率的同时大幅提升处理速度
+     *
+     * @param {ImageData} imageData - 原图像数据
+     * @param {number} [maxDimension=1000] - 目标最大尺寸（宽或高）
+     * @returns {ImageData} 处理后的图像数据
+     */
+    static downsampleForProcessing(imageData, maxDimension = 1000) {
+        const { width, height } = imageData;
+        // 如果图像尺寸已经小于或等于目标尺寸，则无需处理
+        if (width <= maxDimension && height <= maxDimension) {
+            return imageData;
+        }
+        // 计算缩放比例，保持宽高比
+        const scale = maxDimension / Math.max(width, height);
+        const newWidth = Math.round(width * scale);
+        const newHeight = Math.round(height * scale);
+        // 调整图像大小
+        return this.resize(imageData, newWidth, newHeight);
+    }
+    /**
+     * 转换图像为Base64格式，方便在Worker线程中传递
+     *
+     * @param {ImageData} imageData - 原图像数据
+     * @returns {string} base64编码的图像数据
+     */
+    static imageDataToBase64(imageData) {
+        const canvas = this.imageDataToCanvas(imageData);
+        return canvas.toDataURL('image/jpeg', 0.7); // 使用较低质量的JPEG格式减少数据量
+    }
+    /**
+     * 从Base64字符串还原图像数据
+     *
+     * @param {string} base64 - base64编码的图像数据
+     * @returns {Promise<ImageData>} 还原的图像数据
+     */
+    static async base64ToImageData(base64) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    reject(new Error('无法创建Canvas上下文'));
+                    return;
+                }
+                ctx.drawImage(img, 0, 0);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                resolve(imageData);
+            };
+            img.onerror = () => {
+                reject(new Error('图像加载失败'));
+            };
+            img.src = base64;
+        });
+    }
+    /**
+     * 使用Web Worker并行处理图像
+     * 此方法将图像分割为多个部分，并行处理以提高性能
+     *
+     * @param {ImageData} imageData - 原图像数据
+     * @param {Function} processingFunction - 处理函数，接收ImageData返回ImageData
+     * @param {number} [chunks=4] - 分割的块数
+     * @returns {Promise<ImageData>} 处理后的图像数据
+     */
+    static async processImageInParallel(imageData, processingFunction, chunks = 4) {
+        // 如果不支持Worker或图像太小，直接处理
+        if (typeof Worker === 'undefined' || imageData.width * imageData.height < 100000) {
+            return processingFunction(imageData);
+        }
+        // 创建结果canvas
+        const resultCanvas = document.createElement('canvas');
+        resultCanvas.width = imageData.width;
+        resultCanvas.height = imageData.height;
+        const resultCtx = resultCanvas.getContext('2d');
+        if (!resultCtx) {
+            throw new Error('无法创建Canvas上下文');
+        }
+        // 根据图像特性确定分割方向和每块大小
+        const isWide = imageData.width > imageData.height;
+        const chunkSize = Math.floor((isWide ? imageData.width : imageData.height) / chunks);
+        // 创建Worker处理每个块
+        const promises = [];
+        for (let i = 0; i < chunks; i++) {
+            const chunkCanvas = document.createElement('canvas');
+            const chunkCtx = chunkCanvas.getContext('2d');
+            if (!chunkCtx)
+                continue;
+            let chunkImageData;
+            if (isWide) {
+                // 水平分割
+                const startX = i * chunkSize;
+                const width = (i === chunks - 1) ? imageData.width - startX : chunkSize;
+                chunkCanvas.width = width;
+                chunkCanvas.height = imageData.height;
+                // 复制原图像数据到分块
+                const tempCanvas = this.imageDataToCanvas(imageData);
+                chunkCtx.drawImage(tempCanvas, startX, 0, width, imageData.height, 0, 0, width, imageData.height);
+                chunkImageData = chunkCtx.getImageData(0, 0, width, imageData.height);
+            }
+            else {
+                // 垂直分割
+                const startY = i * chunkSize;
+                const height = (i === chunks - 1) ? imageData.height - startY : chunkSize;
+                chunkCanvas.width = imageData.width;
+                chunkCanvas.height = height;
+                // 复制原图像数据到分块
+                const tempCanvas = this.imageDataToCanvas(imageData);
+                chunkCtx.drawImage(tempCanvas, 0, startY, imageData.width, height, 0, 0, imageData.width, height);
+                chunkImageData = chunkCtx.getImageData(0, 0, imageData.width, height);
+            }
+            // 使用Worker处理
+            const workerCode = `
+        self.onmessage = function(e) {
+          const imageData = e.data.imageData;
+          const processingFunction = ${processingFunction.toString()};
+          const result = processingFunction(imageData);
+          self.postMessage({ result, index: e.data.index }, [result.data.buffer]);
+        }
+      `;
+            const blob = new Blob([workerCode], { type: 'application/javascript' });
+            const workerUrl = URL.createObjectURL(blob);
+            const worker = new Worker(workerUrl);
+            const promise = new Promise((resolve) => {
+                worker.onmessage = function (e) {
+                    resolve(e.data);
+                    worker.terminate();
+                    URL.revokeObjectURL(workerUrl);
+                };
+                // 传输数据
+                worker.postMessage({
+                    imageData: chunkImageData,
+                    index: i
+                }, [chunkImageData.data.buffer]);
+            });
+            promises.push(promise);
+        }
+        // 等待所有Worker完成并组合结果
+        const results = await Promise.all(promises);
+        // 按索引排序结果
+        results.sort((a, b) => a.index - b.index);
+        // 将处理后的块绘制到结果canvas
+        for (let i = 0; i < results.length; i++) {
+            const { result } = results[i];
+            const tempCanvas = this.imageDataToCanvas(result);
+            if (isWide) {
+                const startX = i * chunkSize;
+                resultCtx.drawImage(tempCanvas, startX, 0);
+            }
+            else {
+                const startY = i * chunkSize;
+                resultCtx.drawImage(tempCanvas, 0, startY);
+            }
+        }
+        return resultCtx.getImageData(0, 0, imageData.width, imageData.height);
+    }
 }
 
 /**