代码之家 › 专栏 › 技术社区 › Hend El-Sahli

image base64字符串到uint8clampedarray

qr-code react-native image javascript

1

Hend El-Sahli · 技术社区 · 7 年前

我有base64格式的imagedata从返回 Expo ImagePicker component ,我想将它转换为uint8clampedarray格式的rgba像素值[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;
};

任何帮助都将不胜感激

2 回复 | 直到 7 年前

1

Domenik Reitzner 7 年前

React Native的新答案:

这个包裹应该起作用。如果可行,请告诉我。

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

旧的浏览器电源:

首先将base64 img放在画布中,如下所述:

Base64 PNG data to HTML5 canvas

然后应用 ImageData 对你 canvas ( https://developer.mozilla.org/en-US/docs/Web/API/ImageData )

这将给您期望的结果。

2

0

Hend El-Sahli 7 年前

我发现的解决方案如下:

它需要使用 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];
}