Javascript 从React Native中的文件读取QRCode
如何在React Native中从文件路径(而不是相机)读取QRCode?我正在使用react native v0.57.1 编辑1: 在@joshkmartinez的帮助下,我能够编写以下方法:Javascript 从React Native中的文件读取QRCode,javascript,react-native,qr-code,Javascript,React Native,Qr Code,如何在React Native中从文件路径(而不是相机)读取QRCode?我正在使用react native v0.57.1 编辑1: 在@joshkmartinez的帮助下,我能够编写以下方法: getImageInfo(path) { return new Promise(resolve => { Image.getSize(`file://${path}`, (width, height) => { Img
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,
});
});
});
})
}
但是jsQR返回传递给二进制程序的错误格式错误的数据
可能我在将文件转换为Base64时出错了,我正在使用它来转换图像
编辑2:
经过2天的研究,我能够使用以下方法转换图像:
解码图像数据(图像){
var imagePath=`${image.filePath}/${image.fileFullName}`;
返回新承诺(解决=>{
readFile(imagePath,'base64')。然后(base64string=>{
const imageData=Buffer.from(base64string,'base64');
var rawmagedata=JPEG.decode(图像数据);
var clampedaray=新UINT8clampedaray(rawImageData.data.length);
对于(var i=0;i
结果发现jsQR无法读取我的任何QRCode(它只是将所有QRCode返回null)
我还缺什么吗?可能在图像转换、解码等方面?我最初使用jsQR时遇到了同样的问题。我的目标是从图库中选择的图像中检测二维码 我通过使用“react native image picker”和“rn qr generator”找到了一个解决方案 使用的版本:
- 反应本机:0.63.4
- rn qr生成器:^1.1.6
- 反应本机图像选择器:^3.3.2
this.getImageInfo(path).then(imageInfo => {
jsQR(imageInfo.imageData, imageInfo.width, imageInfo.height).then(qrcode => {
console.log(qrcode);
});
});
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,
});
});
});
}
// ... 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
});
});
}