微信小程序长按保存图片_微信小程序长按存储表情包

1：给需要有长按保存图片的image加上longpress事件

wxml：

<image src="{{url}}" data-url="{{url}}" class="xiang_img" bindlongpress="saveImage"></image>

2：调用微信小程序保存图片的接口（wx.saveImageToPhotosAlbum）

需要注意两个问题：一个是需要用户的授权，还有一个是图片不能是网络路径。

 

长按之后判断用户是否授权，调用 wx.getSetting()方法

如果没有授权，就向用户发起授权请求

当我们渲染页面时，用到的图片如果是网络路径，就需要先把网络路径转为可用的本地路径，调用wx.getImageInfo()方法，官方文档可以看到，回调函数里面path可以获取到返回的本地路径。

把这个路径放到wx.saveImageToPhotosAlbum()方法里面用就可以把图片保存到相册了。

js：

// 长按保存功能--授权部分
saveImage (e) {
    let _this = this
    wx.showActionSheet({  //显示操作菜单
        itemList: ['保存到相册'],
        success(res) {
            let url = e.currentTarget.dataset.url;
            wx.getSetting({
                success: (res) => {
                    if (!res.authSetting['scope.writePhotosAlbum']) { //判断是否授权
                        wx.authorize({  //如果没授权，则向用户发起授权请求
                            scope: 'scope.writePhotosAlbum',
                            success: () => {
                                // 同意授权
                                _this.saveImgInner(url);
                            },
                            fail: (res) => {
                                console.log(res);
                                wx.showModal({
                                    title: '保存失败',
                                    content: '请开启访问手机相册权限',
                                    success(res) {
                                        wx.openSetting()
                                    }
                                })
                            }
                        })
                    } else {
                        // 已经授权了
                        _this.saveImgInner(url);
                    }
                },
                fail: (res) => {
                    console.log(res);
                }
            })   
        },
        fail(res) {
            console.log(res.errMsg)
        }
    })
},
// 长按保存功能--保存部分
saveImgInner (url) {
    wx.getImageInfo({
        src: url,
        success: (res) => {
            let path = res.path;
            wx.saveImageToPhotosAlbum({
                filePath: path,
                success: (res) => {
                    console.log(res);
                    wx.showToast({
                        title: '已保存到相册',
                    })
                },
                fail: (res) => {
                    console.log(res);
                }
            })
        },
        fail: (res) => {
            console.log(res);
        }
    })
},

参考：https://segmentfault.com/a/1190000021452767

https://www.jianshu.com/p/e592e9b28192

参考别人写的，自己捋了一遍思绪。