id-scanner-lib 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +173 -0
  2. package/dist/core.d.ts +77 -0
  3. package/dist/id-recognition/data-extractor.d.ts +31 -0
  4. package/dist/id-recognition/id-detector.d.ts +25 -1
  5. package/dist/id-scanner-core.esm.js +10870 -0
  6. package/dist/id-scanner-core.esm.js.map +1 -0
  7. package/dist/id-scanner-core.js +10882 -0
  8. package/dist/id-scanner-core.js.map +1 -0
  9. package/dist/id-scanner-core.min.js +9 -0
  10. package/dist/id-scanner-core.min.js.map +1 -0
  11. package/dist/id-scanner-ocr.esm.js +1625 -0
  12. package/dist/id-scanner-ocr.esm.js.map +1 -0
  13. package/dist/id-scanner-ocr.js +1634 -0
  14. package/dist/id-scanner-ocr.js.map +1 -0
  15. package/dist/id-scanner-ocr.min.js +9 -0
  16. package/dist/id-scanner-ocr.min.js.map +1 -0
  17. package/dist/id-scanner-qr.esm.js +773 -0
  18. package/dist/id-scanner-qr.esm.js.map +1 -0
  19. package/dist/id-scanner-qr.js +782 -0
  20. package/dist/id-scanner-qr.js.map +1 -0
  21. package/dist/id-scanner-qr.min.js +9 -0
  22. package/dist/id-scanner-qr.min.js.map +1 -0
  23. package/dist/id-scanner.js +1954 -94656
  24. package/dist/id-scanner.js.map +1 -1
  25. package/dist/id-scanner.min.js +7 -7
  26. package/dist/id-scanner.min.js.map +1 -1
  27. package/dist/index-umd.d.ts +96 -0
  28. package/dist/index.d.ts +23 -88
  29. package/dist/ocr-module.d.ts +67 -0
  30. package/dist/qr-module.d.ts +68 -0
  31. package/dist/types/core.d.ts +77 -0
  32. package/dist/types/demo/demo.d.ts +14 -0
  33. package/dist/types/id-recognition/data-extractor.d.ts +105 -0
  34. package/dist/types/id-recognition/id-detector.d.ts +100 -0
  35. package/dist/types/id-recognition/ocr-processor.d.ts +64 -0
  36. package/dist/types/index-umd.d.ts +96 -0
  37. package/dist/types/index.d.ts +78 -0
  38. package/dist/types/ocr-module.d.ts +67 -0
  39. package/dist/types/qr-module.d.ts +68 -0
  40. package/dist/types/scanner/barcode-scanner.d.ts +90 -0
  41. package/dist/types/scanner/qr-scanner.d.ts +80 -0
  42. package/dist/types/utils/camera.d.ts +81 -0
  43. package/dist/types/utils/image-processing.d.ts +75 -0
  44. package/dist/types/utils/types.d.ts +65 -0
  45. package/dist/utils/camera.d.ts +18 -13
  46. package/dist/utils/types.d.ts +6 -6
  47. package/package.json +25 -4
  48. package/src/core.ts +138 -0
  49. package/src/id-recognition/data-extractor.ts +97 -0
  50. package/src/id-recognition/id-detector.ts +230 -67
  51. package/src/id-recognition/ocr-processor.ts +145 -27
  52. package/src/id-recognition/ocr-worker.ts +146 -0
  53. package/src/index-umd.ts +240 -0
  54. package/src/index.ts +125 -139
  55. package/src/ocr-module.ts +139 -0
  56. package/src/qr-module.ts +129 -0
  57. package/src/utils/camera.ts +61 -36
  58. package/src/utils/image-processing.ts +204 -0
  59. package/src/utils/performance.ts +208 -0
  60. package/src/utils/resource-manager.ts +198 -0
  61. package/src/utils/types.ts +23 -6
  62. package/src/utils/worker.ts +173 -0
