CODEWITHSUNDEEP
javascriptimagereact-nativeqr-code
Hend El-Sahli
Hend El-Sahli

Reputation: 6752

Image Base64 string to Uint8ClampedArray

I have imagedata in base64 format returned from Expo ImagePicker component, and I want to convert it to An Uint8ClampedArray of RGBA pixel values in the form [r0, g0, b0, a0, r1, g1, b1, a1, ...], cause it's the only input accepted by jsQR library

I tried this, but did not work:

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;
};

any help will be highly appreciated

Upvotes: 7

Views: 8603

Answers (3)

Oleg Vaskevich
Oleg Vaskevich

Reputation: 12672

I'm guessing your base64-encoded URI is actually a PNG, so you could do the following:

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

Upvotes: 7

Hend El-Sahli
Hend El-Sahli

Reputation: 6752

The solution that I found is as follows:

it requires the usage of 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];
}

Upvotes: 4

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

New answer for react native:

this package should do the trick. let me know if it works.

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

OLD ASNWER FOR BROWSER:

First put the base64 img in a canvas like described here:

Base64 PNG data to HTML5 canvas

Then apply ImageData on your canvas (https://developer.mozilla.org/en-US/docs/Web/API/ImageData)

This should give you the desired result.

Upvotes: 0

Related Questions