关于javascript：React Native将base64图像保存到相册

React Native save base64 image to Album

第三方API返回以base64编码的" QR码图像"，
我需要将该图像保存到用户的相册。

CamerRoll-不支持将base64图像保存到相册
React-Native-Fetch-Blob-
https://github.com/wkh237/react-native-fetch-blob
仍在调查
React-Native-fs-
https://github.com/itinance/react-native-fs
我正在尝试这个
npm模块很少，Github星很少(<10)

React-Native-Fetch-Blob维护者不见了，所以没人回答Github问题，
来自React-Native-Fetch-Blob文档的createFile未能按预期工作(未将图像保存到相册中)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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));
});

有人处理过这个问题吗？

如何将base64编码的图像字符串保存到用户相册？ (作为jpg或png文件)

因为我fetch一个没有CORS标头的API，
我无法在Debug JS Remotely中对其进行调试
Chrome会阻止该请求的发生，

我必须在Android Phone上运行该程序才能正常运行
(在真实电话上没有CORS控件)

我打算使用剪贴板保存base64字符串，
并将其硬编码到我的代码中
调试react-native-fetch-blob createFile API

有什么问题

相关讨论

删除base64字符串中的data:image/png;base64,

1
2
3
4
5
6
7
8

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)});

然后我解决了我的问题。

相关讨论

我解决了这个问题，
原来我忘记了字符串开头的data:image/png;base64,。
enter

1
2
3

// json.qr is base64 string
var image_data = json.qr.split('data:image/png;base64,');
image_data = image_data[1];

然后保存图像文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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/

您现在只能使用react native fetch blob来实现此目的。

只需用

替换RNFS.writeFile

1	RNFetchBlob.fs.writeFile(file_path, image_data, 'base64')

如果您希望在本机OS查看器中查看文件，只需将

1
2
3
4
5

if (isAndroid) {
RNFetchBlob.android.actionViewIntent(file_path, 'application/pdf');
} else {
RNFetchBlob.ios.previewDocument(file_path);
}

相关讨论

在以下示例中，我做到了这一点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);
}
};

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13