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星（＆lt; 10）

React-Native-Fetch-Blob维护者丢失了，所以没有人回答Github问题， 来自React-Native-Fetch-Blob Document的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没有CORS标头的API，所以 我无法在Debug JS Remotely中调试它 Chrome会阻止该请求的发生，

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

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

的错误

Answer 1

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

然后我解决了我的问题。

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

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

Answer 4

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

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

Answer 5

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

只需用

替换RNFS.writeFile即可

,

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

即可

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