介绍 & lt; https://www.yisu.com/zixun/image src=" {{url}} " data-url=" {{url}} " bindlongpress=" saveImage "> 页面({/* *
*,才能页面的初始数据
,*/,数据:{
url:才能“https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
},
,//长按保存图片
,saveImg (e) {
,,let url =, e.currentTarget.dataset.url;
,,wx.saveImageToPhotosAlbum ({
,,,,filePath: url,
,,,,成功(res), {,
,,,,,console.log (res);
,,,,},
,,,,失败(res) {
,,,,,console.log (res);
,,,,}
,,,})
,}
}) wx.getSetting ({
,才能成功:,(res),=祝辞,{
,,,if (! res.authSetting [& # 39; scope.writePhotosAlbum& # 39;]), {
,,,,wx.authorize ({
,,,,,范围:,& # 39;scope.writePhotosAlbum& # 39;
,,,,,成功:()=祝辞,{
,,,,,,//,同意授权
,,,,,},
,,,,,失败:,(res),=在{
,,,,,,console.log (res);
,,,,,}
,,,,})
还有,,,}{
,,,,//,已经授权了
,,,}
,,},
,,,失败:(res),=在{
,,,console.log (res);
,,}
})才能 wx.getImageInfo ({
,,,src: url,
,才能成功:(res)=祝辞,{
,,,let path =, res.path;
,,,wx.saveImageToPhotosAlbum ({
,,,,filePath:路径,
,,,,成功(res), {,
,,,,,console.log (res);
,,,,},
,,,,失败:(res)=祝辞{
,,,,,console.log (res);
,,,,}
,,,})
,,},
,,失败:(res)=祝辞,{
,,,console.log (res);
,,}
})才能 页面({
,数据:{
,,url:“https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
},
,//长按保存图片
,saveImg (e) {
let 才能;url =, e.currentTarget.dataset.url;//才能用户需要授权
wx.getSetting({才能
,才能成功:,(res),=祝辞,{
,,,if (! res.authSetting [& # 39; scope.writePhotosAlbum& # 39;]), {
,,,,wx.authorize ({
,,,,,范围:,& # 39;scope.writePhotosAlbum& # 39;
,,,,,成功:()=祝辞,{
,,,,,,//,同意授权
,,,,,,this.saveImg1 (url);
,,,,,},
,,,,,失败:,(res),=在{
,,,,,,console.log (res);
,,,,,}
,,,,})
还有,,,}{
,,,,//,已经授权了
,,,,this.saveImg1 (url);
,,,}
,,},
,,,失败:(res),=在{
,,,console.log (res);
,,}
}),才能,
},
,saveImg1 (url) {
wx.getImageInfo({才能
,,,src: url,
,才能成功:(res)=祝辞,{
,,,let path =, res.path;
,,,wx.saveImageToPhotosAlbum ({
,,,,filePath:路径,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关小程序实现长按保存图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
微信浏览器打开编辑页面如果是img标签的话,长按会弹出保存图片的选项。但是微信小程序里面不可以。需要自己写这个功能。这个功能有两个点,一个是长按,一个是保存图片到本地。
1,微信小程序提供了长按的事件,叫<强> bindlongpress
2,微信小程序同样提供了保存图片的接口,是<强> wx.saveImageToPhotosAlbum()
弄清楚了,我们可以开始做这个功能了,首先写wxml
然后就是js代码了
这样写感觉没问题,但是不行,为什么,看下面文档说明。
遇到了两个问题:
1,需要授权
2路径不能是网络路径
一个问题一个问题解决,首先长按之后,不去保存图片,先去判断用户是否授权,这个接口就不多讲了,之前写过。
直接贴上代码
授权问题解决了以后,要处理另外一个问题,就是图片不能是网络路径。这个时候我们可以用到另外一个接口,叫<强> wx.getImageInfo()
通过文档看的到,这个接口是可以接收网络路径的,返回的是本地路径,所以我们先用这个接口把网络路径转化一下,再拿去给wx。saveImageToPhotosAlbum用。
所以整体的代码是这样子的
