本文将分享如何在微信小程序中集成 Dynamsoft Barcode Reader JS WebAssembly SDK，实现高性能的1D/2D多码扫描功能。

一、技术选型：为什么选择 Dynamsoft Barcode Reader

1.1 需求背景

微信小程序虽然提供了原生的 wx.scanCode API，但在某些场景下存在明显的局限性：

• 无法自定义扫码界面和交互逻辑
• 识别精度和速度受限于系统实现
• 无法满足复杂的扫码需求（如批量扫码、特定格式识别等）

因此，我们需要一个能够在小程序环境中运行的高性能扫码引擎。

1.2 Dynamsoft Barcode Reader 的优势

Dynamsoft Barcode Reader 是一款企业级的条码识别 SDK，其 WebAssembly 版本特别适合在微信小程序中使用：

• 高精度识别：支持多种条码格式，识别率高
• 高性能：基于 WebAssembly，性能接近原生
• 丰富的配置：提供多种识别模板和参数调优选项
• 跨平台：同一套代码可在不同平台运行

SDK包含：

BarcodeReader.js 
dbr.worker.js
dynamsoft-barcode-reader-bundle-ml-simd.js
dynamsoft-barcode-reader-bundle-ml-simd.wasm.br

二、初步集成：从 WASM 加载开始

2.1 微信小程序的 WASM 支持

微信小程序提供了 WXWebAssembly.instantiate API 来加载 WASM 模块。与标准的 Web 环境不同，小程序有一些特殊的限制：

• 不支持直接使用 WebAssembly 对象，必须使用 WXWebAssembly
• WASM 文件必须放在小程序包内，不能动态下载
• 主包大小限制为 2MB，总包大小限制为 20MB

2.2 WASM 文件的加载

在 Dynamsoft Barcode Reader 中，我们需要正确配置 WASM 文件的路径：

await DBR.BarcodeReader.loadWasm("workers/dbr.worker.js", "subpackages/dbr/wasm/dynamsoft-barcode-reader-bundle-ml-simd.wasm.br");

三、分包加载：解决主包大小限制

Dynamsoft Barcode Reader 的 WASM 文件压缩（.wasm.br）后小于2MB。将 WASM 文件放入分包目录 subpackages/dbr/ 中，这样就不会占用主包的空间。

{
  "subpackages": [
    {
      "root": "subpackages/dbr",
      "name": "dbr",
      "pages": [
        "pages/scan/index",
        "pages/camera-scan/index",
        "pages/file-scan/index"
      ]
    }
  ]
}

3.1 延迟初始化策略

由于 WASM 文件位于分包中，如果主包启动时（app.js 的 onLaunch）立即尝试加载 WASM，可能会因为分包尚未下载完成而失败。

最佳实践是采用延迟初始化：

1. 在 app.js 中定义 initSDK 方法，但不立即调用。
2. 在分包页面的 onLoad 生命周期中调用 app.initSDK()。

// app.js
initSDK: async function () {
  if (this.globalData.wasmInitialized) return;
  // 加载 WASM
  await DBR.BarcodeReader.loadWasm("workers/dbr.worker.js", "subpackages/dbr/wasm/dynamsoft-barcode-reader-bundle-ml-simd.wasm.br");
  // 初始化 License
  await DBR.BarcodeReader.initLicense("YOUR_LICENSE");
  this.globalData.wasmInitialized = true;
}

// subpackages/dbr/pages/scan/index.js
onLoad: async function() {
  await getApp().initSDK();
}

四、视频帧数据传输和处理

通过onCameraFrame接口获取视频帧数据，然后发送到worker中进行处理。针对iOS, Android和HarmonyOS，需要使用不同的方法。capture接口封装了worker以及帧数据处理逻辑。

const listener = context.onCameraFrame(async (frame) => {
      if (!this.data.isDetecting || this.isProcessing) return;

      this.isProcessing = true;
      try {
          const app = getApp();
          if (app.globalData.BarcodeReader) {
              this.currentFrameSize = { width: frame.width, height: frame.height };
              
              let captureOptions = {
                  width: frame.width,
                  height: frame.height,
                  stride: frame.width * 4,
                  format: 10
              };

              let transfer = false;
              if (this.data.isAndroid) {
                  captureOptions.bytes = frame.data;
                  transfer = true;
              } else if (this.data.isHarmony) {
                  captureOptions.bytes = frame.data;
                  transfer = false;
              } else if (this.data.isIOS) {
                  captureOptions.bytes = null;
              } else {
                  captureOptions.bytes = frame.data;
              }

              try {
                  const result = await app.globalData.BarcodeReader.capture(captureOptions, this.dynamsoftTemplate, transfer);
                  this.handleDynamsoftResult({ captureResult: result });
              } catch (e) {
                  console.error("Capture failed:", e);
                  this.isProcessing = false;
              }
          } else {
              this.isProcessing = false;
          }
      } catch (ex) {
          console.error(ex);
          if (this.data.isDetecting) {
              this.setData({ scanResult: "Error: " + (ex.message || ex) });
          }
          this.isProcessing = false;
      }
  });
  const app = getApp();

  listener.start({
      worker: app.globalData.BarcodeReader.worker
  });

• iOS上可以通过getCameraFrameData在worker中获取帧数据。这样就不需要通过前端获取帧数据，提升性能。
• Android上可以通过postMessage(buf, [buf])传输ArrayBuffer，避免数据复制，实现零拷贝。
• HarmonyOS上支持比较差，只能通过postMessage(buf)拷贝数据的方式传输。

五、源码获取

需要源码，可以联系cnsupport@damingsoft.com，或者微信hzdamingsoft。

六、小程序演示

1. TWAIN不会将用户界面与设备的驱动程序分开。这样很难通过网络访问图像捕获设备。而SANE则可以轻松地在纯命令行环境中使用。
2. SANE内置了对各种扫描仪的支持，而使用TWAIN必须下载并安装单独的驱动程序。

有一些在Windows上运行SANE的尝试。但大多数做法仍然需要Linux环境。借助Windows的Linux子系统（WSL），这一过程变得更加容易。

继续阅读以了解如何做到这一点。

将USB设备连接到WSL

1. 安装Linux WSL发行版后，将其版本设置为2以使用WSL 2。

   PS C:\Users\admin> wsl -l  -v
     NAME            STATE           VERSION
     Debian          Running         1
   PS C:\Users\admin> wsl --set-version Debian 2
   

2. 在Windows上安装USBIPD。可以在GitHub上找到它的安装程序。

3. 使用USBIPD将USB设备连接到WSL。

   PS C:\Users\admin> usbipd list # list USB devices connected to the host
   PS C:\Users\admin> usbipd bind --busid <busid> # share the device. You can find the bus id in the previous step
   PS C:\Users\admin> usbipd attach --wsl --busid <busid> # attach the device to WSL
   

4. 在Linux中运行lsusb，可以在列表中找到USB设备。

   $ lsusb
   Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
   Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
   Bus 002 Device 003: ID 04c5:132e Fujitsu, Ltd fi-7160
   

使用SANE扫描文档

1. 安装SANE。这里，我们的系统是Debian。

   $ sudo apt install sane-utils
   

2. 使用scanimage命令行工具列出扫描仪和扫描文档。

   $ scanimage -L
   device 'fujitsu:fi-7160:151477' is a FUJITSU fi-7160 scanner
   $ scanimage -o scanned.png # save the document to an image
   

在浏览器中扫描文档

接下来，我们将使用Dynamic Web TWAIN SDK创建一个网页，在Windows上的浏览器中扫描文档，并使用WSL中运行的SANE后端。

