16

I am going to convert b64 to blob in react native.

But I am getting error on atob function.

Here are my codes.

var binary = atob(this.state.avatarSource.uri.split(',')[1]);
var byteNumbers = new Array(binary.length);

for(var i = 0; i < binary.length; i++) {
  byteNumbers.push(binary.charCodeAt(i));
}
var file = new Blob([new Uint8Array(byteNumbers)], {type: 'image/jpeg'});

Anybody has any idea?

wagng
  • 591
  • 2
  • 9
  • 20
  • 1
    Did you ever figure this out? I'm having the same problem – pomo Apr 19 '16 at 08:52
  • Possible duplicate of [Creating a Blob from a base64 string in JavaScript](http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript) – Endless Nov 17 '16 at 08:07
  • not duplicate, react native uses `JavascriptCore` which for instance doesn't implement `atob` and `btoa` – Custodio Jul 29 '19 at 21:57

4 Answers4

9

Do not use atob or btoa, that only works in Debug Mode.

Because when you're using Debug Mode, you're running your JS code in browser (which should be V8), whereas if you're going to run the app in production mode it uses JavascriptCore which does not have an atob or btoa implementation.

You can use base-64 to convert data to BASE64 encoded string, but I'm not sure if it can create a correct Blob object for you.

From my understanding, Blob is an bridge between JS context and file system, React Native does not have file system API itself yet, therefore you might get a Blob object but it's always empty.

If you're going to create an image from array contains numbers, you have a look at react-native-fetch-blob which is a project I'm working on, hopefully it can solve this kind of problems :)

Xeijp
  • 823
  • 1
  • 7
  • 18
  • 3
    Does react-native-fetch-blob provides Blob? im currently using "react-native-image-picker" which provides URI and base64. I need to convert it into blob. Please provide a suggestion. – HungrySoul May 22 '18 at 07:08
  • react-native-fetch-blob solved this issue for me. Seems like it is a good solution if you have a base64 string you need to send to a http(s) post end point as it has built-in functionality for this conversion – Patrick Kelly Jun 08 '20 at 21:52
  • 1
    2021 here and react-native-fetch-blob, as well as the repository it further links to, are all unmaintained... there must be a way to convert a base64 to blob in 2021 right? – fullStackChris Sep 02 '21 at 20:59
0

you could try fetch

  let blob = await this.base64ToBlob(encoded);
  console.log('btoB64 resp === ', blob);

  async base64ToBlob(encoded) {
    let url = `data:image/jpg;base64,${encoded}`;
    let res = await fetch(url);
    let blob = await res?.blob();
    return blob;
  }
Shabeer Ali
  • 743
  • 8
  • 18
0

Ran into this situation where fetch() on Android will not work with a data URI. Instead, try the following:

import { Buffer } from "buffer";


const base64 = 'iVBORw0KGgoAAAANSUhEU ....'
const buffer = Buffer.from(base64, "base64");

const blob = new Blob([buffer], { type: '[content-type]' })

content-type here would be 'image/png' if the base64 was a PNG file.

BlueDevil2k6
  • 56
  • 4
-1

I am getting the base 64 of an image. After that I am displaying it from below code. Hope it may help you

let imgSrc = "data:image/png;base64," + base64ImageData;
<Image source={{uri: imgSrc, scale: 1}} style={{ height: 80, width: 80}}/>
Jagadish Upadhyay
  • 1,216
  • 13
  • 22