微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

这篇具有很好参考价值的文章主要介绍了微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

微信小程序实现将图片保存到手机相册(方案一)

微信小程序实现将图片保存到手机相册(方案二)

微信小程序之点击复制文本到剪贴板

微信小程序---判断是IOS还是安卓

微信小程序分享图片给微信好友


微信小程序实现将图片保存到手机相册(方案一)

首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用wx.saveImageToPhotosAlbum方法保存图片到系统相册,需要注意的是这样写很可能会因为没有权限而导致下载不了图片,所以我们最后还需要给接口一个调用失败的回调函数,以此来获取权限,最后这个小功能就实现啦。

<!-- 按钮触发事件 -->
<button bindtap="downloadImg">点击下载图片</button>


const app = getApp(); //获取app实例
Page({
    data: {
        modalType: false, //弹框默认不显示
        imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片
    },
    // 点击下载图片事件
    downloadImg() {
        wx.showLoading({
            title: '加载中...'
        });
        //wx.downloadFile方法:下载文件资源到本地
        wx.downloadFile({
            url: this.data.imgUrl, //图片地址
            success: function (res) {
                //wx.saveImageToPhotosAlbum方法:保存图片到系统相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath, //图片文件路径
                    success: function (data) {
                        wx.hideLoading(); //隐藏 loading 提示框
                        wx.showModal({
                            title: '提示',
                            content: '保存成功',
                            modalType: false,
                        })
                    },
                    // 接口调用失败的回调函数
                    fail: function (err) {
                        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                            wx.showModal({
                                title: '提示',
                                content: '需要您授权保存相册',
                                modalType: false,
                                success: modalSuccess => {
                                    wx.openSetting({
                                        success(settingdata) {
                                            console.log("settingdata", settingdata)
                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功,再次点击图片即可保存',
                                                    modalType: false,
                                                })
                                            } else {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败,将无法保存到相册哦~',
                                                    modalType: false,
                                                })
                                            }
                                        },
                                        fail(failData) {
                                            console.log("failData", failData)
                                        },
                                        complete(finishData) {
                                            console.log("finishData", finishData)
                                        }
                                    })
                                }
                            })
                        }
                    },
                    complete(res) {
                        wx.hideLoading(); //隐藏 loading 提示框
                    }
                })
            }
        })
    }
})

微信小程序实现将图片保存到手机相册(方案二)

在微信小程序中要保存图片到本地相册,需要获取相册权限。总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.downloadFile,wx.saveImageToPhotosAlbum

openSetting,【打开小程序设置页】有坑,是官方的问题,这里出现授权弹框,如果你点击拒绝再次引导授权流程弹框不会立马弹出(官方解释说因为频繁代用授权会带来各种一系列问题),如果想马上再次弹出授权弹框需要通过button来解决。
点击查看官方解释

//再次打开授权引导

方法1:使用 button 组件来使用此功能,示例代码如下:
<button open-type="openSetting" bindopensetting="callback">打开设置页</button>

方法2:由点击行为触发wx.openSetting接口的调用,示例代码如下:
<button bindtap="openSetting">打开设置页</button>  openSetting() {  wx.openSetting()}

 wx.downloadFile 保存图片的时候,打印成功回调里边会有tempFilePath 后缀名不正确格式。(Android机会有这种情况,iOS不清楚),就回导致后续wx.saveImageToPhotosAlbum方法是出现错误:文件格式类型错误问题

有的说dowloadFile的url值要是jpg格式的,但是我试png也可以,具体情况具体分析。

var fileN=new Date().valueOf();
//filePath指定文件下载后存储的路径,wx.env.USER_DATA_PATH
var fileP=wx.env.USER_DATA_PATH+'/'+fileN+'.jpg'
wx.dowloadFile({
	url:'你的图片url地址',
	filePath:fileP,//这里要加这个filePath属性
	success:(res)=>{
		var filePath=res.filePath;
		wx.saveImageToPhotosAlbum({
			filePath,
			success:(res)=>{
				console.log('保存成功')
			}
		})
	}
	
})

完整代码

<image src="{{url}}"></image>
 <view bindtap="clickSaveImg" class="save-code"></view>

Page({
	data:{
		url:'',//图片地址
	},
	clickSaveImg(){//先授权相册
		wx.getSetting({
			success:res=>{
				if(!res.authSetting['scope.writePhotosAlbum']){//未授权的话发起授权
					wx.authorize({
						scope:'scope.writePhotosAlbum',
						success:()=>{//用户允许授权,保存到相册
							this.saveImg();
						},
						fail:()=>{//用户拒绝授权,然后就引导授权(这里的话如果用户拒绝,不会立马弹出引导授权界面,坑就是上边所说的官网原因)
							wx.openSetting({
								success:()=>{
									wx.authorize({
										scope:'scope.writePhotosAlbum',
										succes:()=>{//授权成功,保存图片
										this.saveImg();
											
										}
									})
								}
							})
						}
					})
				}else{//已经授权
					this.saveImg();
				}
			}
		})
	},
	
	saveImg(){//保存到相册
		let {url} = this.data;
		wx.downloadFile({//这里如果有报错就按照上边的解决方案来处理
			url:url,
			success:(res)=>{
				wx.saveImageToPhotosAlbum({
					filePath:res.tempFilePath,
					success:(res)=>{
						wx.showToast({
							title:'保存成功!'
						})
					},
					faile:(err)=>{
						console.log('失败!')
					}
				})
			}
		})
	},

})

 最后一个坑

开发者工具手机打开调试都可以成功保存图片,但是关了调试,就不可以保存。这个时候需要登录到微信小程序后台(开发->开发设置),查看downloadFile合法域名 中有没有配置合法域名,也就是下载图片路径的白名单,你的图片路径域名需要在这里配置,才可以!然后就可以保存图片!!!文章来源地址https://www.toymoban.com/news/detail-419068.html

微信小程序之点击复制文本到剪贴板

<view>内容:{{contents}} </view>
<view  bindtap='copyText' data-text="{{contents}}">复制</view>

Page({
  data: {
    contents:'这是可以复制的文字,粘贴后即可看到效果'
  },
  copyText: function (e) {
    console.log(e)
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
      }
    })
  },
})

微信小程序---判断是IOS还是安卓

 let res = wx.getSystemInfoSync();
 if(res.platform == 'ios')   //ios
  if(res.platform == 'android')  //安卓
    if(res.platform == 'devtools')  //开发者工具

微信小程序分享图片给微信好友

shareImg(){
  wx.downloadFile({
    url: 'https://xxx.jpg',//分享的图片的链接
    success: (res) => {
      wx.showShareImageMenu({
        path: res.tempFilePath
      })
    }
  })
},

到了这里,关于微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包