@@ -0,0 +1,773 @@
1
+ import jsQR from 'jsqr';
2
+
3
+ /**
4
+ * @file 相机工具类
5
+ * @description 提供访问和控制设备摄像头的功能
6
+ * @module Camera
7
+ */
8
+ /**
9
+ * 相机工具类
10
+ *
11
+ * 提供访问设备摄像头、获取视频流以及捕获图像帧的功能
12
+ *
13
+ * @example
14
+ * ```typescript
15
+ * // 创建相机实例
16
+ * const camera = new Camera({
17
+ * width: 1280,
18
+ * height: 720,
19
+ * facingMode: 'environment' // 使用后置摄像头
20
+ * });
21
+ *
22
+ * // 初始化相机
23
+ * const videoElement = document.getElementById('video') as HTMLVideoElement;
24
+ * await camera.start(videoElement);
25
+ *
26
+ * // 捕获当前视频帧
27
+ * const imageData = camera.captureFrame();
28
+ *
29
+ * // 使用结束后释放资源
30
+ * camera.stop();
31
+ * ```
32
+ */
33
+ class Camera {
34
+ /**
35
+ * 创建相机实例
36
+ * @param {CameraOptions} [options] - 相机配置选项
37
+ */
38
+ constructor(options = {}) {
39
+ this.options = options;
40
+ this.stream = null;
41
+ this.videoElement = null;
42
+ this.options = {
43
+ width: 640,
44
+ height: 480,
45
+ facingMode: 'environment',
46
+ ...options
47
+ };
48
+ }
49
+ /**
50
+ * 启动摄像头并将视频流绑定到视频元素
51
+ * @param videoElement HTML视频元素
52
+ * @returns Promise<void>
53
+ */
54
+ async start(videoElement) {
55
+ return this.initialize(videoElement);
56
+ }
57
+ /**
58
+ * 停止摄像头并释放资源
59
+ */
60
+ stop() {
61
+ this.release();
62
+ }
63
+ /**
64
+ * 初始化相机,获取视频流并绑定到视频元素
65
+ *
66
+ * @param {HTMLVideoElement} videoElement - 用于显示视频流的视频元素
67
+ * @returns {Promise<void>} 初始化完成的Promise
68
+ * @throws 如果无法访问摄像头,将抛出错误
69
+ */
70
+ async initialize(videoElement) {
71
+ this.videoElement = videoElement;
72
+ try {
73
+ // 构建媒体约束
74
+ const constraints = {
75
+ video: {
76
+ width: { ideal: this.options.width },
77
+ height: { ideal: this.options.height },
78
+ facingMode: this.options.facingMode
79
+ }
80
+ };
81
+ // 获取视频流
82
+ this.stream = await navigator.mediaDevices.getUserMedia(constraints);
83
+ // 绑定到视频元素
84
+ if (this.videoElement) {
85
+ this.videoElement.srcObject = this.stream;
86
+ await new Promise((resolve) => {
87
+ if (this.videoElement) {
88
+ this.videoElement.onloadedmetadata = () => {
89
+ if (this.videoElement) {
90
+ this.videoElement.play().then(() => resolve());
91
+ }
92
+ };
93
+ }
94
+ });
95
+ }
96
+ }
97
+ catch (error) {
98
+ console.error('无法访问摄像头:', error);
99
+ throw new Error('无法访问摄像头。请确保已授予摄像头访问权限,并且摄像头未被其他应用程序占用。');
100
+ }
101
+ }
102
+ /**
103
+ * 捕获当前视频帧
104
+ *
105
+ * @returns {ImageData|null} 视频帧的ImageData对象,如果未初始化则返回null
106
+ */
107
+ captureFrame() {
108
+ if (!this.videoElement) {
109
+ return null;
110
+ }
111
+ // 创建Canvas元素用于捕获视频帧
112
+ const canvas = document.createElement('canvas');
113
+ canvas.width = this.videoElement.videoWidth;
114
+ canvas.height = this.videoElement.videoHeight;
115
+ const context = canvas.getContext('2d');
116
+ if (!context) {
117
+ return null;
118
+ }
119
+ // 将视频内容绘制到Canvas中
120
+ context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
121
+ // 获取ImageData对象
122
+ return context.getImageData(0, 0, canvas.width, canvas.height);
123
+ }
124
+ /**
125
+ * 释放摄像头资源
126
+ */
127
+ release() {
128
+ // 停止视频流的所有轨道
129
+ if (this.stream) {
130
+ this.stream.getTracks().forEach(track => track.stop());
131
+ this.stream = null;
132
+ }
133
+ // 清除视频元素绑定
134
+ if (this.videoElement) {
135
+ this.videoElement.srcObject = null;
136
+ this.videoElement = null;
137
+ }
138
+ }
139
+ }
140
+
141
+ /**
142
+ * @file 二维码扫描模块
143
+ * @description 提供实时二维码扫描和识别功能
144
+ * @module QRScanner
145
+ */
146
+ /**
147
+ * 二维码扫描器类
148
+ *
149
+ * 提供实时扫描和识别摄像头中的二维码的功能
150
+ *
151
+ * @example
152
+ * ```typescript
153
+ * // 创建二维码扫描器
154
+ * const qrScanner = new QRScanner({
155
+ * scanInterval: 100, // 每100ms扫描一次
156
+ * onScan: (result) => {
157
+ * console.log('扫描到二维码:', result);
158
+ * },
159
+ * onError: (error) => {
160
+ * console.error('扫描错误:', error);
161
+ * }
162
+ * });
163
+ *
164
+ * // 启动扫描
165
+ * const videoElement = document.getElementById('video') as HTMLVideoElement;
166
+ * await qrScanner.start(videoElement);
167
+ *
168
+ * // 停止扫描
169
+ * qrScanner.stop();
170
+ * ```
171
+ */
172
+ class QRScanner {
173
+ /**
174
+ * 创建二维码扫描器实例
175
+ *
176
+ * @param {QRScannerOptions} [options] - 扫描器配置选项
177
+ */
178
+ constructor(options = {}) {
179
+ this.options = options;
180
+ this.scanning = false;
181
+ this.scanTimer = null;
182
+ this.options = {
183
+ scanInterval: 200,
184
+ ...options
185
+ };
186
+ this.camera = new Camera();
187
+ }
188
+ /**
189
+ * 启动二维码扫描
190
+ *
191
+ * 初始化相机并开始连续扫描视频帧中的二维码
192
+ *
193
+ * @param {HTMLVideoElement} videoElement - 用于显示相机画面的video元素
194
+ * @returns {Promise<void>} 启动完成的Promise
195
+ * @throws 如果无法访问相机,将通过onError回调报告错误
196
+ */
197
+ async start(videoElement) {
198
+ try {
199
+ await this.camera.initialize(videoElement);
200
+ this.scanning = true;
201
+ this.scan();
202
+ }
203
+ catch (error) {
204
+ if (this.options.onError) {
205
+ this.options.onError(error instanceof Error ? error : new Error(String(error)));
206
+ }
207
+ }
208
+ }
209
+ /**
210
+ * 执行一次二维码扫描
211
+ *
212
+ * 内部方法,捕获当前视频帧并尝试识别其中的二维码
213
+ *
214
+ * @private
215
+ */
216
+ scan() {
217
+ if (!this.scanning)
218
+ return;
219
+ const imageData = this.camera.captureFrame();
220
+ if (imageData) {
221
+ const code = jsQR(imageData.data, imageData.width, imageData.height);
222
+ if (code && this.options.onScan) {
223
+ this.options.onScan(code.data);
224
+ }
225
+ }
226
+ this.scanTimer = window.setTimeout(() => this.scan(), this.options.scanInterval);
227
+ }
228
+ /**
229
+ * 停止二维码扫描
230
+ *
231
+ * 停止扫描循环并释放相机资源
232
+ */
233
+ stop() {
234
+ this.scanning = false;
235
+ if (this.scanTimer) {
236
+ clearTimeout(this.scanTimer);
237
+ this.scanTimer = null;
238
+ }
239
+ this.camera.release();
240
+ }
241
+ }
242
+
243
+ /**
244
+ * @file 图像处理工具类
245
+ * @description 提供图像处理相关的辅助功能
246
+ * @module ImageProcessor
247
+ */
248
+ /**
249
+ * 图像处理工具类
250
+ *
251
+ * 提供常用的图像处理功能,如亮度和对比度调整、灰度转换、图像大小调整等。
252
+ * 这些功能可用于增强图像质量,提高OCR和扫描的识别率。
253
+ *
254
+ * @example
255
+ * ```typescript
256
+ * // 使用图像处理功能增强图像
257
+ * const enhancedImage = ImageProcessor.adjustBrightnessContrast(
258
+ * originalImageData,
259
+ * 15, // 增加亮度
260
+ * 25 // 增加对比度
261
+ * );
262
+ *
263
+ * // 转换为灰度图像
264
+ * const grayImage = ImageProcessor.toGrayscale(originalImageData);
265
+ * ```
266
+ */
267
+ class ImageProcessor {
268
+ /**
269
+ * 将ImageData转换为Canvas元素
270
+ *
271
+ * @param {ImageData} imageData - 要转换的图像数据
272
+ * @returns {HTMLCanvasElement} 包含图像的Canvas元素
273
+ */
274
+ static imageDataToCanvas(imageData) {
275
+ const canvas = document.createElement('canvas');
276
+ canvas.width = imageData.width;
277
+ canvas.height = imageData.height;
278
+ const ctx = canvas.getContext('2d');
279
+ if (ctx) {
280
+ ctx.putImageData(imageData, 0, 0);
281
+ }
282
+ return canvas;
283
+ }
284
+ /**
285
+ * 将Canvas转换为ImageData
286
+ *
287
+ * @param {HTMLCanvasElement} canvas - 要转换的Canvas元素
288
+ * @returns {ImageData|null} Canvas的图像数据,如果获取失败则返回null
289
+ */
290
+ static canvasToImageData(canvas) {
291
+ const ctx = canvas.getContext('2d');
292
+ return ctx ? ctx.getImageData(0, 0, canvas.width, canvas.height) : null;
293
+ }
294
+ /**
295
+ * 调整图像亮度和对比度
296
+ *
297
+ * @param {ImageData} imageData - 要处理的图像数据
298
+ * @param {number} [brightness=0] - 亮度调整值,正值增加亮度,负值降低亮度,范围建议为-100到100
299
+ * @param {number} [contrast=0] - 对比度调整值,正值增加对比度,负值降低对比度,范围建议为-100到100
300
+ * @returns {ImageData} 处理后的图像数据
301
+ */
302
+ static adjustBrightnessContrast(imageData, brightness = 0, contrast = 0) {
303
+ const canvas = this.imageDataToCanvas(imageData);
304
+ const ctx = canvas.getContext('2d');
305
+ if (ctx) {
306
+ const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
307
+ const data = imgData.data;
308
+ // 调整对比度算法
309
+ const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
310
+ for (let i = 0; i < data.length; i += 4) {
311
+ // 红色
312
+ data[i] = this.truncate(factor * (data[i] - 128) + 128 + brightness);
313
+ // 绿色
314
+ data[i + 1] = this.truncate(factor * (data[i + 1] - 128) + 128 + brightness);
315
+ // 蓝色
316
+ data[i + 2] = this.truncate(factor * (data[i + 2] - 128) + 128 + brightness);
317
+ // Alpha不变
318
+ }
319
+ ctx.putImageData(imgData, 0, 0);
320
+ return imgData;
321
+ }
322
+ return imageData;
323
+ }
324
+ /**
325
+ * 确保值在0-255范围内
326
+ *
327
+ * @private
328
+ * @param {number} value - 要截断的值
329
+ * @returns {number} 截断后的值,范围为0-255
330
+ */
331
+ static truncate(value) {
332
+ return Math.min(255, Math.max(0, value));
333
+ }
334
+ /**
335
+ * 将彩色图像转换为灰度图像
336
+ *
337
+ * 灰度转换可以简化图像,提高OCR和条形码识别的准确率
338
+ *
339
+ * @param {ImageData} imageData - 要转换的彩色图像
340
+ * @returns {ImageData} 转换后的灰度图像
341
+ */
342
+ static toGrayscale(imageData) {
343
+ const canvas = this.imageDataToCanvas(imageData);
344
+ const ctx = canvas.getContext('2d');
345
+ if (ctx) {
346
+ const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
347
+ const data = imgData.data;
348
+ for (let i = 0; i < data.length; i += 4) {
349
+ const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
350
+ data[i] = avg; // 红色
351
+ data[i + 1] = avg; // 绿色
352
+ data[i + 2] = avg; // 蓝色
353
+ // Alpha不变
354
+ }
355
+ ctx.putImageData(imgData, 0, 0);
356
+ return imgData;
357
+ }
358
+ return imageData;
359
+ }
360
+ /**
361
+ * 调整图像大小
362
+ *
363
+ * @param {ImageData} imageData - 原图像数据
364
+ * @param {number} newWidth - 新宽度
365
+ * @param {number} newHeight - 新高度
366
+ * @returns {ImageData} 调整大小后的图像数据
367
+ */
368
+ static resize(imageData, newWidth, newHeight) {
369
+ const canvas = document.createElement('canvas');
370
+ canvas.width = newWidth;
371
+ canvas.height = newHeight;
372
+ const ctx = canvas.getContext('2d');
373
+ if (ctx) {
374
+ const tempCanvas = this.imageDataToCanvas(imageData);
375
+ ctx.drawImage(tempCanvas, 0, 0, imageData.width, imageData.height, 0, 0, newWidth, newHeight);
376
+ return ctx.getImageData(0, 0, newWidth, newHeight);
377
+ }
378
+ return imageData;
379
+ }
380
+ /**
381
+ * 降低图像分辨率以提高处理速度
382
+ *
383
+ * 对于OCR和图像分析,降低分辨率可以在保持识别率的同时大幅提升处理速度
384
+ *
385
+ * @param {ImageData} imageData - 原图像数据
386
+ * @param {number} [maxDimension=1000] - 目标最大尺寸(宽或高)
387
+ * @returns {ImageData} 处理后的图像数据
388
+ */
389
+ static downsampleForProcessing(imageData, maxDimension = 1000) {
390
+ const { width, height } = imageData;
391
+ // 如果图像尺寸已经小于或等于目标尺寸,则无需处理
392
+ if (width <= maxDimension && height <= maxDimension) {
393
+ return imageData;
394
+ }
395
+ // 计算缩放比例,保持宽高比
396
+ const scale = maxDimension / Math.max(width, height);
397
+ const newWidth = Math.round(width * scale);
398
+ const newHeight = Math.round(height * scale);
399
+ // 调整图像大小
400
+ return this.resize(imageData, newWidth, newHeight);
401
+ }
402
+ /**
403
+ * 转换图像为Base64格式,方便在Worker线程中传递
404
+ *
405
+ * @param {ImageData} imageData - 原图像数据
406
+ * @returns {string} base64编码的图像数据
407
+ */
408
+ static imageDataToBase64(imageData) {
409
+ const canvas = this.imageDataToCanvas(imageData);
410
+ return canvas.toDataURL('image/jpeg', 0.7); // 使用较低质量的JPEG格式减少数据量
411
+ }
412
+ /**
413
+ * 从Base64字符串还原图像数据
414
+ *
415
+ * @param {string} base64 - base64编码的图像数据
416
+ * @returns {Promise<ImageData>} 还原的图像数据
417
+ */
418
+ static async base64ToImageData(base64) {
419
+ return new Promise((resolve, reject) => {
420
+ const img = new Image();
421
+ img.onload = () => {
422
+ const canvas = document.createElement('canvas');
423
+ canvas.width = img.width;
424
+ canvas.height = img.height;
425
+ const ctx = canvas.getContext('2d');
426
+ if (!ctx) {
427
+ reject(new Error('无法创建Canvas上下文'));
428
+ return;
429
+ }
430
+ ctx.drawImage(img, 0, 0);
431
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
432
+ resolve(imageData);
433
+ };
434
+ img.onerror = () => {
435
+ reject(new Error('图像加载失败'));
436
+ };
437
+ img.src = base64;
438
+ });
439
+ }
440
+ /**
441
+ * 使用Web Worker并行处理图像
442
+ * 此方法将图像分割为多个部分,并行处理以提高性能
443
+ *
444
+ * @param {ImageData} imageData - 原图像数据
445
+ * @param {Function} processingFunction - 处理函数,接收ImageData返回ImageData
446
+ * @param {number} [chunks=4] - 分割的块数
447
+ * @returns {Promise<ImageData>} 处理后的图像数据
448
+ */
449
+ static async processImageInParallel(imageData, processingFunction, chunks = 4) {
450
+ // 如果不支持Worker或图像太小,直接处理
451
+ if (typeof Worker === 'undefined' || imageData.width * imageData.height < 100000) {
452
+ return processingFunction(imageData);
453
+ }
454
+ // 创建结果canvas
455
+ const resultCanvas = document.createElement('canvas');
456
+ resultCanvas.width = imageData.width;
457
+ resultCanvas.height = imageData.height;
458
+ const resultCtx = resultCanvas.getContext('2d');
459
+ if (!resultCtx) {
460
+ throw new Error('无法创建Canvas上下文');
461
+ }
462
+ // 根据图像特性确定分割方向和每块大小
463
+ const isWide = imageData.width > imageData.height;
464
+ const chunkSize = Math.floor((isWide ? imageData.width : imageData.height) / chunks);
465
+ // 创建Worker处理每个块
466
+ const promises = [];
467
+ for (let i = 0; i < chunks; i++) {
468
+ const chunkCanvas = document.createElement('canvas');
469
+ const chunkCtx = chunkCanvas.getContext('2d');
470
+ if (!chunkCtx)
471
+ continue;
472
+ let chunkImageData;
473
+ if (isWide) {
474
+ // 水平分割
475
+ const startX = i * chunkSize;
476
+ const width = (i === chunks - 1) ? imageData.width - startX : chunkSize;
477
+ chunkCanvas.width = width;
478
+ chunkCanvas.height = imageData.height;
479
+ // 复制原图像数据到分块
480
+ const tempCanvas = this.imageDataToCanvas(imageData);
481
+ chunkCtx.drawImage(tempCanvas, startX, 0, width, imageData.height, 0, 0, width, imageData.height);
482
+ chunkImageData = chunkCtx.getImageData(0, 0, width, imageData.height);
483
+ }
484
+ else {
485
+ // 垂直分割
486
+ const startY = i * chunkSize;
487
+ const height = (i === chunks - 1) ? imageData.height - startY : chunkSize;
488
+ chunkCanvas.width = imageData.width;
489
+ chunkCanvas.height = height;
490
+ // 复制原图像数据到分块
491
+ const tempCanvas = this.imageDataToCanvas(imageData);
492
+ chunkCtx.drawImage(tempCanvas, 0, startY, imageData.width, height, 0, 0, imageData.width, height);
493
+ chunkImageData = chunkCtx.getImageData(0, 0, imageData.width, height);
494
+ }
495
+ // 使用Worker处理
496
+ const workerCode = `
497
+ self.onmessage = function(e) {
498
+ const imageData = e.data.imageData;
499
+ const processingFunction = ${processingFunction.toString()};
500
+ const result = processingFunction(imageData);
501
+ self.postMessage({ result, index: e.data.index }, [result.data.buffer]);
502
+ }
503
+ `;
504
+ const blob = new Blob([workerCode], { type: 'application/javascript' });
505
+ const workerUrl = URL.createObjectURL(blob);
506
+ const worker = new Worker(workerUrl);
507
+ const promise = new Promise((resolve) => {
508
+ worker.onmessage = function (e) {
509
+ resolve(e.data);
510
+ worker.terminate();
511
+ URL.revokeObjectURL(workerUrl);
512
+ };
513
+ // 传输数据
514
+ worker.postMessage({
515
+ imageData: chunkImageData,
516
+ index: i
517
+ }, [chunkImageData.data.buffer]);
518
+ });
519
+ promises.push(promise);
520
+ }
521
+ // 等待所有Worker完成并组合结果
522
+ const results = await Promise.all(promises);
523
+ // 按索引排序结果
524
+ results.sort((a, b) => a.index - b.index);
525
+ // 将处理后的块绘制到结果canvas
526
+ for (let i = 0; i < results.length; i++) {
527
+ const { result } = results[i];
528
+ const tempCanvas = this.imageDataToCanvas(result);
529
+ if (isWide) {
530
+ const startX = i * chunkSize;
531
+ resultCtx.drawImage(tempCanvas, startX, 0);
532
+ }
533
+ else {
534
+ const startY = i * chunkSize;
535
+ resultCtx.drawImage(tempCanvas, 0, startY);
536
+ }
537
+ }
538
+ return resultCtx.getImageData(0, 0, imageData.width, imageData.height);
539
+ }
540
+ }
541
+
542
+ /**
543
+ * @file 条形码扫描模块
544
+ * @description 提供实时条形码扫描和识别功能
545
+ * @module BarcodeScanner
546
+ */
547
+ /**
548
+ * 条形码扫描器类
549
+ *
550
+ * 提供实时扫描和识别摄像头中的条形码的功能
551
+ * 注意:当前实现是简化版,实际项目中建议集成专门的条形码识别库如ZXing或Quagga.js
552
+ *
553
+ * @example
554
+ * ```typescript
555
+ * // 创建条形码扫描器
556
+ * const barcodeScanner = new BarcodeScanner({
557
+ * scanInterval: 100, // 每100ms扫描一次
558
+ * onScan: (result) => {
559
+ * console.log('扫描到条形码:', result);
560
+ * },
561
+ * onError: (error) => {
562
+ * console.error('扫描错误:', error);
563
+ * }
564
+ * });
565
+ *
566
+ * // 启动扫描
567
+ * const videoElement = document.getElementById('video') as HTMLVideoElement;
568
+ * await barcodeScanner.start(videoElement);
569
+ *
570
+ * // 停止扫描
571
+ * barcodeScanner.stop();
572
+ * ```
573
+ */
574
+ class BarcodeScanner {
575
+ /**
576
+ * 创建条形码扫描器实例
577
+ *
578
+ * @param {BarcodeScannerOptions} [options] - 扫描器配置选项
579
+ */
580
+ constructor(options = {}) {
581
+ this.options = options;
582
+ this.scanning = false;
583
+ this.scanTimer = null;
584
+ this.options = {
585
+ scanInterval: 200,
586
+ ...options
587
+ };
588
+ this.camera = new Camera();
589
+ }
590
+ /**
591
+ * 启动条形码扫描
592
+ *
593
+ * 初始化相机并开始连续扫描视频帧中的条形码
594
+ *
595
+ * @param {HTMLVideoElement} videoElement - 用于显示相机画面的video元素
596
+ * @returns {Promise<void>} 启动完成的Promise
597
+ * @throws 如果无法访问相机,将通过onError回调报告错误
598
+ */
599
+ async start(videoElement) {
600
+ try {
601
+ await this.camera.initialize(videoElement);
602
+ this.scanning = true;
603
+ this.scan();
604
+ }
605
+ catch (error) {
606
+ if (this.options.onError) {
607
+ this.options.onError(error instanceof Error ? error : new Error(String(error)));
608
+ }
609
+ }
610
+ }
611
+ /**
612
+ * 执行一次条形码扫描
613
+ *
614
+ * 内部方法,捕获当前视频帧并尝试识别其中的条形码
615
+ *
616
+ * @private
617
+ */
618
+ scan() {
619
+ if (!this.scanning)
620
+ return;
621
+ const imageData = this.camera.captureFrame();
622
+ if (imageData) {
623
+ try {
624
+ // 图像预处理,提高识别率
625
+ const enhancedImage = ImageProcessor.adjustBrightnessContrast(ImageProcessor.toGrayscale(imageData), 10, // 亮度
626
+ 20 // 对比度
627
+ );
628
+ // 这里实际项目中可以集成第三方条形码扫描库
629
+ // 如 ZXing 或 QuaggaJS
630
+ // 简化实现,这里仅为示例
631
+ this.detectBarcode(enhancedImage);
632
+ }
633
+ catch (error) {
634
+ console.error('条形码扫描错误:', error);
635
+ }
636
+ }
637
+ this.scanTimer = window.setTimeout(() => this.scan(), this.options.scanInterval);
638
+ }
639
+ /**
640
+ * 条形码检测方法
641
+ *
642
+ * 注意:这是一个简化实现,实际需要集成专门的条形码识别库
643
+ *
644
+ * @private
645
+ * @param {ImageData} imageData - 要检测条形码的图像数据
646
+ */
647
+ detectBarcode(imageData) {
648
+ // 这里应集成条形码识别库
649
+ // 如 ZXing 或 QuaggaJS
650
+ // 简化示例,实际项目中请替换为真实实现
651
+ console.log('正在扫描条形码...');
652
+ // 模拟找到条形码
653
+ if (Math.random() > 0.95) {
654
+ const mockResult = '6901234567890'; // 模拟条形码结果
655
+ if (this.options.onScan) {
656
+ this.options.onScan(mockResult);
657
+ }
658
+ }
659
+ }
660
+ /**
661
+ * 停止条形码扫描
662
+ *
663
+ * 停止扫描循环并释放相机资源
664
+ */
665
+ stop() {
666
+ this.scanning = false;
667
+ if (this.scanTimer) {
668
+ clearTimeout(this.scanTimer);
669
+ this.scanTimer = null;
670
+ }
671
+ this.camera.release();
672
+ }
673
+ }
674
+
675
+ /**
676
+ * @file 二维码和条形码扫描模块
677
+ * @description 包含二维码和条形码扫描功能
678
+ * @module IDScannerQR
679
+ * @version 1.0.0
680
+ * @license MIT
681
+ */
682
+ /**
683
+ * 扫描模块类
684
+ *
685
+ * 提供独立的二维码和条形码扫描功能
686
+ */
687
+ class ScannerModule {
688
+ /**
689
+ * 构造函数
690
+ * @param options 配置选项
691
+ */
692
+ constructor(options = {}) {
693
+ this.options = options;
694
+ this.scanMode = null;
695
+ this.videoElement = null;
696
+ this.camera = new Camera(options.cameraOptions);
697
+ this.qrScanner = new QRScanner({
698
+ ...options.qrScannerOptions,
699
+ onScan: this.handleQRScan.bind(this)
700
+ });
701
+ this.barcodeScanner = new BarcodeScanner({
702
+ ...options.barcodeScannerOptions,
703
+ onScan: this.handleBarcodeScan.bind(this)
704
+ });
705
+ }
706
+ /**
707
+ * 启动二维码扫描
708
+ * @param videoElement HTML视频元素
709
+ */
710
+ async startQRScanner(videoElement) {
711
+ this.stop(); // 确保先停止可能正在运行的扫描
712
+ this.videoElement = videoElement;
713
+ this.scanMode = 'qr';
714
+ await this.camera.start(videoElement);
715
+ this.qrScanner.start(videoElement);
716
+ }
717
+ /**
718
+ * 启动条形码扫描
719
+ * @param videoElement HTML视频元素
720
+ */
721
+ async startBarcodeScanner(videoElement) {
722
+ this.stop(); // 确保先停止可能正在运行的扫描
723
+ this.videoElement = videoElement;
724
+ this.scanMode = 'barcode';
725
+ await this.camera.start(videoElement);
726
+ this.barcodeScanner.start(videoElement);
727
+ }
728
+ /**
729
+ * 停止扫描
730
+ */
731
+ stop() {
732
+ if (this.scanMode === 'qr') {
733
+ this.qrScanner.stop();
734
+ }
735
+ else if (this.scanMode === 'barcode') {
736
+ this.barcodeScanner.stop();
737
+ }
738
+ if (this.videoElement) {
739
+ this.camera.stop();
740
+ }
741
+ this.scanMode = null;
742
+ }
743
+ /**
744
+ * 处理二维码扫描结果
745
+ */
746
+ handleQRScan(result) {
747
+ if (this.options.onQRCodeScanned) {
748
+ this.options.onQRCodeScanned(result);
749
+ }
750
+ }
751
+ /**
752
+ * 处理条形码扫描结果
753
+ */
754
+ handleBarcodeScan(result) {
755
+ if (this.options.onBarcodeScanned) {
756
+ this.options.onBarcodeScanned(result);
757
+ }
758
+ }
759
+ /**
760
+ * 处理错误
761
+ */
762
+ handleError(error) {
763
+ if (this.options.onError) {
764
+ this.options.onError(error);
765
+ }
766
+ else {
767
+ console.error('ScannerModule error:', error);
768
+ }
769
+ }
770
+ }
771
+
772
+ export { BarcodeScanner, Camera, QRScanner, ScannerModule };
773
+ //# sourceMappingURL=id-scanner-qr.esm.js.map