Question

我一直在尝试解码具有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中需要完成许多配置，但是我不知道这些配置。我正在为此寻找简单的解决方案。谁能帮助我使用工作库。

Answer 1

使用此库qrcode-decoder找到了解决方案。

在我的代码中

import QrcodeDecoder from 'qrcode-decoder';

          const qr = new QrcodeDecoder();

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

如何在React JS中解码包含base 64 png的qr代码

1 个答案: