将本机保存的base64映像响应到相册

Question

第三方API返回base64编码中的"QR代码图像“，

我需要保存该图像到用户的相册。

• CamerRoll -不支持将base64图像保存到相册
• React本地-获取-Blob- https://github.com/wkh237/react-native-fetch-blob 还在调查
• React本机-fs- https://github.com/itinance/react-native-fs 我现在就试着
• 只有很少的npm模块具有极小的Github星(<10)

the本机-获取-Blob维护人员失踪了，因此没有人回答Github问题，createFile从React本地-获取-Blob文档没有按预期工作(没有将图像保存到相册中)

  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手机上运行它才能正常工作

(在真实电话上没有CORS控制)

我计划使用剪贴板保存base64字符串，

在我的代码中硬编码，

调试react-native-fetch-blob createFile API的问题

Answer 1

现在，您可以只使用react本机获取blob来实现这一点。

只需将RNFS.writeFile替换为

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

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

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

Answer 2

删除data:image/png;base64,字符串中的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)});

然后我解决了我的问题。

Answer 3

我解决了问题，

原来我把data:image/png;base64,忘在字符串的开头了。

​

我用下面的代码删除它

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

然后保存图像文件。

  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/