1. 在WSL上，安装Dynamic Web TWAIN服务。可以在它的npm包上找到安装程序。

   sudo dpkg -i DynamicWebTWAINServiceSetup.deb
   

   该服务将作为HTTP服务器在网页和扫描仪之间进行通信。您可以通过访问http://127.0.0.1:18625来检查它是否已安装。

   每次系统启动时，还需要启动两个进程。以下是启动它们的命令：

   nohup "/opt/dynamsoft/Dynamic Web TWAIN Service 19/DynamsoftScanning" gtkproxy &
   nohup "/opt/dynamsoft/Dynamic Web TWAIN Service 19/DynamsoftScanningMgr" &
   

   可以自己创建一个服务来启动它们。

2. 使用以下代码编写一个网页来扫描文档并另存为PDF：

   <!DOCTYPE html>
   <html>
   <head>
     <title>Scan via SANE on Windows</title>
     <script src="https://cdn.jsdelivr.net/npm/dwt@latest/dist/dynamsoft.webtwain.min.js"></script>
   </head>
   <body>
     <button onclick="AcquireImage();">Scan</button>
     <button onclick="SaveAsPDF();">Save as PDF</button>
     <div id="dwtcontrolContainer"></div>
     <script type="text/javascript">
       Dynamsoft.DWT.Host = "local.dynamsoft.com";
       Dynamsoft.DWT.ResourcesPath = "https://cdn.jsdelivr.net/npm/dwt@latest/dist";
       //You need to set the service installer location here since the installer's size exceeds jsdelivr's limit.
       //You'd better host the installers in your own environment.
       Dynamsoft.DWT.ServiceInstallerLocation = 'https://unpkg.com/dwt/dist/dist/';
       Dynamsoft.DWT.ProductKey = 'LICENSE-KEY';
       Dynamsoft.DWT.Containers = [{ ContainerId: 'dwtcontrolContainer', Width: 270, Height: 350 }];
       window.onload = function () {
         Dynamsoft.DWT.Load();
       };
       var DWTObject;
       Dynamsoft.DWT.RegisterEvent("OnWebTwainReady", function() {
         // dwtcontrolContainer is the id of the DIV to create the WebTwain instance in.
         DWTObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
       });
       function AcquireImage() {
         if (DWTObject) {
           DWTObject.SelectSourceAsync().then(function(){
             return DWTObject.AcquireImageAsync({
               PixelType: Dynamsoft.DWT.EnumDWT_PixelType.TWPT_RGB,
               Resolution: 200,
               IfCloseSourceAfterAcquire: true
             });
           }).catch(function (exp) {
             alert(exp.message);
           });
         }
       }
   
       function SaveAsPDF(){
         if (DWTObject) {
           DWTObject.ConvertToBlob(
             DWTObject.SelectAllImages(),
             Dynamsoft.DWT.EnumDWT_ImageType.IT_PDF,
             function (result, indices, type) {
               console.log(result.size);
               DownloadBlobAsFile(result, "scanned_document.pdf");
             },
             function (errorCode, errorString) {
               console.log(errorString);
             },
           );
         }
       }
   
       function DownloadBlobAsFile(blob, fileName) {
         var link = document.createElement('a');
         link.href = window.URL.createObjectURL(blob);
         link.download = fileName;
         link.click();
       }
     </script>
   </body>
   </html>
   

现在，我们可以使用SANE在Windows上扫描文档了。

源代码

https://github.com/tony-xlh/Dynamic-Web-TWAIN-samples/tree/main/Windows-SANE

使用HTML元素嵌入PDF文件

我们可以使用HTML的内置元素通过指定PDF的URL来嵌入PDF文件。

1. 使用iframe。（在线演示）

   <iframe src="ddv-sample.pdf" width="100%" height="600px"></iframe>
   

2. 使用embed。（在线演示）

   <embed src="ddv-sample.pdf" type="application/pdf" width="100%" height="600px" />
   

3. 使用object。（在线演示）

   <object data="ddv-sample.pdf" type="application/pdf" width="100%" height="600px">
       <p>Your browser does not support PDFs.
           <a href="ddv-sample.pdf">Download the PDF</a>.
       </p>
   </object>
   

推荐使用iframe。它的兼容性最好。

在桌面上，以上三个标签都会使用浏览器的内置PDF查看器打开PDF。在移动浏览器上，行为各不相同。在Android上，浏览器会提供下载链接。在iOS上，浏览器将呈现PDF的第一页。

将PDF转换为图像或HTML以嵌入PDF文件

我们可以使用Apache PDFBox等库预先将PDF文件转换为图像，或者使用pdf2htmlex转换PDF为HTML，以将其嵌入网页中。

转换成图像质量可能会下降，也可能增大体积，带来更高的网络开销。此外，文本也无法进行搜索或复制。

转换为HTML效果更好。它可以使查看PDF就像查看普通网页一样。但无法进行PDF编辑和注释等操作。（转换后的示例）

使用PDF JavaScript库嵌入PDF文件

我们可以使用第三方PDF库来嵌入PDF文件。它有以下好处：

1. 我们可以为不同的浏览器和平台提供统一的体验。
2. 我们可以定制用户界面。
3. 我们可以使用更多功能，如PDF注释和PDF编辑。
4. 出于安全考虑，我们可以阻止下载PDF文件。

当然，由于渲染发生在客户端，因此对客户端有更高的要求。

有几个库可供使用：

1. PDF.js。（在线演示）
2. PDFium.js。（在线演示）

PDF.js和PDFium.js提供了PDF渲染功能，但它们没有一个像样的查看器。

Dynamsoft Document Viewer使用PDFium作为引擎，并提供功能齐全的UI来查看和编辑PDF。更推荐使用它来嵌入PDF。

Dynamsoft Document Viewer的在线演示

总结

以下是对这三种方法的总结。

源代码

欢迎下载源代码并尝试使用：

https://github.com/tony-xlh/Embed-PDF-in-HTML

有不同的API可以访问文档扫描仪，下面是一张对比表格。

我们将使用这些API从命令行扫描文档。由于只有SANE提供了命令行工具，而其他没有，因此我们需要编写命令行工具来使用其他API。

SANE

SANE有一个命令行工具scanimage。以下是它的基本用法：

1. 列出连接的扫描仪。

   scanimage -L
   

2. 使用指定的扫描仪获取图像。

   scanimage -d "scanner name" -o out.png
   

我们将要编写的其他API的命令行工具将具有相同的用法。

TWAIN

TWAIN接口是用C++实现的，并有一个Python库。我们将使用Python编写命令行工具。

以下是关键部分的代码：

1. 导入库。

   import twain
   

2. 列出扫描仪。

   with twain.SourceManager() as sm:
       for source in sm.source_list:
           print(source)
   

3. 用扫描仪扫描。

   from PIL import Image
   from io import BytesIO
   with twain.SourceManager() as sm:
      src = sm.open_source("scanner_name")
      src.request_acquire(show_ui=False, modal_ui=False)
      (handle, remaining_count) = src.xfer_image_natively()
      bmp_bytes = twain.dib_to_bm_file(handle)
      img = Image.open(BytesIO(bmp_bytes), formats=["bmp"])
      img.save("output_path")
   

WIA

WIA提供API和COM的调用方式。我们将使用Python和COM来使用WIA。

以下是关键部分的代码：

1. 导入库。

   from PIL import Image
   import pythoncom
   from win32com.client import Dispatch
   

2. 列出扫描仪。

   manager = Dispatch("WIA.DeviceManager")
   devices = manager.DeviceInfos
   print("Available scanners:")
   for i in range(1, devices.Count + 1):
       device = devices.Item(i)
       # Check if the device is a scanner (Type = 1)
       if device.Type == 1:
           print(f"  Name: {device.Properties['Name'].Value}")
           print(f"  ID: {device.DeviceID}")
           print(f"  Description: {device.Properties['Description'].Value}")
           print("  ----------------")
   

