Javascript jQuery-无法执行'；getImageData'；在'；CanvasRenderingContext2D'；：值的类型不是'；长'；

我有一个视频和画布元素，如下所示：

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

这就是我试图用相机捕捉条形码并解码的地方：

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")
  }
};

ZXing.BitmapLuminanceSource=函数（位图，w，h）{
var debug=typeof window！='undefined'&&window.\uu debug===true；
宽度、高度；
如果（位图类型=='number'）{
宽度=位图；
高度=w；
ZXing.BaseLuminanceSource.call（这个，宽度，高度）；
}否则{
var画布，数据；
if（uint8clampedaray的位图实例）{
宽度=w；
高度=h；
数据=位图；
}else if（图像数据的位图实例）{
宽度=w | | bitmap.width；
高度=h | |位图.height；
数据=位图.data；
}否则{
画布=w；
宽度=canvas.naturalWidth；
高度=画布的自然高度；
var imageData=bitmap.getImageData（0，0，宽度，高度）；
data=imageData.data；
}
ZXing.BaseLuminanceSource.call（这个，宽度，高度）；
var stride=Math.abs（data.length/height）；
如果（调试）this.debugBitmap=[]；
//控制台时间（“亮度”）
对于（变量y=0；y>16）；
//varα=数据[x+3]；
//亮度=（（亮度*α>>8）+（255*（255-α>>8）+1）；
//亮度=亮度<50？1：（亮度>90？255：亮度）
此参数为.luminances.push（亮度）；
如果（调试）{
this.debugBitmap.push（亮度）；
this.debugBitmap.push（亮度）；
this.debugBitmap.push（亮度）；
this.debugBitmap.push（255）；
}
}
}
//控制台。时间结束（“亮度”）
}
};

我做错了什么？为什么会出现此错误以及如何修复此错误？

此函数接受一个HTMLImageElement作为

w

参数，并从中获取其

naturalWidth

和

naturalHeight

属性。HTMLVideoElement没有这些属性（但是

videoWidth

和

videoHeight

）

因此，考虑到此函数的复杂签名，最简单的方法可能是将ImageData传递给您自己：

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

---

我做了调整，仍然得到了相同的错误。我是否必须改变这个：ZXing.BitmapLuminanceSource=函数（位图，w，h）{？不，对于ImageData，他们将直接从中读取这些。

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