来自图像文件的二维码解码器（本机反应）

Question

我正在寻找一种方法来解码原生图像文件中的二维码（ios 特别是）...我知道 expo 提供相机扫描仪解决方案...但我需要文件解码器

非常感谢任何帮助。

Answer 1

您可以使用 jsQR library to read QR codes from image files. To choose a file from storage you can try the React Native Image Picker library.

Answer 2

也许你可以使用这个react-native-qrcode-local-image

Answer 3

回答我自己的问题...

我把自己想到的解决方法贴出来了in this blog post

另外最后的代码是Available on Github

Answer 4

您可以使用rn-qr-generator解码图片中的二维码。

import RNQRGenerator from 'rn-qr-generator';

RNQRGenerator.detect({
  uri: PATH_TO_IMAGE, // local path of the image. Can be skipped if base64 is passed.
  base64: imageBase64String, // If uri is passed this option will be skipped.
})
  .then(response => {
    const { values } = response; // Array of detected QR code values. Empty if nothing found.
  })
  .catch(error => console.log('Cannot detect QR code in image', error));

它将return检测到的二维码值数组在 iOS 和 Android 平台上运行良好。

Answer 5

我假设您正在尝试从图像 library/photos 访问图像。

import * as RNImagePicker from 'expo-image-picker'
import { BarCodeScanner } from 'expo-barcode-scanner'

const decode = async () => {
  try {
    const { status } = await RNImagePicker.requestMediaLibraryPermissionsAsync()
     if (status === 'granted') {
       const result = RNImagePicker.launchImageLibraryAsync({
          options: {
             allowsMultipleSelection: false
          }
       })
       if (result && result.uri) {
          const results = await BarCodeScanner.scanFromURLAsync(result.uri)
          console.log(results) // many information
          console.log(results.data) // May be the one you are looking for
       }
     }
  } catch (error) {
    console.debug(error)
  }
}

说明

检查用户是否有启动图片的权限library/photos
允许用户select一张图片
select读取图像后，条形码扫描仪会为用户溢出信息

Answer 6

刚刚尝试这样做，几个小时后我想出了一个解决方案。

您需要获取图像的base64数据，decode/parse根据图像的格式将其转换为像素数据(PNG/JPEG)，然后将该像素数据转换为jsqr使用的Uint8ClampedArray

安装以下软件包：

pngjs --> 解码 png 图像像素数据（使用浏览器版本）
jpeg-js --> 解码jpeg图像像素数据
缓冲区
jsqr -> 检测二维码
react-native-image-picker（或您选择的图像选择器，但请确保它可以 return base64 数据）

npm i pngjs jpeg-js buffer jsqr react-native-image-picker -S

您可以使用以下代码从图库中的 JPEG 图片中读取二维码：

import jpeg from 'jpeg-js';
import { Buffer } from 'buffer';
import { launchImageLibrary } from 'react-native-image-picker';
import jsQR from 'jsqr';
const PNG = require('pngjs/browser').PNG;

const readQRFromGallery = () => {
  launchImageLibrary(
      {
        selectionLimit: 1,
        mediaType: 'photo',
        includeBase64: true,
      },
      ({ didCancel, assets, errorCode }) => {
        if (didCancel || errorCode || !assets || assets.length === 0) {
         // Handle errors here, or separately
          return;
        }

        // Get the image and its base64 data into a buffer
        const image = assets[0];
        const base64Buffer = Buffer.from(image.base64!, 'base64');

        let pixelData;
        let imageBuffer;
        
        // Handle decoding based on different mimetypes
        if (image.type === 'image/jpeg') {
          pixelData = jpeg.decode(base64Buffer, { useTArray: true }); // --> useTArray makes jpeg-js work on react-native without needing to nodeify it
          imageBuffer = pixelData.data;
        } else if (image.type === 'image/png') {
          pixelData = PNG.sync.read(base64Buffer);
          imageBuffer = pixelData.data;
        } else {
          // you can alert the user here that the format is not supported
          return;
        }

        // Convert the buffer into a clamped array that jsqr uses
        const data = Uint8ClampedArray.from(imageBuffer);

        // Get the QR string from the image
        const code = jsQR(data, image.width, image.height);

      }
    );
  };
}

我可能在这里遗漏了一些细节，但我认为这应该足以指导您朝着正确的方向前进

来自图像文件的二维码解码器（本机反应）

Qr-code decoder from image file (react native)

qr-code

react-native

expo