3. 用扫描仪扫描。

   wia = Dispatch("WIA.CommonDialog")
   manager = Dispatch("WIA.DeviceManager")
   
   devices = manager.DeviceInfos
   selected_device = None
   scanner_name = "target scanner name"
   for i in range(1, devices.Count + 1):
       device = devices.Item(i)
       if device.Type == 1 and device.Properties['Name'].Value == scanner_name:
           selected_device = device.Connect() # Select the scanner by name
           break
   
   img = None
   if selected_device is None:
       img = wia.ShowAcquireImage()  # Show scanning dialog with scanner selection
   else:
       img = wia.ShowTransfer(selected_device.Items[1])  # Transfer the scanned image using the selected scanner
   
   #save the image
   pil_img = Image.fromarray(img)
   pil_img.save(output_path)
   

eSCL

eSCL是一个RESTful接口。网络扫描仪通过Bonjour进行广播，客户端可以找到它们并发送HTTP请求来扫描文档。我们也将使用Python编写扫描工具。

1. 导入库。

   from zeroconf import ServiceBrowser, Zeroconf
   from requests import get as requests_get, post as requests_post
   

2. 通过检测类型为_uscan_tcp.local.的Bonjour服务来列出扫描仪。

   class ESCLScannerListener:
       def __init__(self):
           self.scanners = []
   
       def add_service(self, zeroconf, type, name):
           info = zeroconf.get_service_info(type, name)
           if info:
               addresses = ["%s:%d" % (addr, info.port) for addr in info.addresses]
               scanner_info = {
                   'name': name,
                   'type': type,
                   'addresses': info.addresses,
                   'port': info.port,
                   'properties': info.properties
               }
               self.scanners.append(scanner_info)
   
       def remove_service(self, zeroconf, type, name):
           print(f"Scanner removed: {name}")
   
   def discover_escl_scanners(timeout=2):
       zeroconf = Zeroconf()
       listener = ESCLScannerListener()
       browser = ServiceBrowser(zeroconf, "_uscan._tcp.local.", listener)
       print(f"Discovering ESCL scanners for {timeout} seconds...")
       time.sleep(timeout)
       zeroconf.close()
       return listener.scanners
   

3. 用扫描仪扫描。扫描配置以XML表示。

   def scan(scanner_address, output_path="scanned.jpg"):
       xml = '''<scan:ScanSettings xmlns:scan="http://schemas.hp.com/imaging/escl/2011/05/03" xmlns:dd="http://www.hp.com/schemas/imaging/con/dictionaries/1.0/" xmlns:dd3="http://www.hp.com/schemas/imaging/con/dictionaries/2009/04/06" xmlns:fw="http://www.hp.com/schemas/imaging/con/firewall/2011/01/05" xmlns:scc="http://schemas.hp.com/imaging/escl/2011/05/03" xmlns:pwg="http://www.pwg.org/schemas/2010/12/sm"><pwg:Version>2.1</pwg:Version><scan:Intent>Photo</scan:Intent><pwg:ScanRegions><pwg:ScanRegion><pwg:Height>3300</pwg:Height><pwg:Width>2550</pwg:Width><pwg:XOffset>0</pwg:XOffset><pwg:YOffset>0</pwg:YOffset></pwg:ScanRegion></pwg:ScanRegions><pwg:InputSource>Platen</pwg:InputSource><scan:DocumentFormatExt>image/jpeg</scan:DocumentFormatExt><scan:XResolution>300</scan:XResolution><scan:YResolution>300</scan:YResolution><scan:ColorMode>Grayscale8</scan:ColorMode><scan:CompressionFactor>25</scan:CompressionFactor><scan:Brightness>1000</scan:Brightness><scan:Contrast>1000</scan:Contrast></scan:ScanSettings>'''
   
       resp = requests_post('http://{0}/eSCL/ScanJobs'.format(scanner_address), data=xml, headers={'Content-Type': 'text/xml'})
       if resp.status_code == 201:
           url = '{0}/NextDocument'.format(resp.headers['Location'])
           r = requests_get(url)
           with open(output_path,'wb') as f:
               f.write(r.content)
   

ICA

使用Image Capture API稍微复杂点，我们将创建一个Swift命令行项目来实现该工具。

以下是关键部分的代码：

1. 创建叫ScannerManager的类以列出扫描仪。

   class ScannerManager: NSObject, ICDeviceBrowserDelegate {
       private var deviceBrowser: ICDeviceBrowser!
       private var scanners: [ICScannerDevice] = []
       private var currentScanner: ICScannerDevice?
       private var scanCompletionHandler: ((Result<URL, Error>) -> Void)?
       private var targetURL: URL?
   
       override init() {
           super.init()
           setupDeviceBrowser()
       }
   
       private func setupDeviceBrowser() {
           deviceBrowser = ICDeviceBrowser()
           deviceBrowser.delegate = self
           let mask = ICDeviceTypeMask(rawValue:
                       ICDeviceTypeMask.scanner.rawValue |
                       ICDeviceLocationTypeMask.local.rawValue |
                       ICDeviceLocationTypeMask.bonjour.rawValue |
                       ICDeviceLocationTypeMask.shared.rawValue)
           deviceBrowser.browsedDeviceTypeMask = mask!
           deviceBrowser.start()
       }
   
       func listScanners(completion: @escaping ([ICScannerDevice]) -> Void) {
           DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
               completion(self.scanners)
           }
       }
   
       // MARK: - ICDeviceBrowserDelegate
   
       func deviceBrowser(_ browser: ICDeviceBrowser, didAdd device: ICDevice, moreComing: Bool) {
           guard let scanner = device as? ICScannerDevice else { return }
           scanners.append(scanner)
       }
   
       func deviceBrowser(_ browser: ICDeviceBrowser, didRemove device: ICDevice, moreGoing: Bool) {
           if let index = scanners.firstIndex(where: { $0 == device }) {
               scanners.remove(at: index)
           }
       }
   }
   

2. 让这个类继承ICScannerDeviceDelegate并添加与扫描相关的函数。

   func device(_ device: ICDevice, didCloseSessionWithError error: (any Error)?) {
       print("did close")
   }
   
   func didRemove(_ device: ICDevice) {
       print("did remove")
   }
   
   func device(_ device: ICDevice, didOpenSessionWithError error: (any Error)?) {
       print("did open")
       DispatchQueue.main.asyncAfter(deadline: .now() + 1) { [weak self] in
           guard let self = self else { return }
           guard let scanner = currentScanner else { return }
           scanner.transferMode = .fileBased
           scanner.downloadsDirectory = URL(fileURLWithPath: NSTemporaryDirectory())
           scanner.documentName = "scan"
           scanner.documentUTI = kUTTypeJPEG as String
           if let functionalUnit = scanner.selectedFunctionalUnit as? ICScannerFunctionalUnit {
               let resolutionIndex = functionalUnit.supportedResolutions.integerGreaterThanOrEqualTo(300) ?? functionalUnit.supportedResolutions.last
               if let resolutionIndex = resolutionIndex ?? functionalUnit.supportedResolutions.last {
                   functionalUnit.resolution = resolutionIndex
               }
   
               let a4Width: CGFloat = 210.0 // mm
               let a4Height: CGFloat = 297.0 // mm
               let widthInPoints = a4Width * 72.0 / 25.4 // convert to point
               let heightInPoints = a4Height * 72.0 / 25.4
   
               functionalUnit.scanArea = NSMakeRect(0, 0, widthInPoints, heightInPoints)
               functionalUnit.pixelDataType = .RGB
               functionalUnit.bitDepth = .depth8Bits
   
               scanner.requestScan()
           }
       }
   }
   
   // MARK: - ICScannerDeviceDelegate
   
   func scannerDevice(_ scanner: ICScannerDevice, didScanTo url: URL) {
       print("did scan to")
       print(url.absoluteString)
       guard let targetURL = targetURL else {
           scanCompletionHandler?(.failure(NSError(domain: "ScannerError", code: -2, userInfo: [NSLocalizedDescriptionKey: "No target URL set"])))
           return
       }
       do {
           try FileManager.default.moveItem(at: url, to: targetURL)
           scanCompletionHandler?(.success(targetURL))
       } catch {
           scanCompletionHandler?(.failure(error))
       }
   }
   
   // MARK: - Scan Operations
   
   func startScan(scanner: ICScannerDevice, outputPath: String, completion: @escaping (Result<URL, Error>) -> Void) {
       currentScanner = scanner
       scanCompletionHandler = completion
       targetURL = URL(fileURLWithPath: outputPath)
   
       scanner.delegate = self
       scanner.requestOpenSession()
   }
   

