id-scanner-lib 1.0.0 → 1.2.0

package/src/utils/camera.ts

@@ -34,13 +34,13 @@ export interface CameraOptions {
  * 
  * // 初始化相机
  * const videoElement = document.getElementById('video') as HTMLVideoElement;
- * await camera.initialize(videoElement);
+ * await camera.start(videoElement);
  * 
  * // 捕获当前视频帧
  * const imageData = camera.captureFrame();
  * 
  * // 使用结束后释放资源
- * camera.release();
+ * camera.stop();
  * ```
  */
 export class Camera {
@@ -49,7 +49,6 @@ export class Camera {
   
   /**
    * 创建相机实例
-   * 
    * @param {CameraOptions} [options] - 相机配置选项
    */
   constructor(private options: CameraOptions = {}) {
@@ -62,75 +61,101 @@ export class Camera {
   }
   
   /**
-   * 初始化相机，请求摄像头权限并设置视频流
+   * 启动摄像头并将视频流绑定到视频元素
+   * @param videoElement HTML视频元素
+   * @returns Promise<void>
+   */
+  async start(videoElement: HTMLVideoElement): Promise<void> {
+    return this.initialize(videoElement);
+  }
+  
+  /**
+   * 停止摄像头并释放资源
+   */
+  stop(): void {
+    this.release();
+  }
+  
+  /**
+   * 初始化相机，获取视频流并绑定到视频元素
    * 
-   * @param {HTMLVideoElement} videoElement - 用于显示相机画面的video元素
+   * @param {HTMLVideoElement} videoElement - 用于显示视频流的视频元素
    * @returns {Promise<void>} 初始化完成的Promise
-   * @throws 如果无法访问相机，将抛出错误
+   * @throws 如果无法访问摄像头，将抛出错误
    */
   async initialize(videoElement: HTMLVideoElement): Promise<void> {
+    this.videoElement = videoElement;
+    
     try {
-      this.videoElement = videoElement;
-      
+      // 构建媒体约束
       const constraints: MediaStreamConstraints = {
         video: {
-          width: this.options.width,
-          height: this.options.height,
+          width: { ideal: this.options.width },
+          height: { ideal: this.options.height },
           facingMode: this.options.facingMode
         }
       };
       
+      // 获取视频流
       this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-      this.videoElement.srcObject = this.stream;
       
-      return new Promise((resolve) => {
-        if (this.videoElement) {
-          this.videoElement.onloadedmetadata = () => {
-            if (this.videoElement) {
-              this.videoElement.play();
-              resolve();
-            }
-          };
-        }
-      });
+      // 绑定到视频元素
+      if (this.videoElement) {
+        this.videoElement.srcObject = this.stream;
+        await new Promise<void>((resolve) => {
+          if (this.videoElement) {
+            this.videoElement.onloadedmetadata = () => {
+              if (this.videoElement) {
+                this.videoElement.play().then(() => resolve());
+              }
+            };
+          }
+        });
+      }
     } catch (error) {
-      console.error('相机初始化失败:', error);
-      throw new Error('无法访问相机');
+      console.error('无法访问摄像头:', error);
+      throw new Error('无法访问摄像头。请确保已授予摄像头访问权限，并且摄像头未被其他应用程序占用。');
     }
   }
   
   /**
-   * 获取当前视频帧
-   * 
-   * 捕获当前视频画面并转换为ImageData对象，可用于图像处理和分析
+   * 捕获当前视频帧
    * 
-   * @returns {ImageData|null} 当前视频帧的ImageData对象，如果未初始化视频则返回null
+   * @returns {ImageData|null} 视频帧的ImageData对象，如果未初始化则返回null
    */
   captureFrame(): ImageData | null {
-    if (!this.videoElement) return null;
+    if (!this.videoElement) {
+      return null;
+    }
     
+    // 创建Canvas元素用于捕获视频帧
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return null;
-    
     canvas.width = this.videoElement.videoWidth;
     canvas.height = this.videoElement.videoHeight;
-    ctx.drawImage(this.videoElement, 0, 0);
     
-    return ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return null;
+    }
+    
+    // 将视频内容绘制到Canvas中
+    context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
+    
+    // 获取ImageData对象
+    return context.getImageData(0, 0, canvas.width, canvas.height);
   }
   
   /**
-   * 释放相机资源
-   * 
-   * 停止所有视频流轨道并清理资源。在不再需要相机时应调用此方法。
+   * 释放摄像头资源
    */
   release(): void {
+    // 停止视频流的所有轨道
     if (this.stream) {
       this.stream.getTracks().forEach(track => track.stop());
       this.stream = null;
     }
     
+    // 清除视频元素绑定
     if (this.videoElement) {
       this.videoElement.srcObject = null;
       this.videoElement = null;

package/src/utils/image-processing.ts

@@ -154,4 +154,208 @@ export class ImageProcessor {
     
     return imageData;
   }
+
+  /**
+   * 降低图像分辨率以提高处理速度
+   * 
+   * 对于OCR和图像分析，降低分辨率可以在保持识别率的同时大幅提升处理速度
+   * 
+   * @param {ImageData} imageData - 原图像数据
+   * @param {number} [maxDimension=1000] - 目标最大尺寸（宽或高）
+   * @returns {ImageData} 处理后的图像数据
+   */
+  static downsampleForProcessing(imageData: ImageData, maxDimension: number = 1000): ImageData {
+    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: ImageData): string {
+    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: string): Promise<ImageData> {
+    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: ImageData, 
+    processingFunction: (imgData: ImageData) => ImageData,
+    chunks: number = 4
+  ): Promise<ImageData> {
+    // 如果不支持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<{ result: ImageData, index: number }>((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);
+  }
 } 

package/src/utils/performance.ts

@@ -0,0 +1,208 @@
+/**
+ * @file 性能优化工具类
+ * @description 提供节流、防抖、缓存等性能优化功能
+ * @module PerformanceUtils
+ */
+
+/**
+ * 节流函数：限制函数在一定时间内只能执行一次
+ * 
+ * @param fn 需要节流的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 节流处理后的函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T, 
+  delay: number
+): (...args: Parameters<T>) => void {
+  let lastCall = 0;
+  let timeoutId: number | null = null;
+  
+  return function(...args: Parameters<T>) {
+    const now = Date.now();
+    const remaining = delay - (now - lastCall);
+    
+    if (remaining <= 0) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      lastCall = now;
+      fn.apply(this, args);
+    } else if (!timeoutId) {
+      timeoutId = window.setTimeout(() => {
+        lastCall = Date.now();
+        timeoutId = null;
+        fn.apply(this, args);
+      }, remaining);
+    }
+  };
+}
+
+/**
+ * 防抖函数：函数在最后一次调用后延迟指定时间执行
+ * 
+ * @param fn 需要防抖的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 防抖处理后的函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T, 
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: number | null = null;
+  
+  return function(...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    
+    timeoutId = window.setTimeout(() => {
+      fn.apply(this, args);
+      timeoutId = null;
+    }, delay);
+  };
+}
+
+/**
+ * LRU缓存类 - 使用最近最少使用策略的缓存实现
+ */
+export class LRUCache<K, V> {
+  private cache = new Map<K, V>();
+  
+  /**
+   * 构造LRU缓存
+   * @param maxSize 缓存最大容量
+   */
+  constructor(private maxSize: number = 100) {}
+  
+  /**
+   * 获取缓存项
+   * @param key 缓存键
+   * @returns 缓存值或undefined
+   */
+  get(key: K): V | undefined {
+    if (!this.cache.has(key)) {
+      return undefined;
+    }
+    
+    // 获取值
+    const value = this.cache.get(key)!;
+    
+    // 将项移至最新位置（删除后重新添加）
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    
+    return value;
+  }
+  
+  /**
+   * 设置缓存项
+   * @param key 缓存键
+   * @param value 缓存值
+   */
+  set(key: K, value: V): void {
+    // 如果键已存在，需要先删除
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    }
+    
+    // 如果缓存已满，移除最老的项
+    if (this.cache.size >= this.maxSize) {
+      const oldestKey = this.cache.keys().next().value;
+      this.cache.delete(oldestKey);
+    }
+    
+    // 添加新项
+    this.cache.set(key, value);
+  }
+  
+  /**
+   * 删除缓存项
+   * @param key 缓存键
+   * @returns 是否成功删除
+   */
+  delete(key: K): boolean {
+    return this.cache.delete(key);
+  }
+  
+  /**
+   * 清空缓存
+   */
+  clear(): void {
+    this.cache.clear();
+  }
+  
+  /**
+   * 获取当前缓存大小
+   */
+  get size(): number {
+    return this.cache.size;
+  }
+  
+  /**
+   * 检查键是否存在
+   * @param key 缓存键
+   */
+  has(key: K): boolean {
+    return this.cache.has(key);
+  }
+}
+
+/**
+ * 图像指纹计算函数 - 用于检测相同或相似图像
+ * 
+ * @param imageData 图像数据
+ * @param size 指纹尺寸（默认8x8）
+ * @returns 图像指纹字符串
+ */
+export function calculateImageFingerprint(imageData: ImageData, size: number = 8): string {
+  // 1. 缩小图像到指定尺寸
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  
+  if (!ctx) {
+    return '';
+  }
+  
+  // 创建一个临时canvas来绘制原始imageData
+  const tempCanvas = document.createElement('canvas');
+  tempCanvas.width = imageData.width;
+  tempCanvas.height = imageData.height;
+  const tempCtx = tempCanvas.getContext('2d');
+  
+  if (!tempCtx) {
+    return '';
+  }
+  
+  tempCtx.putImageData(imageData, 0, 0);
+  
+  // 缩小到目标尺寸
+  ctx.drawImage(tempCanvas, 0, 0, imageData.width, imageData.height, 0, 0, size, size);
+  
+  // 2. 转换为灰度
+  const smallImgData = ctx.getImageData(0, 0, size, size);
+  const grayValues = [];
+  
+  for (let i = 0; i < smallImgData.data.length; i += 4) {
+    const r = smallImgData.data[i];
+    const g = smallImgData.data[i + 1];
+    const b = smallImgData.data[i + 2];
+    // 转为灰度: 0.299r + 0.587g + 0.114b
+    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+    grayValues.push(gray);
+  }
+  
+  // 3. 计算平均值
+  const avg = grayValues.reduce((sum, val) => sum + val, 0) / grayValues.length;
+  
+  // 4. 比较每个像素与平均值，生成二进制指纹
+  let fingerprint = '';
+  for (const gray of grayValues) {
+    fingerprint += gray >= avg ? '1' : '0';
+  }
+  
+  return fingerprint;
+}