Question

我有一个视频和画布元素，像这样：

<video id="video" width="640" height="480"></video>
<canvas id="canvas" width="640" height="480"></canvas>

我想做的是从网络摄像头中解码PDF417条码。

以下是获得使用网络摄像头许可的代码：

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.srcObject = stream;
        video.play();
    });
}

这是我尝试使用相机捕获条形码并对其进行解码的地方：

canvas_context.drawImage(video, 0, 0, 640, 480);

try {

    var source = new ZXing.BitmapLuminanceSource(canvas_context, video);

    var binarizer = new ZXing.Common.HybridBinarizer(source);
    var bitmap = new ZXing.BinaryBitmap(binarizer);

    console.log(JSON.stringify(ZXing.PDF417.PDF417Reader.decode(bitmap, null, false), null, 4));

} catch (err) {

    console.log(err);

}

但是我遇到此错误：

无法在'CanvasRenderingContext2D'上执行'getImageData'：值不是'long'类型的。

在这一行：

var source = new ZXing.BitmapLuminanceSource(canvas_context, video);

哪个调用此方法：

ZXing.BitmapLuminanceSource = function (bitmap, w, h) {

  var debug = typeof window != 'undefined' && window.__debug === true;
  var width, height;
  if (typeof bitmap == 'number') {
    width = bitmap;
    height = w;
    ZXing.BaseLuminanceSource.call(this, width, height);
  } else {
    var canvas, data;
    if (bitmap instanceof Uint8ClampedArray) {
      width = w;
      height = h;
      data = bitmap;
    } else if (bitmap instanceof ImageData) {
      width = w || bitmap.width;
      height = h || bitmap.height;
      data = bitmap.data;
    } else {
      canvas = w;
      width = canvas.naturalWidth;
      height = canvas.naturalHeight;
      var imageData = bitmap.getImageData(0, 0, width, height);
      data = imageData.data;
    }
    ZXing.BaseLuminanceSource.call(this, width, height);

    var stride = Math.abs(data.length / height);

    if (debug) this.debugBitmap = [];
    //console.time("luminances")
    for(var y = 0; y < height; y++) {
      var strideOffset = y * stride;

      var maxIndex = (4 * width) + strideOffset;
      for(var x = strideOffset; x < maxIndex; x += 4) {
        var luminance = ((7424 * data[x] + 38550 * data[x + 1] + 19562 * data[x + 2]) >> 16);
        //var alpha = data[x + 3];
        //luminance = (((luminance * alpha) >> 8) + (255 * (255 - alpha) >> 8) + 1);

        //luminance = luminance < 50 ? 1 : (luminance > 90 ? 255 : luminance)

        this.luminances.push(luminance);
        if (debug) {
          this.debugBitmap.push(luminance);
          this.debugBitmap.push(luminance);
          this.debugBitmap.push(luminance);
          this.debugBitmap.push(255);
        }
      }
    }
    //console.timeEnd("luminances")
  }
};

我在做什么错？为什么会出现此错误以及如何解决？

Answer 1

此函数（除其他外）接受HTMLImageElement作为w参数，从中将获取其naturalWidth和naturalHeight属性。 HTMLVideoElement不具有这些属性（但videoWidth和videoHeight）。

因此，鉴于此函数的复杂签名，最简单的方法可能是向自己传递ImageData：

const data = canvas_context.getImageData(0, 0, 640, 480);
source = new ZXing.BitmapLuminanceSource(data)

jQuery-无法在'CanvasRenderingContext2D'上执行'getImageData'：值的类型不是'long'

1 个答案: