为什么我无法解码 Javascript 中的二维码？

Question

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

我有下一个流程：

用户上传图片。
我从图片中解码二维码。

<input type="file" name="file" id="file" accept="image/*"(change)="qrCodeUploaded($event.target.files)"/>

我尝试了下一个库：

https://github.com/zxing-js/library

  qrCodeUploaded(files: FileList): void {
    const fileReader = new FileReader();
    const codeReader = new BrowserQRCodeReader();
    fileReader.readAsDataURL(files[0]);

    fileReader.onload = (e: any) => {
        var image = document.createElement("img");
        image.src = e.target.result;
        setTimeout(() => codeReader.decodeFromImage(image,  e.target.result).then(res => console.log(res)), 100);
    };
  }

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

https://github.com/cozmo/jsQR

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

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

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

要点link： https://gist.github.com/er-ant/b5c75c822eb085e70035cf333bb0fb55

请告诉我我做错了什么，并提出一些二维码解码的解决方案。打开任何想法:)

Answer 1

对于 second library 我错过了它期望 ImageData 并且我传递了二进制数据。

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

使用 createImageBitmap Kaiido 解决方案并进行一些更新，如评论中所建议的那样不起作用。

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

从 canvas 得到 ImageData。

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

您可以使用 png.js 和 jpeg-js 库解析图像 ImageData。

为什么我无法解码 Javascript 中的二维码？

Why I cannot decode QR codes in Javascript?

javascript

encryption

qr-code

rgba