Dynamic Web TWAIN RESTful API

Dynamic Web TWAIN提供RESTful API功能，支持使用TWAIN、WIA、SANE、ICA和eSCL等API扫描文档。您可以在这个页面上找到它的详细信息。

以下是使用Dynamic Web TWAIN的RESTful API的好处：

1. 提供了调用主流的扫描API的统一接口，支持控制扫描仪的各种功能，支持不同平台。
2. 通过网络共享扫描仪，这样移动设备也可以访问文档扫描仪。
3. 支持各种编程语言去使用文档扫描功能。

以下是使用Python版封装的关键部分的代码：

1. 导入库并声明有关变量。可以在此处申请许可证。

   from dynamsoftservice import ScannerController, ScannerType
   license_key = "LICENSE-KEY"
   host = "http://127.0.0.1:18622"
   scannerController = ScannerController()
   

2. 列出扫描仪。

   def list_scanners():
       """List all available scanners"""
       scanners = scannerController.getDevices(host)
       return scanners
   

3. 用扫描仪扫描。

   def scan_document(output_path="scan.png", scanner_name=None):
       """
       Scan a document using Web TWAIN service and save as image file
   
       Parameters:
           output_path: Path to save scanned image
           scanner_name: Name of specific scanner to use (None shows dialog)
       """
       scanners = list_scanners()
       selectedScanner = None
       if scanner_name is not None:
           for scanner in scanners:
               if scanner['name'] == scanner_name:
                   selectedScanner = scanner
                   break
   
       parameters = {
           "license": license_key
       }
   
       if selectedScanner is not None:
           parameters["device"] = selectedScanner["device"]
   
       parameters["config"] = {
           "IfShowUI": False,
           "PixelType": 2,
           "Resolution": 200,
           "IfFeederEnabled": False,
           "IfDuplexEnabled": False,
       }
   
       job = scannerController.createJob(host, parameters)
       print(job)
       if "jobuid" in job:
           job_id = job["jobuid"]
           stream = scannerController.getImageStreams(host,job_id)[0]
           with open(output_path,"wb") as f:
               f.write(stream)
               f.close()
       return output_path
   

除了RESTful API，Dynamic Web TWAIN还提供了一个JavaScript库，该库具有专用的文档查看器、完整的文档扫描API包装、本地缓存和各种补充API，以提供基于浏览器的文档扫描解决方案。访问其在线demo进行试用。

源代码

可以在GitHub上获取源代码，了解命令行工具的具体使用说明：

https://github.com/tony-xlh/document-scanner-cli/

外部链接

• TWAIN
• Windows Image Acquisition (WIA)
• SANE
• Image Capture
• Mopria eSCL

使用手机扫描文档并打印方便快捷。在本文中，我们将编写一个支持在手机浏览器中扫描和打印文档的网页应用。

使用Dynamsoft的以下SDK：

• Dynamsoft Document Viewer：它提供了一套用于文档捕获、编辑和保存为PDF的查看器。
• Dynamsoft Document Normalizer：提供文档边缘检测功能。

这个Web应用可以捕获文档图像，调整图像大小，并进行漂白以供打印。

图像捕获：

扫描的图像（裁剪的）：

用于打印的黑白图像：

在线demo

新建HTML文件

创建一个新的HTML文件，内容如下。

<!DOCTYPE html>
<html>
<head>
  <title>Document Scanning via Camera</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <style>
    #container {
      max-width: 100%;
      height: 480px;
    }
  </style>
</head>
<body>
  <h2>Document Scanning via Camera</h2>
  <label>
    Camera:
    <select id="select-camera"></select>
  </label>
  <label>
    Resolution:
    <select id="select-resolution">
      <option value="640x480">640x480</option>
      <option value="1280x720">1280x720</option>
      <option value="1920x1080" selected>1920x1080</option>
      <option value="3840x2160">3840x2160</option>
    </select>
  </label>
  <button onclick="startScanning();">Start</button>
  <div id="container"></div>
  <script type="text/javascript">
  </script>
</body>
</html>

添加依赖项

1. 添加Dynamsoft Document Viewer。

   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css">
   

2. 添加Dynamsoft Document Normalizer（通过引入Capture Vision bundle）。

   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-bundle@2.6.1000/dist/dcv.bundle.js"></script>
   

初始化SDK

使用许可证初始化SDK。可以在此处申请许可证。

async function init(){
  // Initialize license
  await Dynamsoft.License.LicenseManager.initLicense(
    "LICENSE-KEY",
    true
  );
  // Initialize DDN
  Dynamsoft.Core.CoreModule.loadWasm(["DDN"]);
  Dynamsoft.DDV.Core.loadWasm();
  // Initialize DDV
  await Dynamsoft.DDV.Core.init();
}

扫描文档

Dynamsoft Document Viewer为文档扫描提供了多个组件。

我们将使用其Capture Viewer通过摄像头捕获文档，使用其Perspective Viewer调整检测到的边界，并使用其Edit Viewer查看、编辑和保存扫描的文档。

Capture Viewer：

Perspective Viewer：

Edit Viewer：

以下是用于设置这些组件的代码。

1. 初始化Capture Viewer并将其绑定到一个容器。

   let captureViewer = new Dynamsoft.DDV.CaptureViewer({
       container: "container",
       uiConfig: captureViewerUiConfig,
       viewerConfig: {
           acceptedPolygonConfidence: 60,
           enableAutoDetect: false,
       }
   });
   

2. 初始化Perspective Viewer并将其绑定到一个容器。

   let perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({
       container: "container",
       groupUid: captureViewer.groupUid,
       uiConfig: perspectiveUiConfig,
       viewerConfig: {
           scrollToLatest: true,
       }
   });
   perspectiveViewer.hide();
   

3. 初始化Edit Viewer并将其绑定到一个容器。

   editViewer = new Dynamsoft.DDV.EditViewer({
       container: "container",
       groupUid: captureViewer.groupUid,
       uiConfig: editViewerUiConfig
   });
   editViewer.hide();
   

4. 使用config对象配置UI。

   const captureViewerUiConfig = {
       type: Dynamsoft.DDV.Elements.Layout,
       flexDirection: "column",
       children: [
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-capture-viewer-header-mobile",
               children: [
                   {
                       type: "CameraResolution",
                       className: "ddv-capture-viewer-resolution",
                   },
                   Dynamsoft.DDV.Elements.Flashlight,
               ],
           },
           Dynamsoft.DDV.Elements.MainView,
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-capture-viewer-footer-mobile",
               children: [
                   Dynamsoft.DDV.Elements.AutoDetect,
                   Dynamsoft.DDV.Elements.AutoCapture,
                   {
                       type: "Capture",
                       className: "ddv-capture-viewer-captureButton",
                   },
                   {
                       // Bind click event to "ImagePreview" element
                       // The event will be registered later.
                       type: Dynamsoft.DDV.Elements.ImagePreview,
                       events:{
                           click: "showPerspectiveViewer"
                       }
                   },
                   Dynamsoft.DDV.Elements.CameraConvert,
               ],
           },
       ],
   };
   
   
   const perspectiveUiConfig = {
       type: Dynamsoft.DDV.Elements.Layout,
       flexDirection: "column",
       children: [
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-perspective-viewer-header-mobile",
               children: [
                   {
                       // Add a "Back" button in perspective viewer's header and bind the event to go back to capture viewer.
                       // The event will be registered later.
                       type: Dynamsoft.DDV.Elements.Button,
                       className: "ddv-button-back",
                       events:{
                           click: "backToCaptureViewer"
                       }
                   },
                   Dynamsoft.DDV.Elements.Pagination,
                   {   
                       // Bind event for "PerspectiveAll" button to show the edit viewer
                       // The event will be registered later.
                       type: Dynamsoft.DDV.Elements.PerspectiveAll,
                       events:{
                           click: "showEditViewer"
                       }
                   },
               ],
           },
           Dynamsoft.DDV.Elements.MainView,
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-perspective-viewer-footer-mobile",
               children: [
                   Dynamsoft.DDV.Elements.FullQuad,
                   Dynamsoft.DDV.Elements.RotateLeft,
                   Dynamsoft.DDV.Elements.RotateRight,
                   Dynamsoft.DDV.Elements.DeleteCurrent,
                   Dynamsoft.DDV.Elements.DeleteAll,
               ],
           },
       ],
   };
   
   const editViewerUiConfig = {
       type: Dynamsoft.DDV.Elements.Layout,
       flexDirection: "column",
       className: "ddv-edit-viewer-mobile",
       children: [
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-edit-viewer-header-mobile",
               children: [
                   {
                       // Add a "Back" buttom to header and bind click event to go back to the perspective viewer
                       // The event will be registered later.
                       type: Dynamsoft.DDV.Elements.Button,
                       className: "ddv-button-back",
                       events:{
                           click: "backToPerspectiveViewer"
                       }
                   },
                   Dynamsoft.DDV.Elements.Pagination,
                   {
                       type: Dynamsoft.DDV.Elements.Button,
                       className: "ddv-button-menu",
                       events:{
                           click: "menu"
                       }
                   }
               ],
           },
           Dynamsoft.DDV.Elements.MainView,
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-edit-viewer-footer-mobile",
               children: [
                   Dynamsoft.DDV.Elements.DisplayMode,
                   Dynamsoft.DDV.Elements.RotateLeft,
                   Dynamsoft.DDV.Elements.Crop,
                   Dynamsoft.DDV.Elements.Filter,
                   Dynamsoft.DDV.Elements.Undo,
                   Dynamsoft.DDV.Elements.Delete,
                   Dynamsoft.DDV.Elements.Load,
                   Dynamsoft.DDV.Elements.AnnotationSet,
               ],
           },
       ],
   };
   

5. 添加一个辅助函数来切换这些Viewer。

   // Define a function to control the viewers' visibility
   const switchViewer = (c,p,e) => {
     captureViewer.hide();
     perspectiveViewer.hide();
     editViewer.hide();
   
     if(c) {
       captureViewer.show();
     } else {
       captureViewer.stop();
     }
   
     if(p) perspectiveViewer.show();
     if(e) editViewer.show();
   };
   

6. 为用来控制工作流的按钮注册事件。

   // Register an event in `perspectiveViewer` to go back the capture viewer
   perspectiveViewer.on("backToCaptureViewer",() => {
       switchViewer(1,0,0);
       captureViewer.play().catch(err => {alert(err.message)});
   });
   
   // Register an event in `perspectiveViewer` to show the edit viewer
   perspectiveViewer.on("showEditViewer",() => {
       switchViewer(0,0,1)
   });
   // Register an event in `editViewer` to go back to the perspective viewer
   editViewer.on("backToPerspectiveViewer",() => {
       switchViewer(0,1,0);
   });
   

7. 定义文档检测处理程序，使用Dynamsoft Document Normalizer进行边缘检测。

   // Configure document boundaries function
   await initDocDetectModule(Dynamsoft.DDV, Dynamsoft.CVR);
   
   async function initDocDetectModule(DDV, CVR) {
     const router = await CVR.CaptureVisionRouter.createInstance();
     class DDNNormalizeHandler extends DDV.DocumentDetect {
       async detect(image, config) {
         if (!router) {
           return Promise.resolve({
             success: false
           });
         };
   
         let width = image.width;
         let height = image.height;
         let ratio = 1;
         let data;
   
         if (height > 720) {
           ratio = height / 720;
           height = 720;
           width = Math.floor(width / ratio);
           data = compress(image.data, image.width, image.height, width, height);
         } else {
           data = image.data.slice(0);
         }
   
   
         // Define DSImage according to the usage of DDN
         const DSImage = {
           bytes: new Uint8Array(data),
           width,
           height,
           stride: width * 4, //RGBA
           format: 10 // IPF_ABGR_8888
         };
   
         // Use DDN normalized module
         const results = await router.capture(DSImage, 'DetectDocumentBoundaries_Default');
   
         // Filter the results and generate corresponding return values
         if (results.items.length <= 0) {
           return Promise.resolve({
             success: false
           });
         };
   
         const quad = [];
         results.items[0].location.points.forEach((p) => {
           quad.push([p.x * ratio, p.y * ratio]);
         });
   
         const detectResult = this.processDetectResult({
           location: quad,
           width: image.width,
           height: image.height,
           config
         });
         return Promise.resolve(detectResult);
       }
     }
     DDV.setProcessingHandler('documentBoundariesDetect', new DDNNormalizeHandler())
   }
   
   //compress the video frames
   function compress(
       imageData,
       imageWidth,
       imageHeight,
       newWidth,
       newHeight,
   ) {
     let source = null;
     try {
         source = new Uint8ClampedArray(imageData);
     } catch (error) {
         source = new Uint8Array(imageData);
     }
   
     const scaleW = newWidth / imageWidth;
     const scaleH = newHeight / imageHeight;
     const targetSize = newWidth * newHeight * 4;
     const targetMemory = new ArrayBuffer(targetSize);
     let distData = null;
   
     try {
         distData = new Uint8ClampedArray(targetMemory, 0, targetSize);
     } catch (error) {
         distData = new Uint8Array(targetMemory, 0, targetSize);
     }
   
     const filter = (distCol, distRow) => {
         const srcCol = Math.min(imageWidth - 1, distCol / scaleW);
         const srcRow = Math.min(imageHeight - 1, distRow / scaleH);
         const intCol = Math.floor(srcCol);
         const intRow = Math.floor(srcRow);
   
         let distI = (distRow * newWidth) + distCol;
         let srcI = (intRow * imageWidth) + intCol;
   
         distI *= 4;
         srcI *= 4;
   
         for (let j = 0; j <= 3; j += 1) {
             distData[distI + j] = source[srcI + j];
         }
     };
   
     for (let col = 0; col < newWidth; col += 1) {
         for (let row = 0; row < newHeight; row += 1) {
             filter(col, row);
         }
     }
   
     return distData;
   }
   

