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

我现在正在尝试这个 - 很少有 Github star 很少的 npm 模块 (<10)

React-Native-Fetch-Blob 维护者失踪了，所以没有人回答 Github 问题， createFile 来自 React-Native-Fetch-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 出了什么问题

原文由 NamNamNam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您现在可以仅使用 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);
                }

原文由 tnyN 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您的 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)});

然后我解决了我的问题。

原文由 Akshay I 发布，翻译遵循 CC BY-SA 4.0 许可协议