为什么我不能用Javascript解码二维码？

我正在开发angular应用程序，尝试仅在客户端使用QR码解码图像，并面临下一个错误

我有下一个流程：

用户上传图像

我从图像中解码二维码

我尝试了下一个库：

适用于某些二维码，但在手机上会出现问题。如果您将用手机拍摄二维码的照片，则不会解码。因此，对于移动设备，您需要实现视频

我上传的任何QR图像都会出现下一个错误：

core.js:15714 ERROR Error: Malformed data passed to binarizer.
    at Object.binarize (jsQR.js:408)
    at jsQR (jsQR.js:368)

主要链接：

请告诉我我做错了什么，并提出一些二维码解码的解决方案。开放供大家思考：）

因为我错过了它期望的

ImageData

，而我传递的是二进制数据

因此，我们有3种解决方案如何将二进制数据转换为

ImageData

：

使用

createImageBitmap

解决方案进行一些更新，如注释中所建议的那样不起作用

从画布获取图像数据

qrCodeUploadedHandler（文件：文件列表）：无效{
常量文件：file=files[0]；
const fileReader:fileReader=newfilereader（）；
readAsDataURL（文件[0]）；
fileReader.onload=（事件：ProgressEvent）=>{
const img:HTMLImageElement=new Image（）；
img.onload=（）=>{
const canvas:htmlcanvaseElement=document.createElement（'canvas'）；
常量宽度：数字=img.width；
常数高度：数字=img.height；
画布宽度=宽度；
canvas.height=高度；
const canvasrendingcontext:canvasrendingcontext2d=canvas.getContext（'2d'）；
log（canvasrendingcontext）；
canvasRenderingContext.drawImage（img，0，0）；
const qrCodeImageFormat:ImageData=canvasRenderingContext.getImageData（0，0，宽度，高度）；
const qrDecoded=jsQR（qrCodeImageFormat.data，qrCodeImageFormat.width，qrCodeImageFormat.height）；
canvas.remove（）；
};
img.onerror=（）=>console.error（'请上传图像格式的文件'）；
img.src=（event.target）.result；
}

您可以使用

png.js

和

jpeg-js

库解析图像，以获取

ImageData

因为我错过了它期望的

ImageData

，我传递了二进制数据

因此，我们有3种解决方案如何将二进制数据转换为

ImageData

：

使用

createImageBitmap

解决方案进行一些更新，如注释中所建议的那样不起作用

从画布获取图像数据

qrCodeUploadedHandler（文件：文件列表）：无效{
常量文件：file=files[0]；
const fileReader:fileReader=newfilereader（）；
readAsDataURL（文件[0]）；
fileReader.onload=（事件：ProgressEvent）=>{
const img:HTMLImageElement=new Image（）；
img.onload=（）=>{
const canvas:htmlcanvaseElement=document.createElement（'canvas'）；
常量宽度：数字=img.width；
常数高度：数字=img.height；
画布宽度=宽度；
canvas.height=高度；
const canvasrendingcontext:canvasrendingcontext2d=canvas.getContext（'2d'）；
log（canvasrendingcontext）；
canvasRenderingContext.drawImage（img，0，0）；
const qrCodeImageFormat:ImageData=canvasRenderingContext.getImageData（0，0，宽度，高度）；
const qrDecoded=jsQR（qrCodeImageFormat.data，qrCodeImageFormat.width，qrCodeImageFormat.height）；
canvas.remove（）；
};
img.onerror=（）=>console.error（'请上传图像格式的文件'）；
img.src=（event.target）.result；
}

您可以使用

png.js

和

jpeg-js

库解析图像，以获取

ImageData

---

这与加密有什么关系？你读到了吗？他们需要一个（即像素值），你给他们一个图像文件的数组缓冲（即二进制内容）。这不起作用。要从一个Blob中获取图像数据，你可以做

createImageBitmap（Blob）。然后（bmp=>{const ctx=Object.assign（document.createElement（'canvas'），bmp）.getContext（'2d'）；ctx.drawImage（bmp，0,0）；返回ctx.getImageData（0,0，bmp.width，bmp.height）；}）

@kaido帮助使用libs将图像转换为ImageData格式，用于解析jpeg和png。谢谢。将尝试您的示例并应用answer@Kaiido应用了您的解决方案并进行了一些更新。谢谢！这与加密有什么关系？您阅读了吗？他们希望有一个（即像素值），您要给他们一个图像文件的数组缓冲（即二进制内容）。这不起作用。要从Blob中获取图像数据，您可以执行

createImageBitmap（Blob）。然后（bmp=>{const ctx=Object.assign（document.createElement（'canvas'），bmp）。getContext（'2d'）；ctx.drawImage（bmp，0,0）；返回ctx.getImageData（0,0，bmp.width，bmp.height）；）)

@kaido帮助使用libs将图像转换为ImageData格式，用于解析jpeg和png。谢谢。将尝试您的示例并应用answer@Kaiido应用了您的解决方案并进行了一些更新。谢谢！

  qrCodeUploaded(files: FileList): void {
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(files[0]);
    fileReader.onload = (e: any) => {
      console.log(new Uint8ClampedArray(e.target.result));
      console.log(jsQR(new Uint8ClampedArray(e.target.result), 256, 256));
    };
  }

core.js:15714 ERROR Error: Malformed data passed to binarizer.
    at Object.binarize (jsQR.js:408)
    at jsQR (jsQR.js:368)

qrCodeUploadedHandler(files: FileList): void {
  const file: File = files[0];

  createImageBitmap(files[0])
    .then(bmp  => {
      const canvas = document.createElement('canvas');

      const width: number = bmp.width;
      const height: number = bmp.height;
      canvas.width = bmp.width;
      canvas.height = bmp.height;

      const ctx = canvas.getContext('2d');

      ctx.drawImage(bmp, 0, 0);
      const qrCodeImageFormat = ctx.getImageData(0,0,bmp.width,bmp.height);
      const qrDecoded = jsQR(qrCodeImageFormat.data, qrCodeImageFormat.width, qrCodeImageFormat.height);
    });
}

qrCodeUploadedHandler(files: FileList): void {
  const file: File = files[0];
  const fileReader: FileReader = new FileReader();
  fileReader.readAsDataURL(files[0]);

  fileReader.onload = (event: ProgressEvent) => {
    const img: HTMLImageElement = new Image();
    img.onload = () => {
      const canvas: HTMLCanvasElement = document.createElement('canvas');
      const width: number = img.width;
      const height: number = img.height;

      canvas.width = width;
      canvas.height = height;

      const canvasRenderingContext: CanvasRenderingContext2D = canvas.getContext('2d');
      console.log(canvasRenderingContext);

      canvasRenderingContext.drawImage(img, 0, 0);

      const qrCodeImageFormat: ImageData = canvasRenderingContext.getImageData(0, 0, width, height);

      const qrDecoded = jsQR(qrCodeImageFormat.data, qrCodeImageFormat.width, qrCodeImageFormat.height);
      canvas.remove();
    };
    img.onerror = () => console.error('Upload file of image format please.');
    img.src = (<any>event.target).result;
}