javascript 如何在react js中解码包含base 64 png的qr码

hc8w905p  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(208)

我一直在尝试解码这个有JSON数据的QR码。

在在线工具中,它是工作示例https://www.onlinebarcodereader.com/。它读取数据。我正在以编程方式尝试。
下面是我的代码:

handleFileChange(event) {
    const {target} = event;
    const {files} = target;

    if (files && files[0]) {
      const reader = new FileReader();

      //  reader.onloadstart = () => this.setState({loading: true});

      reader.onload = async event => {
        this.setState({
          data: event.target.result,
          loading: false
        });
       // const img = document.getElementById('img');
      console.log(event.target.result);
        let result;
        try {
          var qr = new QrCode();

// set the callback that receives the decoded content as the tasks is async
          qr.callback = function(decodedDATA){
            alert(decodedDATA);
          };

    // event.target.result is
 //data:image/png;base64,iVBORw0KGgoAAAANSU...
          qr.decode(event.target.result);
        } catch (err) {
          console.log(err);
        }

        console.log(result);
      };

      reader.readAsDataURL(files[0]);
    }
  }
<input
              id="img"
              type="file"
              accept="image/*"
              onChange={this.handleFileChange}
            />

我已经使用这个库https://www.npmjs.com/package/qrcode-reader它有错误,无法读取数据超过某些字符,因此我得到错误。
我也尝试过使用zxing库,但我使用服务器端渲染,并得到错误“窗口未定义”。有很多配置需要在webpack中完成,但我不知道这些。
我正在寻找简单的解决方法。下一步我可以尝试什么?

7uzetpgm

7uzetpgm1#

找到了这个库的解决方案qrcode-decoder.
在我的代码里

import QrcodeDecoder from 'qrcode-decoder';

          const qr = new QrcodeDecoder();

         const result = await qr.decodeFromImage(event.target.result);

相关问题