在 React Native 中从文件中读取 QRCode答案

【问题标题】：Read QRCode from file in React Native在 React Native 中从文件中读取 QRCode
【发布时间】：2019-03-13 16:41:32
【问题描述】：

如何在 React Native 中从文件路径（不是相机）读取 QRCode？我正在使用 react-native v0.57.1

编辑 1：

在@joshkmartinez 的帮助下，我能够编写这个方法：

getImageInfo(path) {
        return new Promise(resolve => {
            Image.getSize(`file://${path}`, (width, height) => {
                ImgToBase64.getBase64String(`file://${path}`).then(base64String => {
                    var raw = window.atob(base64String);
                    var rawLength = raw.length;
                    var imageData = new Uint8ClampedArray(new ArrayBuffer(rawLength));

                    for (var i = 0; i < rawLength; i++) {
                        imageData[i] = raw.charCodeAt(i);
                    }

                    resolve({
                        width,
                        height,
                        imageData,
                    });
                });
            });
        })
    }

然后调用它：

 this.getImageInfo(path).then(imageInfo => {
                    jsQR(imageInfo.imageData, imageInfo.width, imageInfo.height).then(qrcode => {
                        console.log(qrcode);
                    });
                });

但是jsQR返回错误Malformed data passed to binarizer

也许我在将文件转换为 Base64 时做错了，我正在使用react-native-image-base64 来转换图像

编辑 2：

经过 2 天的研究，我能够使用 react-native-fs、Buffer 和 jpeg-js 的这种方法转换图像：

decodeImageData(image) {
        var imagePath = `${image.filePath}/${image.fileFullName}`;

        return new Promise(resolve => {
            RNFS.readFile(imagePath, 'base64').then(base64string => {
                const imageData = Buffer.from(base64string, 'base64');

                var rawImageData = JPEG.decode(imageData);

                var clampedArray = new Uint8ClampedArray(rawImageData.data.length);
                for (var i = 0; i < rawImageData.data.length; i++) {
                    clampedArray[i] = rawImageData.data[i];
                }

                resolve({
                    width: rawImageData.width,
                    height: rawImageData.height,
                    data: clampedArray,
                });
            });
        });
    }

才发现 jsQR 无法读取我的任何二维码（它只是向所有二维码返回 null）

我在这里还缺少什么吗？也许在图像的转换、解码等方面？

【问题讨论】：

您是从用户的相册中获取图像吗？
不，我正在读取手机/sdcard 内的文件夹
我发现了一个类似的问题，看看这个答案：stackoverflow.com/a/51921610/8891686
感谢 joshkmartinez 的回复，我之前确实看过那篇文章，但我不知道如何将文件转换为 Uint8ClampedArray，您能帮忙吗？
gist.github.com/borismus/1032746

标签： javascript react-native qr-code

【解决方案1】：

一开始我在使用 jsQR 时遇到了同样的问题。我的目标是从图库中选择的图像中检测 QR 码。

我通过使用“react-native-image-picker”和“rn-qr-generator”找到了解决方案。

// ... other imports ...
import { launchImageLibrary } from 'react-native-image-picker';
import RNQRGenerator from 'rn-qr-generator';

// ...

openQRCodeFromGallery() {
   const galleryOptions = {
     mediaType: 'photo',
     includeBase64: true,
   };

  launchImageLibrary(galleryOptions, (response) => {
    if (!response || response.didCancel || !response.base64) {
      return;
    }

    const { base64 } = response;

    RNQRGenerator.detect({
      base64: base64,
    })
      .then((detectedQRCodes) => {
        const { values } = detectedQRCodes; // Array of detected QR code values. Empty if nothing found.
        // do your stuff
      })
      .catch((error) => {
         // handle errors
      });
  });
}

使用的版本：

反应原生：0.63.4
rn-qr 生成器：^1.1.6
react-native-image-picker: ^3.3.2

【讨论】：