如何在Zxing JS中裁剪视频帧实现条码扫描？

核心调用方式 #

ZXing JS 的 BrowserMultiFormatReader 支持通过 cropRectangle 参数指定裁剪区域，直接在扫描阶段对视频帧进行裁剪，无需额外处理原始视频流。

具体实现步骤 #

• 初始化阅读器时，配置 cropRectangle 对象，包含裁剪区域的x、y、宽度、高度四个属性，单位为像素。
• 裁剪区域坐标基于视频流的原始分辨率，而非页面DOM元素尺寸，需先获取视频实际分辨率再计算比例。

代码示例 #

假设项目已有基础扫描初始化代码，修改如下：

// 初始化阅读器
const codeReader = new ZXing.BrowserMultiFormatReader();

// 获取视频元素的实际分辨率（规避页面缩放影响）
const videoElement = document.getElementById('video');
const videoWidth = videoElement.videoWidth;
const videoHeight = videoElement.videoHeight;

// 计算裁剪区域：示例为扫描中间50%的区域
const cropWidth = videoWidth * 0.5;
const cropHeight = videoHeight * 0.5;
const cropX = (videoWidth - cropWidth) / 2;
const cropY = (videoHeight - cropHeight) / 2;

// 配置裁剪参数并启动扫描
codeReader.decodeFromVideoElement(
  { cropRectangle: { x: cropX, y: cropY, width: cropWidth, height: cropHeight } },
  videoElement,
  (result, err) => {
    if (result) {
      console.log('扫描结果:', result.text);
    }
  }
);

适配移动端/WebCam的注意事项 #

• 移动端摄像头可能存在镜像或旋转问题，裁剪前确保视频流已正确旋转（可通过 videoElement 的 videoWidth 和 videoHeight 判断横竖屏）。
• 若页面视频元素被CSS缩放，必须用视频原始分辨率计算裁剪区域，不能用DOM元素尺寸。
• 需动态调整裁剪区域时，可在扫描过程中重新调用 decodeFromVideoElement 更新 cropRectangle 参数。

内容的提问来源于stack exchange，提问作者YannickIngenierie