[英]React Native save base64 image to Album
Third Party API return a "QR code image" in base64 encode,第三方 API 以 base64 编码返回“二维码图像”,
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) React-Native-Fetch-Blob 维护者不见了,所以没有人回答 Github 问题, React-Native-Fetch-Blob 文档中的
createFile
没有按预期工作(没有将图像保存到相册中)
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,因为我
fetch
了一个没有 CORS 标头的 API,
I can't debug it in Debug JS Remotely
我无法在
Debug JS Remotely
调试它
Chrome would stop that request from happening, Chrome 会阻止该请求发生,
I have to run that on my Android Phone to make it work我必须在我的 Android 手机上运行它才能使它工作
(no CORS control on real phone) (真实手机上没有CORS控制)
I am planing use Clipboard save base64 string,我正在刨用剪贴板保存 base64 字符串,
and hardcode it in my code,并将其硬编码在我的代码中,
to debug what's wrong with react-native-fetch-blob
createFile
API调试
react-native-fetch-blob
createFile
API 有什么问题
Remove data:image/png;base64,
in your base64 string 删除base64字符串中的
data:image/png;base64,
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. 结果我忘记了
data:image/png;base64,
在字符串的开头。
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/ http://1c7.me/react-native-save-base64-image-to-album/
const path = `${RNFS.PicturesDirectoryPath}/My Album`; await RNFS.mkdir(path); return await fetch(uri) .then(res => res.blob()) .then(image => { RNFetchBlob.fs.readFile(uri, "base64").then(data => { RNFS.appendFile(`${path}/${image.data.name}`, data, "base64").catch( err => { console.log("error writing to android storage :", err); } ); }); });
I got this worked in following example 我在下面的例子中得到了这个
import RNFetchBlob from 'rn-fetch-blob';
import Permissions from 'react-native-permissions';
takeSnapshot = async () => {
const currentStatus = await Permissions.check('storage');
if (currentStatus !== 'authorized') {
const status = await Permissions.request('storage');
if (status !== 'authorized') {
return false;
}
}
// put here your base64
const base64 = '';
const path = `${RNFetchBlob.fs.dirs.DCIMDir}/test11.png`;
try {
const data = await RNFetchBlob.fs.writeFile(path, base64, 'base64');
console.log(data, 'data');
} catch (error) {
console.log(error.message);
}
};
this works for me.这对我有用。
I was wanna download base64 as an image in react native我想在react native 中下载 base64 作为图像
this.state.base64img is my base64 without 'data:image/png;base64,' this.state.base64img是我的 base64,没有'data:image/png;base64,'
checkPermision = async () => {
if (Platform.OS === 'ios') {
this.downloadImage();
} else {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'Storage Permission Required',
message: 'App needs access to your storage to download photos',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('Storage permission Granted');
this.downloadImage();
} else {
console.log('Storage permission not Granted');
}
} catch (error) {
console.log('errro', error);
}
}
};
downloadImage() {
let date = new Date();
const { fs} = RNFetchBlob;
const dirs = RNFetchBlob.fs.dirs;
let PictureDir = fs.dirs.PictureDir;
var path = PictureDir + '/image_' +
Math.floor(date.getTime() + date.getSeconds() / 2) +
'.png';
console.log("path :-",path,"dirs :-",dirs)
RNFetchBlob.fs.writeFile(path, this.state.base64img, 'base64').then(res => {
console.log('File : ', res);
alert('Image downloaded successfully.');
}).catch((error) => {
alert(JSON.stringify(error));
});
}
You can now use only react native fetch blob to achieve this. 您现在可以只使用native native fetch blob来实现此目的。
Simply replace RNFS.writeFile with 只需将RNFS.writeFile替换为
RNFetchBlob.fs.writeFile(file_path, image_data, 'base64')
If you wish to view file in native OS viewer you can simply put 如果您希望在本机OS查看器中查看文件,您可以简单地放置
if (isAndroid) {
RNFetchBlob.android.actionViewIntent(file_path, 'application/pdf');
} else {
RNFetchBlob.ios.previewDocument(file_path);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.