React Native将base64图像保存到相册

Question

第三方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）

该阵营本地取入一滴维护者失踪了，所以没有人回答Github上的问题， 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));
  });

有人处理过这个问题吗？

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

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

我必须在我的Android手机上运行它才能使其正常运行
（在真实手机上没有CORS控件）

我打算使用剪贴板保存base64字符串，
并在我的代码中对其进行硬编码，
以调试react-native-fetch-blob createFileAPI的问题

Answer 1

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 2

我解决了这个问题，
结果我忘记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/

Answer 3

您现在只能使用 React Native fetch Blob 来实现此目的。

只需将 RNFS.writeFile 替换为

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

如果您想在本机操作系统查看器中查看文件，您可以简单地输入

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