Can i use it on react native?

[fabobadi]

Hi,

Im trying to use jpeg-js with RNFS (https://github.com/johanneslumpe/react-native-fs) in this way:

RNFS.readFile(path).then(file => {
      console.log(file);
      const rawImageData = jpeg.decode(file);
      console.log(new Buffer(rawImageData).toString('base64'));
    });

Bur when I try his, i get this error.

Is possible to use this library to read an image and get a bitmap, specifically I am trying to do analysis pixel by pixel images

Thanks

[patrickhulce]

Hey @fabobadi have you already sorted this out? From the code you've posted it's not clear what you're trying to do. rawImageData should be an object that looks like the following and would not be very useful base64 encoded even if it succeeded.

{
  width: 2,
  height: 2,
  data: [
    /* first pixel */ r, g, b, a, /* second pixel */  r, g, b, a,
    /* third pixel */ r, g, b, a, /* fourth pixel */  r, g, b, a,
  ]
}

[patrickhulce]

Closing this as inactive, but feel free to reach out again if you still have trouble.

[SeJV]

I have the same Problem.
When storing the jpg as base64 and read the file with:

const imgBase64 = RNFS.readFile(uri, 'base64');
jpeg.decode(imgBase64); 

Results in: [Error: SOI not found]

[patrickhulce]

@SeJV you can't call jpeg.decode on a base64 string, you'll need to convert it to a Buffer/Uint8Array first (something like https://gist.github.com/borismus/1032746)

[Termtime]

Commenting for anyone that wants to use this package in react-native, the package already supports non-node environments if you use the useTArray: true option when using jpeg, I will leave an example of reading a QR code from a gallery's jpeg image here:

How to read a QR code from an image (react-native) using:

• react-native-image-picker
• jpeg-js
• buffer
• jsQR

import jpeg from 'jpeg-js';
import { Buffer } from 'buffer';
import { launchImageLibrary } from 'react-native-image-picker';

const readQRFromGallery = () => {
  launchImageLibrary(
      {
        selectionLimit: 1,
        mediaType: 'photo',
        includeBase64: true,
      },
      ({ didCancel, assets, errorCode }) => {
        if (didCancel || errorCode || !assets || assets.length === 0) {
         // Handle errors here, or separately
          return;
        }
        const image = assets[0];
        const base64Buffer = Buffer.from(image.base64!, 'base64');
        let pixelData;
        let imageBuffer;
        if (image.type === 'image/jpeg') {
          pixelData = jpeg.decode(base64Buffer, { useTArray: true }); // --> useTArray makes it work on react-native
          imageBuffer = pixelData.data;
        } else {
          return;
        }
        const data = Uint8ClampedArray.from(imageBuffer);

        const code = jsQR(data, image.width, image.height);

      }
    );
  };
}