React Native之图片保存到本地相册(ios android)

时间:2021-07-31 22:59:14

React Native之图片保存到本地相册(ios android)

一,需求分析

1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是android端不支持从网络保存图片。

2,只保存一张图片到本地相册(比如生成的邀请卡 付款码等)

二,介绍与iOS简单配置

2.1 介绍

saveToCameraRoll(tag, type?)方法介绍

(1)这个是 CameraRoll 的一个静态方法,作用是保存一张图片到相册。
(2)参数 tag 是图片的地址,为字符串类型。其内容根据不同的设备也有所不同:
    • 在 Android 上:tag 是本地地址,例如:"file:///sdcard/img.png"
    • 在 iOS 上:tag 可以是 url、assets-library、内存图片中的一种。
(3)参数 type 不是必须的,可选值是'photo' 或 'video'。用来表示存的是图片还是视频。不指定的话程序也会根据后缀自行判断。(结尾为 .mov 或 .mp4 为视频,其它为图片)

2.2 CameraRoll API iOS链接配置

第一步

添加CameraRoll库(node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj)到XCode的Libraries分组里

第二步

将 RCTCameraRoll.xcodeproj下的Products文件夹中的静态库文件(.a文件,拖到Xcode General--Linked FrameworksLibraries下。

React Native之图片保存到本地相册(ios android)

第三步

配置访问相册的权限,如果不配置Privacy - Photo Library Additions Usage Description到Info.plist下,会出现闪退情况。在Info.plist添加如下:

     <key>NSPhotoLibraryAddUsageDescription</key>
<string>使用相册</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>使用相册</string>

Android可以直接访问CameraRoll API

 import { Platform, CameraRoll } from 'react-native';
import RNFS from 'react-native-fs';

三,应用实例

3.1 网络图片保存到相册(支持iOS Android)

下载网络图片,并保存到相册中:

 /**
* 下载网页图片
* @param uri 图片地址
* @returns {*}
*/
export const DownloadImage=(uri)=> {
if (!uri) return null;
return new Promise((resolve, reject) => {
let timestamp = (new Date()).getTime();//获取当前时间错
let random = String(((Math.random() * 1000000) | 0))//六位随机数
let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //外部文件,共享目录的绝对路径(仅限android)
const downloadDest = `${dirs}/${timestamp+random}.jpg`;
const formUrl = uri;
const options = {
fromUrl: formUrl,
toFile: downloadDest,
background: true,
begin: (res) => {
// console.log('begin', res);
// console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');
},
};
try {
const ret = RNFS.downloadFile(options);
ret.promise.then(res => {
// console.log('success', res);
// console.log('file://' + downloadDest)
var promise = CameraRoll.saveToCameraRoll(downloadDest);
promise.then(function(result) {
// alert('保存成功!地址如下:\n' + result);
}).catch(function(error) {
console.log('error', error);
// alert('保存失败!\n' + error);
});
resolve(res);
}).catch(err => {
reject(new Error(err))
});
} catch (e) {
reject(new Error(e))
} }) }

使用实例

  //保存图片
DownloadImage=(uri)=>{
Download.DownloadImage(uri).then((res)=>{
if(res.statusCode==200){
Toast.show('图片保存成功')
}else{
Toast.show('图片保存失败')
}
})
.catch((error)=>{
Toast.show('图片保存失败')
console.log(error)
})
}

3.2 内存图片保存到相册(支持iOS Android)

将内存图片保存到相册中:

 /**
* 保存图片到相册
* @param ImageUrl 图片地址
* @returns {*}
*/
export const DownloadLocalImage=(ImageUrl)=> {
if (!ImageUrl) return null;
return new Promise((resolve, reject) => {
try {
var promise = CameraRoll.saveToCameraRoll(ImageUrl);
promise.then(function(result) {
resolve({statusCode:200});
//alert('保存成功!地址如下:\n' + result);
}).catch(function(error) {
console.log('error', error);
// alert('保存失败!\n' + error);
});
} catch (e) {
reject(new Error(e))
} }) }

React Native之图片保存到本地相册(ios android)的更多相关文章

  1. iOS-iOS调用相机调用相册【将图片保存到本地相册】

    设置头部代理 <UINavigationControllerDelegate, UIImagePickerControllerDelegate> 1.调用相机 检测前置摄像头是否可用 - ...

  2. iOS开发小技巧--实现将图片保存到本地相册

    一.报错的代码 错误 -- out of bounds 超出界限的意思 *** Terminating app due to uncaught exception 'NSInvalidArgument ...

  3. iOS UIWebview 长按图片,保存到本地相册

    我们所要解决的问题如题目所示:ios中,长按Webview中的图片,将图片保存到本地相册.解决方案:对load的html网页,执行js注入,通过在webview中执行js代码,来响应点击事件,通过js ...

  4. 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册&lpar;canvas&rpar;

    最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...

  5. 微信小程序之base64图片如何预览与一键保存到本地相册?

    需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...

  6. android将应用中图片保存到系统相册并显示

    我应用到的场景是程序中在视频通讯时截图,将截图保存到本地相册中 /*** @param bmp 获取的bitmap数据 * @param picName 自定义的图片名*/ public static ...

  7. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  8. php 获取远程图片保存到本地

    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...

  9. iOS 将图片保存到本地

    //将图片保存到本地 + (void)SaveImageToLocal:(UIImage*)image Keys:(NSString*)key {     NSUserDefaults* prefer ...

随机推荐

  1. php 短路逻辑运算符

    短路与 && 短路或 || or.||.and.&& 都是短路运算符 &&(and)短路与运算符检查第一个表达式是否返回“flase”,如果是“fals ...

  2. &dollar;&lpar;document&rpar;&period;ready&lpar;function&lpar;&rpar;&lbrace;&rcub;&rpar;&semi;

    $(document).ready 里的代码是在页面内容都加载完才执行的,你直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,如果你标签里执行的代码调用了当前还没加载过 ...

  3. CloudStack4&period;2 二级镜像存储测试

    //添加二级存储{ "addimagestoreresponse": { "imagestore": { "id": "2dda4 ...

  4. Spring事务传递性探讨

    本篇主要讨论下面几点获取[下载地址]  : 一: Spring 事务的传递性介绍 二: 第三方调用含有事务的Service抛异常方法探讨 一: Spring 事务的传递性介绍 事务传播行为,所谓事务的 ...

  5. MongoDB与php的配合使用 【windows版】

    通过学习了如何使用和部署MongoDB,尝试了一下如何将mongodb应用到php的程式中去. 1.预备工作 首先得准备好mongodb,并按照相关方法部署以及服务能正常运行中. 对于初学者,可以参考 ...

  6. DEDECMS万能标签&lbrace;dede&colon;sql&rcub;使用教程详解

    http://www.dede58.com/a/dedebq/2015/0226/1737.html 1.首页在后台单页文档管理里添加一个单页文档,内容编辑框输入你要的内容生成. 2.在需要调用单页文 ...

  7. 【JavaScript】 使用extend继承对象的prototype方法

    之前有学习过通过prototype模式来构造类,并通过prototype来添加方法.好处大概有以下几点: 1.类方法可以都放在prototype中,可以提高性能效率. 2.可以用prototype来实 ...

  8. tomcat虚拟目录配置

    Tomcat6.0虚拟目录配置[转] 设虚拟目录 "site",通过 http://localhost:8080/site 访问物理路径 D:"site 文件夹里面的内容 ...

  9. Tinyos学习笔记(二)

    1.TinyOS communication tools java serialApp -comm serial@/dev/ttyUSB0:telosb java net.tinyos.tools.L ...

  10. linux weblogic 控制台进入缓慢

    实际是JVM在Linux下的bug 他想调用一个随机函数 但取不到 暂时的解决办法是 1)较好的解决办法: 在Weblogic启动参数里添加 “- Djava.security.egd=file:/d ...