8. 使用所选摄像头和指定的分辨率启动文档扫描工作流。

   async function startScanning(){
     let selectedCamera = cameras[document.getElementById("select-camera").selectedIndex];
     await captureViewer.selectCamera(selectedCamera.deviceId);
     let selectedResolution = document.getElementById("select-resolution").selectedOptions[0].value;
     let width = parseInt(selectedResolution.split("x")[0]);
     let height = parseInt(selectedResolution.split("x")[1]);
     captureViewer.play({
       resolution: [width,height],
     }).catch(err => {
       alert(err.message)
     });
   }
   

调整图像大小

扫描的文档图像的尺寸可能不符合标准比例，例如A4的210毫米x297毫米。

可以使用Canvas调整图像的大小。

let pageWidth = 210; //mm
let pageHeight = 297; //mm
let DPI = 300;
let pageWidthPx = pageWidth * DPI / 25.4; //convert to pixel
let pageHeightPx = pageHeight * DPI / 25.4;
let docImageBlob = (await editViewer.currentDocument.getPageData(pageUid)).display.data;
let img = document.createElement("img");
img.onload = async function(){
  let resizedDocBlob = await resizeImage(img,docWidthPx,docHeightPx);
  await editViewer.currentDocument.updatePage(pageUid, resizedDocBlob);
};
img.src = URL.createObjectURL(docImageBlob);

function resizeImage(image, width, height) {
  return new Promise((resolve, reject) => {
    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, width, height);
    canvas.toBlob(blob => {
      resolve(blob);
    });
  });
}

在某些情况下，扫描的文件较小，比如名片，然后我们希望将其打印在一张A4纸上。这时，我们可以先创建一个空白页面，然后在其上添加调整好大小的文档图像。

let docWidth = 89; //mm
let docHeight = 51; //mm
let pageWidth = 210; //mm
let pageHeight = 297; //mm
let DPI = 300;
let pageWidthPx = pageWidth * DPI / 25.4; //convert to pixel
let pageHeightPx = pageHeight * DPI / 25.4;
let docWidthPx = docWidth * DPI / 25.4;
let docHeightPx = docHeight * DPI / 25.4;
let pageBlob = await createEmptyPage(pageWidthPx,pageHeightPx);
let docImageBlob = (await editViewer.currentDocument.getPageData(pageUid)).display.data;
let img = document.createElement("img");
img.onload = async function(){
  let resizedDocBlob = await resizeImage(img,docWidthPx,docHeightPx);
  await editViewer.currentDocument.updatePage(pageUid, pageBlob);
  let newPageData = await editViewer.currentDocument.getPageData(pageUid);
  let ratio = newPageData.cropBox.width / newPageData.display.width;
  const rect = {
    x: 50,
    y: 50,
    width: docWidthPx * ratio,
    height: docHeightPx * ratio
  };
  const options = {
    x: rect.x,
    y: rect.y,
    width: rect.width,
    height: rect.height,
    stamp: resizedDocBlob
  };
  const stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, "stamp", options); //insert the document image as an annotation so that we can move it around
}
img.src = URL.createObjectURL(docImageBlob);

function createEmptyPage(width,height){
  return new Promise((resolve, reject) => {
    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,width,height);
    canvas.toBlob(blob => {
      resolve(blob);
    });  
  })
}

应用图像滤镜

还需要漂白图像以便打印。我们可以使用Dynamsoft Document Viewer的Edit Viewer应用图像滤镜。

下面是设置图像滤镜的代码：

// Configure image filter feature which is in edit viewer
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());

还可以定义自己的图像滤镜。可以查看此博客以了解更多信息。

保存为PDF

使用指定的页面类型将文档另存为PDF：

HTML：

<label>
  Page Size:
  <select id="page-size-select">
    <option value="page/default">Default</option>
    <option value="page/a4">A4</option>
    <option value="page/a3">A3</option>
    <option value="page/letter">Letter</option>
  </select>
</label>

JavaScript：

async function downloadAsPDF(){
  let pageSize = document.getElementById("page-size-select").selectedOptions[0].value;
  const pdfSettings = {
    compression: "pdf/jpeg",
    pageType: pageSize
  };
  const blob = await editViewer.currentDocument.saveToPdf(pdfSettings);
  downloadBlob(blob,"document.pdf");
};

function downloadBlob(blob,filename){
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
}

打印文档

使用连接的打印机打印PDF文档。

在手机上，我们主要使用无线打印。

在iOS设备上，我们可以使用AirPrint。

在安卓设备上，我们可以使用Mopria。

源代码

欢迎下载源代码并尝试使用。

https://github.com/tony-xlh/scan-and-print-document-javascript/

vCard又名VCF（“虚拟联系人文件”），是电子名片的文件格式标准。以下是vCard文件内容的一个示例：

BEGIN:VCARD
VERSION:4.0
FN:Simon Perreault
N:Perreault;Simon;;;ing. jr,M.Sc.
BDAY:--0203
GENDER:M
EMAIL;TYPE=work:simon.perreault@viagenie.ca
END:VCARD

vCard可通过电子邮件、聊天应用、NFC或网络链接等方式进行分享。不过更方便的方法是扫描二维码。例如用iPhone的相机应用扫描以下二维码，会提示添加联系人。

在本文中，我们将构建一个用于生成vCard二维码的HTML页面，以及另一个基于Dynamsoft Barcode Reader SDK扫描二维码的页面。我们自己编写一个扫描vCard的应用的好处是，可以与Salesforce和Dynamics 365等CRM系统集成，方便管理联系人。

演示视频：

生成vCard二维码

我们将使用两个第三方库：

• vCard creator，用于vCard生成
• qrcode generator用于生成二维码

1. 创建一个新的HTML文件并引用上述库。

   <!DOCTYPE html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>vCard QR Code Generator</title>
     <style>
     </style>
     <script type="text/javascript" src="qrcode.js"></script>
     <script type="module">
       import VCard from 'https://cdn.skypack.dev/vcard-creator'
       window.VCard = VCard;
     </script>
   </head>
   <html>
   <body>
     <div id="app">
       <h2>vCard QR Code Generator</h2>
     </div>
     <script>
     </script>
   </body>
   </html>
   

2. 创建一个表单来输入联系人信息。

   <div class="form">
     <label>
       First name:
       <input type="text" id="firstName"/>
     </label>
     <label>
       Last name:
       <input type="text" id="lastName"/>
     </label>
     <label>
       Phone:
       <input type="text" id="phone"/>
     </label>
     <label>
       Email:
       <input type="text" id="email"/>
     </label>
     <label>
       Company:
       <input type="text" id="company"/>
     </label>
     <label>
       Job title:
       <input type="text" id="jobTitle"/>
     </label>
     <label>
       Website:
       <input type="text" id="website"/>
     </label>
     <button id="generateButton">Generate</button>
   </div>
   

3. 使用输入的信息生成二维码。

   <div id="placeHolder"></div>
   <script>
   document.getElementById("generateButton").addEventListener("click",generateQRCode);
   function generateQRCode(){
     const card = new VCard()
     const firstName = document.getElementById("firstName").value;
     const lastName = document.getElementById("lastName").value;
     const phone = document.getElementById("phone").value;
     const company = document.getElementById("company").value;
     const jobTitle = document.getElementById("jobTitle").value;
     const website = document.getElementById("website").value;
     const email = document.getElementById("email").value;
     card.addName(lastName, firstName, "", "", "")
       .addCompany(company)
       .addJobtitle(jobTitle)
       .addEmail(email)
       .addPhoneNumber(phone, 'WORK')
       .addURL(website)
     const vcf = card.toString();
     console.log(vcf);
     generateQR(vcf);
   }
   function generateQR(content){
     try {
       var typeNumber = 0;
       var errorCorrectionLevel = 'L';
       var qr = qrcode(typeNumber, errorCorrectionLevel);
       qr.addData(content);
       qr.make();
       var placeHolder = document.getElementById('placeHolder');
       placeHolder.innerHTML = qr.createSvgTag();  
     } catch (error) {
       alert(error);
     }
   }
   </script>
   

4. 我们还可以使用现有的vcf文件生成二维码。

   <button id="generateWithExistingButton">Generate with an existing vcf file</button>
   <input style="display:none;" type="file" id="file" onchange="loadFromFile();" accept=".vcf"/>
   <script>
   document.getElementById("generateWithExistingButton").addEventListener("click",function(){
     document.getElementById("file").click();
   });
   
   function loadFromFile(){
     let fileInput = document.getElementById("file");
     let files = fileInput.files;
     if (files.length == 0) {
       return;
     }
     let file = files[0];
     fileReader = new FileReader();
     fileReader.onload = function(e){
       generateQR(e.target.result);
     };
     fileReader.onerror = function () {
       console.warn('oops, something went wrong.');
     };
     fileReader.readAsText(file);
   }
   </script>
   

请注意，一个二维码只能包含约2KB的数据。如果需要传输更多数据，可以尝试动态二维码的方法。

扫描vCard二维码

接下来，创建一个页面来扫描vCard二维码。

新建HTML文件

创建一个包含以下内容的新HTML文件：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vCard QR Code Scanner</title>
  <style>
  h2 {
    text-align: center;
  }

  #app {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #cameraView {
    width: 100%;
    height: 60vh;
  }
  </style>
</head>
<html>
<body>
  <div id="app">
    <h2>vCard Scanner</h2>
    <button id="startScanBtn">Start Scanning</button>
    <button id="readFromImageBtn">Read from an Image</button>
    <input id="fileInput" type="file" style="display:none;"/>
    <div id="status">Loading...</div>
    <div id="cameraView"></div>
    <div id="result"></div>
  </div>
</body>
</html>

添加Dynamsoft Barcode Reader

添加下面的代码以引入Dynamsoft Barcode Reader：

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2000/dist/dbr.bundle.js"></script>

然后，初始化Dynamsoft Barcode Reader。

1. 初始化许可证。可以在此处申请许可证。

   Dynamsoft.License.LicenseManager.initLicense("LICENSE-KEY");
   

2. 加载WASM文件。

   Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
   

3. 创建capture vision router实例以调用Dynamsoft Barcode Reader。

   let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
   

打开摄像头扫描

1. 初始化Camera Enhancer并将其组件绑定到一个容器。

   let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
   let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
   document.querySelector("#cameraView").append(cameraView.getUIElement());
   

2. 使用Camera Enhancer作为capture vision router的输入，这样它就可以从摄像头获取帧来读取条形码。

   cvRouter.setInput(cameraEnhancer);
   

3. 添加结果接收器以接收扫描结果。

   cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
     displayResults(result);
   }});
   
   function displayResults(result){
     if (result.barcodeResultItems.length > 0) {
       let container = document.getElementById("result");
       let item = result.barcodeResultItems[0];
       console.log(item);
     }
   }
   

4. 单击扫描按钮后开始扫描。

   let templateName = "ReadSingleBarcode"
   await cameraEnhancer.open();
   await cvRouter.startCapturing(templateName);
   

解析vCard

接下来，解析vCard的文本并显示联系人信息。

<!-- https://github.com/Heymdall/vcard/ -->
<script type="text/javascript" src="vcf.js"></script>
<script>
function formatedContactInfo(barcodeText) {
  try {
    let parsed = parse(barcodeText);
    let presetKeys = {"fn":"Full name","org":"Organization","title":"Job Title","url":"URL","tel":"Tel","email":"Email"};
    let str = "";
    for (let index = 0; index < Object.keys(presetKeys).length; index++) {
      const key = Object.keys(presetKeys)[index];
      const value = presetKeys[key];
      if (key in parsed) {
        let appendedValue = "";
        let valueArray = parsed[key];
        valueArray.forEach(valueObject => {
          appendedValue = appendedValue + valueObject.value + "\n";
        });
        str = str + value + ": " +appendedValue.trim() + "\n";
      }
    }
    vCardContent = barcodeText;
    document.getElementsByClassName("buttons")[0].removeAttribute("hidden");
    return str;
  } catch (error) {
    return "Invalid vCard."
  }
}
</script>

下载为VCF文件

我们可以将vCard下载为.vcf文件。它可以通过系统的联系人应用程序打开。

function downloadText(){
  let filename = 'scanned.vcf';
  let link = document.createElement('a');
  link.style.display = 'none';
  link.setAttribute('target', '_blank');
  link.setAttribute('href', 'data:text/vcard;charset=utf-8,' + encodeURIComponent(vCardContent));
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

读取图像中的二维码

除了实时扫描，我们还可以读取图像中的vCard二维码。

添加用于选择图像文件的事件。选择图像后，使用capture方法识别其中的条码。

document.getElementById("readFromImageBtn").addEventListener("click",function(){
  if (initialized) {
    document.getElementById("fileInput").click();
  }else{
    alert("Please wait for the initialization.");
  }
});
document.getElementById("fileInput").addEventListener("change",async function(){
  let files = document.getElementById("fileInput").files;
  if (files.length>0) {
    let file  = files[0];
    let result = await cvRouter.capture(file,templateName);
    displayResults(result);
  }
})

好了，demo已经编写好了。

源代码

获取源代码来自己试用一下吧：

• 生成器：https://github.com/tony-xlh/online-vcard-qr-code-generator
• 扫描器：https://github.com/tony-xlh/vcard-qr-code-scanner

例如，如果我们将以下带阴影的二维码用固定阈值进行二值化，部分二维码内容将丢失，导致无法读取。

对于这种情况，我们可以使用自适应阈值二值化来获得理想的结果。这种方法会根据像素的邻近像素来计算每个像素的阈值。

在本文中，我们将基于HTML5 Canvas使用JavaScript中实现自适应阈值图像二值化。我们还将探讨如何使用Dynamsoft Barcode Reader执行此操作。

在线demo

新建HTML文件

使用以下内容创建一个新的HTML文件，该文件可以选择本地图像并显示。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adaptive Thresholding</title>
  <style>
  .imageContainer {
    overflow: auto;
    max-width: 360px;
  }

  .imageContainer img{
    width: 100%;
  }

  #imageHidden {
    display: none;
  }
  </style>
</head>
<html>
<body>
  <div id="app">
    <h2>Adaptive Thresholding</h2>
    <button id="loadFileButton">Load a File</button>
    <input style="display:none;" type="file" id="file" onchange="loadImageFromFile();" accept=".jpg,.jpeg,.png,.bmp" />
    <button id="processButton">Process</button>
    <div id="status"></div>
    <div class="imageContainer">
      <img id="image"/>
      <img id="imageHidden"/>
    </div>
    <pre id="barcodeResult"></pre>
  </div>
  <script>
  document.getElementById("loadFileButton").addEventListener("click",function(){
    document.getElementById("file").click();
  })
  function loadImageFromFile(){
    let fileInput = document.getElementById("file");
    let files = fileInput.files;
    if (files.length == 0) {
      return;
    }
    let file = files[0];
    fileReader = new FileReader();
    fileReader.onload = function(e){
      document.getElementById("image").src = e.target.result;
      document.getElementById("imageHidden").src = e.target.result;
    };
    fileReader.onerror = function () {
      console.warn('oops, something went wrong.');
    };
    fileReader.readAsDataURL(file);
  }
  </script>
</body>
</html>

使用自适应阈值将图像转换为黑白

接下来，用自适应阈值将图像转换为黑白图像。

