鍍金池/ 問答/HTML5  HTML/ react native 怎么保存base64為圖片文件

react native 怎么保存base64為圖片文件

react native中需要將一段base64的字符串數(shù)據(jù)轉(zhuǎn)換成圖片并保存到相冊

現(xiàn)在不知道base64字符串怎么保存

在官網(wǎng)看到的CameraRoll組件中提供的saveToCameraRoll(tag, type)可以保存到相冊
但是這個方法在android上要求tag必須是一個本地的圖片或視頻的uri
file:///sdcard/img.png這樣的

回答
編輯回答
苦妄

發(fā)現(xiàn)高版本的android使用這個的時候會閃退
嘗試使用RNFS 卻會出現(xiàn)問題, 還在解決中
July 13


昨天剛好用到,直接保存就好了,就是用的 CameraRoll 上網(wǎng)找篇文章學(xué)著配置就行了,沒什么難度。

clipboard.png

2017年8月1日 23:20
編輯回答
小眼睛

遇到這個坑,已解決。 https://zhuanlan.zhihu.com/p/...
ios 直接用 CameraRoll

android :

//saveBase64ImageToCameraRoll.js
import RNFetchBlob from 'rn-fetch-blob';
import RNFS from 'react-native-fs';
import { Alert, Platform, CameraRoll } from 'react-native';

export default function (base64Img, success, fail) {
  
  const dirs =  Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; // 外部文件,共享目錄的絕對路徑(僅限android)
  const downloadDest = `${dirs}/${((Math.random() * 10000000) | 0)}.png`;
  const imageDatas = base64Img.split('data:image/png;base64,');
  const imageData = imageDatas[1];

  RNFetchBlob.fs.writeFile(downloadDest, imageData, 'base64').then((rst) => {
    try {
      CameraRoll.saveToCameraRoll(downloadDest).then((e1) => {
        console.log('suc',e1)
        success && success()
      }).catch((e2) => {
        console.log('fai',e2)
        Alert.alert('沒有讀寫權(quán)限。請在[設(shè)置]-[應(yīng)用權(quán)限]-[實驗助手]開啟')
      })
    } catch (e3) {
      // Alert.alert(JSON.stringify(e3))
      console.log('catch',e3)
      fail && fail()
    }
  });
}

2018年5月27日 15:07