Get all pixels of an image in react native efficently

Question

I try to receive all pixel information (RGB data) from an image. Right now i got it working by using react-native-canvas, drawing the image and using getImageData() to receive the RGB-Values.

But this way takes around 1 minute to get the data from an 512x512px JPEG.

Is there any more efficient way to do this?

I am using an expo managed workflow, but I'd eject from expo if it's necessary to accomplish this.

Greetings.

Answer 1

I found a library that can extract color data from JPEG images while I was searching for input for TensorFlow. You can take a look at Jpeg-js.

const prepareInput = async (path: string) => {
  const base64 = await RNFS.readFile(path, 'base64');
  const imageData = new Uint8Array(decode(base64));
  const rawImg = jpeg.decode(imageData, {useTArray: true, formatAsRGBA: false});
  const rawImgData = rawImg.data;
  const float32Array = new Float32Array(rawImg.width * rawImg.height * 3);
  for (let i = 0; i < rawImgData.length; i++) {
    float32Array[i] = rawImgData[i] / 255;
  }
  return float32Array;
};