How to use and convert an image file into Uint8Array in react native?

Question

I am working on React-Native-OpenPGP for Encryption and Decryption. I want to take an image from my folder (local image fetch)/ Image url and convert that image into Uint8Array for encryption/Decryption . I am new to react native , Not able to find a better solution . Links can also help. Need a process to give an image path and convert it into Uint8Array.

Moreover also need a solution to convert an image file to binary data for Encryption/Decryption . Is it possible as openpgp provides two ways to do that one is through String and another is through Uint8Array data ?

Are you interested to know other alternatives to enrypt and decrypt image file? You could use the combination of base64 encoding format + AES. Do comment if you want me to write a sample solution for it. — Ron Astle Lobo, Mar 06 '19 at 08:32
@Ron No right now i want this in openpgp base64 encoding format + PGP . Thankyou for that Will convey you whenever i need alternative solutions — Diksha235, Mar 06 '19 at 08:57

score 0 · Accepted Answer · answered Mar 07 '19 at 12:11

Somehow after spending a day on it I managed to convert an image file to BLOB through b64-to-blob. This attached link helped me to do so. I had done this in this way :

Step 1: import ImgToBase64 from 'react-native-image-base64';

Step 2: You have to install npm i -S base-64 (for encoding and decoding in atob, btoa)

Step 3: import {decode as atob, encode as btoa} from 'base-64'

Step 4: var b64toBlob = require('b64-to-blob'); , var baseStringSample;

Step 5: Make a function to convert your Image to base64

_convertImageToBaseSixFour() { 

    ImgToBase64.getBase64String('YOUR_IMAGE_PATH') // path to your image from local storage
  .then((base64String) => {
        baseStringSample = base64String,
        })
  .catch(err => Alert.alert('Error' + err));

}

Step 6:

// ****** CONVERT BASE64 TO BLOB ******* //

  _imageToBlob(){

    var byteCharacters = atob(baseStringSample);
    var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
    byteArray = new Uint8Array(byteNumbers);
    console.log("BYTEARRAY: " + byteArray);
}

}

Step 7: Then generated keys , did encryption and decryption through UInt8Array method in openpgp library

Step 8: Converted decrypted image to base64 and then base64 to Image , showed image in a Imageview.

How to use and convert an image file into Uint8Array in react native?

1 Answers1