Image Base64 string to Uint8ClampedArray

Question

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

score 6 · Answer 1 · answered Feb 18 '20 at 23:33

6

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

answered Feb 18 '20 at 23:33

Oleg Vaskevich

12,444
6
63
80

Thank you so much for this! – Zen Jul 31 '20 at 20:51
All the qr code decoder I found was for browser and don't work for node js, until I found this. Thank you! – Eric Xin Zhang Jun 15 '22 at 08:19

score 4 · Accepted Answer · answered Sep 08 '18 at 20:24

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

Using this I get "RangeError: Array too large for polyfill". The polyfill is super old so it's kind of not surprising, but a little unfortunate. — Jeremy E, Aug 27 '22 at 20:00

Domenik Reitzner · Answer 3 · 2018-08-21T13:43:25.637

0

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.

edited Aug 21 '18 at 13:43

answered Aug 21 '18 at 12:48

Domenik Reitzner

1,583
1
12
21

Thank you very much for your help ... but the thing is I'm in react-native nor react :) – Hend El-Sahli Aug 21 '18 at 13:07
Is it the only way to use react-native WebView to get access to Canvas to get image data in RGBA format? – Hend El-Sahli Aug 21 '18 at 13:09
Oh, that is interresting :) Then that might help: https://www.npmjs.com/package/get-image-data – Domenik Reitzner Aug 21 '18 at 13:42
While this link might provide some limited, immediate help, an answer [should include sufficient context around the link](//meta.stackoverflow.com/a/8259) so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, to make it more useful to future readers with other, similar questions. In addition, other users tend to respond negatively to answers which are [barely more than a link to an external site](//meta.stackexchange.com/q/225370), and they [might be deleted](//stackoverflow.com/help/deleted-answers). – Cerbrus Aug 21 '18 at 14:06

Image Base64 string to Uint8ClampedArray

3 Answers3

Linked