Question

我有从Expo ImagePicker component返回的base64格式的图像数据，我想将其转换为RGBA像素值的Uint8ClampedArray，格式为[r0，g0，b0，a0，r1，g1，b1，a1， ...]，因为它是jsQR library

接受的唯一输入

我尝试了这个，但是没有用：

const dataURItoBlob = byteString  => {

  // write the bytes of the string to a typed array
  var ia = new Uint8ClampedArray(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return ia;
};

任何帮助将不胜感激

Answer 1

我猜您的base64编码的URI实际上是PNG，因此您可以执行以下操作：

const {PNG} = require('pngjs');
const jsqr = require('jsqr');

const dataUri = 'data:image/png;base64,ABCDEFYOURIMAGEHEREABCDEF';
const png = PNG.sync.read(Buffer.from(dataUri.slice('data:image/png;base64,'.length), 'base64'));
const code = jsqr(Uint8ClampedArray.from(png.data), png.width, png.height);

// code.data now contains the URL string encoded by the QR code

Answer 2

react native的新答案：

这个包应该可以解决问题。让我知道它是否有效。

https://www.npmjs.com/package/get-image-data

浏览器的旧辅助器：

首先将base64 img放在如下所述的画布中：

Base64 PNG data to HTML5 canvas

然后在您的ImageData（https://developer.mozilla.org/en-US/docs/Web/API/ImageData）上应用canvas

这应该给您想要的结果。

Answer 3

我找到的解决方案如下：

它需要使用typedarray，Buffer，jpeg-js

var Uint8ClampedArray = require('typedarray').Uint8ClampedArray;
const Buffer = require('buffer').Buffer;
global.Buffer = Buffer; // very important
const jpeg = require('jpeg-js');


const jpegData = Buffer.from(base64, 'base64');
var rawImageData = jpeg.decode(jpegData);

var clampedArray = new Uint8ClampedArray(rawImageData.data.length);
// manually fill Uint8ClampedArray, cause Uint8ClampedArray.from function is not available in react-native
var i;
for (i = 0; i < rawImageData.data.length; i++) {
  clampedArray[i] = rawImageData.data[i];
}

将Base64字符串图像转换为Uint8ClampedArray

3 个答案: