uniapp-小程序保存图片到相册

小程序保存图片到相册

一. 将图片保存到手机相册涉及的api 有以下几个
1. uni.getSetting (获取用户的当前设置)
2. uni.authorize(提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。如果用户之前拒绝了授权,此接口会直接进入失败回调,一般搭配uni.getSetting和uni.openSetting使用)
3. uni.saveImageToPhotosAlbum (保存图片到系统相册。)
4. uni.openSetting (调起客户端小程序设置界面,返回用户设置的操作结果)

  1. 上代码
// html
<view class="save" @click.stop="saveImg" >保存海报</view>

// js
data(){
   return {
      imgurl:"http://tmp/SfdWgOY45WZIabad69200882f9fee9f1a0cecc2c7275.png"
   }
},
methods:{
	saveImg(){
		let that = this
		//获取授权列表,查看是否授权写入相册权限
		uni.getSetting({
			success(res) {
				if (!res.authSetting['scope.writePhotosAlbum']) {
					uni.authorize({
						scope:'scope.writePhotosAlbum',
						success() {
							that.saveimgtoAlbum(that.imgurl)
						}
					})
				}else{
					that.saveimgtoAlbum(that.imgurl)
				}
			}
		})
	},
	saveimgtoAlbum(imgurl){
		//图片保存到本地
		let that = this
		uni.showLoading()
		uni.saveImageToPhotosAlbum({
			filePath: imgurl,
			success: function (data) {
				uni.hideLoading()
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000
				})
			},
			fail: function (err) {
				uni.hideLoading()
				if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
					uni.openSetting({
					success(settingdata) {
						if (settingdata.authSetting['scope.writePhotosAlbum']) {
							uni.showToast({
								title: '您已授权成功,请重新保存海报',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '尚未授权,无法保存海报',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			}
		},
		complete(res){
			console.log(res);
		}
		})
	
	}
}
  1. 上图

    在这里插入图片描述
    在这里插入图片描述

  2. 搞定!代码记录。

相关推荐

  1. uniapp微信程序下载保存图片本地,base64

    2024-04-21 11:38:04       48 阅读
  2. uniapp微信程序点击保存图片

    2024-04-21 11:38:04       45 阅读
  3. flutter base64图片保存相册

    2024-04-21 11:38:04       40 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-21 11:38:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-21 11:38:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-21 11:38:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-21 11:38:04       18 阅读

热门阅读

  1. 2024蓝桥杯每日一题(数学期望)

    2024-04-21 11:38:04       14 阅读
  2. LeetCode 每日一题 2024/4/15-2024/4/21

    2024-04-21 11:38:04       13 阅读
  3. uniapp封装websocket以及心跳检测、重连

    2024-04-21 11:38:04       12 阅读
  4. 十、使用repo管理yocto各个layer

    2024-04-21 11:38:04       13 阅读
  5. asp.net core mvc 路由

    2024-04-21 11:38:04       13 阅读
  6. web server apache tomcat11-04-manager 如何管理?

    2024-04-21 11:38:04       14 阅读
  7. npm 常用命令详解

    2024-04-21 11:38:04       12 阅读
  8. C# 匿名方法与扩展方法详解

    2024-04-21 11:38:04       14 阅读