1. 将图像绘制到Canvas上并获取其图像数据。

   const cvs = document.createElement("canvas");
   const image = document.getElementById("imageHidden");
   cvs.width = image.naturalWidth;
   cvs.height = image.naturalHeight;
   const ctx = cvs.getContext("2d");
   ctx.drawImage(image, 0, 0);
   const imageData = ctx.getImageData(0,0,cvs.width,cvs.height)
   

2. 遍历像素，根据相邻像素计算阈值，并据此修改其像素值。它需要两个额外的参数：块大小和一个常量C。

   function adaptiveThreshold(imageData, blockSize, C) {
     const width = imageData.width;
     const height = imageData.height;
     const data = imageData.data;
     const output = new ImageData(width, height);
     const outputData = output.data;
   
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {
         let sum = 0;
         let count = 0;
   
         //local mean
         for (let dy = -blockSize; dy <= blockSize; dy++) {
           for (let dx = -blockSize; dx <= blockSize; dx++) {
             const nx = x + dx;
             const ny = y + dy;
             if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
               const idx = (ny * width + nx) * 4;
               sum += data[idx]; //use the red channel as the grayscale value
               count++;
             }
           }
         }
   
         const threshold = (sum / count) - C;
         const idx = (y * width + x) * 4;
         const pixelValue = data[idx];
   
         // binarize
         outputData[idx] = outputData[idx + 1] = outputData[idx + 2] = pixelValue > threshold ? 255 : 0;
         outputData[idx + 3] = 255; // Alpha channel
       }
     }
     return output;
   }
   

3. 将更新后的图像数据放回Canvas中，并显示处理后的图像。

   let blockSize = 31;
   let C = 10;
   let newImageData = adaptiveThreshold(ctx.getImageData(0,0,cvs.width,cvs.height),blockSize,C);
   ctx.putImageData(newImageData,0,0);
   document.getElementById("image").src = cvs.toDataURL("image/jpeg");
   

提高运行效率

上述实现的计算复杂度为O(N*k *k)。N代表像素数，k代表块大小。

我们可以使用积分图将复杂度降低到O(N)，代码如下：

function adaptiveThresholdWithIntegralImage(imageData, blockSize, C) {
  const width = imageData.width;
  const height = imageData.height;
  const data = imageData.data;
  const output = new ImageData(width, height);
  const outputData = output.data;

  const integral = computeIntegralImage(data, width, height);

  const halfBlock = Math.floor(blockSize / 2);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const x1 = Math.max(x - halfBlock, 0);
      const y1 = Math.max(y - halfBlock, 0);
      const x2 = Math.min(x + halfBlock, width - 1);
      const y2 = Math.min(y + halfBlock, height - 1);

      const area = (x2 - x1 + 1) * (y2 - y1 + 1);
      const sum = getAreaSum(integral, width, x1, y1, x2, y2);
      const threshold = (sum / area) - C;

      const idx = (y * width + x) * 4;
      const pixelValue = data[idx];
      outputData[idx] = outputData[idx + 1] = outputData[idx + 2] = pixelValue > threshold ? 255 : 0;
      outputData[idx + 3] = 255; // Alpha channel
    }
  }
  return output;
}

function computeIntegralImage(data, width, height) {
  const integral = new Uint32Array(width * height);

  for (let y = 0; y < height; y++) {
    let sum = 0;
    for (let x = 0; x < width; x++) {
      const idx = (y * width + x) * 4;
      sum += data[idx];
      integral[y * width + x] = (y > 0 ? integral[(y - 1) * width + x] : 0) + sum;
    }
  }

  return integral;
}

function getAreaSum(integral, width, x1, y1, x2, y2) {
  const a = x1 > 0 && y1 > 0 ? integral[(y1 - 1) * width + (x1 - 1)] : 0;
  const b = y1 > 0 ? integral[(y1 - 1) * width + x2] : 0;
  const c = x1 > 0 ? integral[y2 * width + (x1 - 1)] : 0;
  const d = integral[y2 * width + x2];
  return d - b - c + a;
}

处理上面的示例图像的时间可以从2000ms缩短到8ms。

Dynamsoft Barcode Reader中的自适应阈值处理

Dynamsoft Barcode Reader会使用自适应阈值法处理图像来读取条码。

以下是通过它的中间结果接收器获取二值化图像的代码。

let router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
const intermediateResultReceiver = new Dynamsoft.CVR.IntermediateResultReceiver();
intermediateResultReceiver.onBinaryImageUnitReceived = (result, info) => {
  displayBinarizedImage(result)
};
const intermediateResultManager = router.getIntermediateResultManager();
intermediateResultManager.addResultReceiver(intermediateResultReceiver);
const result = await router.capture(image,"ReadSingleBarcode"); //start image processing

我们可以通过更新它的JSON模板的BinarizationMode部分来修改自适应阈值的参数。

{
"BinarizationMode":
  {
    "BinarizationThreshold": -1,
    "BlockSizeX": 0,
    "BlockSizeY": 0,
    "EnableFillBinaryVacancy": 1,
    "GrayscaleEnhancementModesIndex": -1,
    "Mode": "BM_LOCAL_BLOCK",
    "MorphOperation": "Close",
    "MorphOperationKernelSizeX": -1,
    "MorphOperationKernelSizeY": -1,
    "MorphShape": "Rectangle",
    "ThresholdCompensation": 10
  }
}

源代码

可以在以下仓库中找到所有代码和在线演示：

https://github.com/tony-xlh/adaptive-thresholding-javascript

演示视频：

新建项目

打开Android Studio，创建一个Java语言的新项目。

添加依赖项

1. 添加UVCCamera库。

   1. 下载以下aar，并将其放在app/libs文件夹中。

      • libuvccamera.aar
      • usbCameraCommon.aar

   2. 在settings.gradle中，添加以下行：

      dependencyResolutionManagement {
          repositories {
              google()
              mavenCentral()
              maven { url 'https://raw.github.com/saki4510t/libcommon/master/repository/' }
              flatDir {
                  dirs 'libs'
              }
          }
      }
      

   3. 在应用的build.gradle中，添加以下几行：

      dependencies {
          implementation fileTree(dir: 'libs', include: ['*.aar','*.jar'])
          implementation("com.serenegiant:common:1.5.20") {
              exclude module: 'support-v4'
          }
      }
      

   4. 此外可能还需要在gradle.properties中启用Jetifier。

      android.enableJetifier=true
      

2. 添加Dynamsoft SDK。

   1. 在settings.gradle中，添加以下行：

      dependencyResolutionManagement {
          repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
          repositories {
              maven {
                  url "https://download2.dynamsoft.com/maven/aar"
              }
          }
      }
      

   2. 在应用的build.gradle中，添加以下几行：

      dependencies {
          implementation "com.dynamsoft:dynamsoftcapturevisionbundle:2.6.1002"
          implementation 'com.dynamsoft:dynamsoftmrz:3.4.20'
      }
      

打开USB摄像头

让我们执行以下操作以打开连接的USB摄像头。

添加控件

添加用于预览相机的UVCCameraTextureView和用于选择和打开相机的ImageButton。

XML：

<com.serenegiant.widget.UVCCameraTextureView
        android:id="@+id/camera_view"
        android:layout_width="407dp"
        android:layout_height="720dp"
        android:layout_centerInParent="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="16dp"
    android:background="@android:color/transparent"
    android:scaleType="fitCenter"
    android:src="@android:drawable/ic_menu_camera"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

在MainActivity中：

private CameraViewInterface mUVCCameraView;
private ImageButton mCameraButton;
@Override
protected void onCreate(final Bundle savedInstanceState) {
    //......
    mCameraButton = findViewById(R.id.imageButton);
    final View view = findViewById(R.id.camera_view);
    mUVCCameraView = (CameraViewInterface)view;
}