Third Party API return a "QR code image" in base64 encode,
I need save that image to User's Album.
the React-Native-Fetch-Blob maintainer gone missing, so no one answering Github Issue,
createFile
from React-Native-Fetch-Blob Document not working as expected(not saving image into album)
import fetch_blob from 'react-native-fetch-blob';
// json.qr variable are return from API
const fs = fetch_blob.fs
const base64 = fetch_blob.base64
const dirs = fetch_blob.fs.dirs
const file_path = dirs.DCIMDir + "/some.jpg"
const base64_img = base64.encode(json.qr)
fs.createFile(file_path, base64_img, 'base64')
.then((rep) => {
alert(JSON.stringify(rep));
})
.catch((error) => {
alert(JSON.stringify(error));
});
because I fetch
an API with no CORS header,
I can't debug it in Debug JS Remotely
Chrome would stop that request from happening,
I have to run that on my Android Phone to make it work
(no CORS control on real phone)
I am planing use Clipboard save base64 string,
and hardcode it in my code,
to debug what's wrong with react-native-fetch-blob
createFile
API
React Native allows image conversion in your app using the Image component. However, you cannot use this component to convert base64 images. In fact, you cannot use the base64 format for images in React Native without a specific API.
You can use react-native-pdf package (https://www.npmjs.com/package/react-native-pdf). If you want to show the pdf in your app , this package would be quite helpful as it supports loading PDFs from base64 string for both ios and android .
Remove data:image/png;base64,
in your base64 string
var Base64Code = base64Image.split("data:image/png;base64,"); //base64Image is my image base64 string
const dirs = RNFetchBlob.fs.dirs;
var path = dirs.DCIMDir + "/image.png";
RNFetchBlob.fs.writeFile(path, Base64Code[1], 'base64')
.then((res) => {console.log("File : ", res)});
And then I solved my problem.
I solve the problem,
turn out I forgot data:image/png;base64,
at beginning of the string.
I remove it with following code
// json.qr is base64 string
var image_data = json.qr.split('data:image/png;base64,');
image_data = image_data[1];
and then save the image file
import fetch_blob from 'react-native-fetch-blob';
import RNFS from 'react-native-fs';
const fs = fetch_blob.fs
const dirs = fetch_blob.fs.dirs
const file_path = dirs.DCIMDir + "/bigjpg.png"
// json.qr is base64 string "data:image/png;base64,..."
var image_data = json.qr.split('data:image/png;base64,');
image_data = image_data[1];
RNFS.writeFile(file_path, image_data, 'base64')
.catch((error) => {
alert(JSON.stringify(error));
});
http://1c7.me/react-native-save-base64-image-to-album/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With