美文网首页
小程序长按保存图片

小程序长按保存图片

作者: 怦然心动_a40c | 来源:发表于2020-07-20 18:15 被阅读0次

    wxml部分

    <image data-url="{{item}}" bindlongtap="longPressSaveImg " />
    

    js部分

      //20200720 新增长按保存图片
      longPressSaveImg (e) {
        let that = this
        let url = e.currentTarget.dataset.url;
        console.log(url);
        if (!wx.saveImageToPhotosAlbum) {
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
          })
          return;
        }
        // 检查用户授权
        wx.getSetting({
          success(res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              // 接口调用询问  
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                  that.saveImg(url);
                },
                fail() {
                  // 用户拒绝授权  
                  wx.showModal({
                    title: '保存图片',
                    content: '保存图片需要您授权',
                    showCancel: true,
                    confirmText: '确定',
                    success (res) {
                      if (res.confirm) {
                        // 打开设置页面  
                        wx.openSetting({
                          success (res) {
                            if (res.authSetting['scope.writePhotosAlbum']) {
                              that.saveImg(url);
                            } else {
                              wx.showToast({
                                title:'授权失败!',
                                icon:"none"
                               });
                            }
                          },
                          fail (res) {
                            wx.showToast({
                              title:'授权失败!',
                              icon:"none"
                             });
                          }
                        });
                      } else if (res.cancel) {
                        wx.showToast({
                          title:'您已取消授权!',
                          icon:"none"
                         });
                      }
                    }
                  })
                }
              })
            } else {
              that.saveImg(url)
            }
          },
          fail(res) {
            console.log(res);
          }
        })
      },
      saveImg (imageUrl) { 
         wx.getImageInfo({
             src: imageUrl,
             success:(res)=> {
              let path = res.path;
                wx.saveImageToPhotosAlbum({
                 filePath:path,
                 success:(res)=> { 
                    wx.showToast({
                    title:'保存成功'
                    });
                 },
                 fail:(res)=>{
                    wx.showToast({
                      title:'您已取消保存',
                      icon:"none"
                    });
                 }
                })
               },
             fail:(res)=> {
              console.log(res);
            }
        })
        这里下载图片到小程序资源库,感觉会不会占本地内存,导致小程序变卡,所以用了上边那个方法,
        // wx.downloadFile({
        //   url: imageUrl,
        //   success (res) {
        //     // 保存图片到系统相册  
        //     wx.saveImageToPhotosAlbum({
        //       filePath: res.tempFilePath,
        //       success(res) {
        //         wx.showToast({
        //           title: '保存成功'
        //         });
        //       },
        //       fail(res) {
        //         wx.showToast({
        //           title: '您已取消保存',
        //           icon:'none'
        //         });
        //       }
        //     })
        //   },
        //   fail (res) {
        //   }
        // })
      },
    
    
    

    相关文章

      网友评论

          本文标题:小程序长按保存图片

          本文链接:https://www.haomeiwen.com/subject/gbbykktx.html