微信小程序长按保存图片

最新推荐文章于 2025-03-22 10:02:34 发布

原创最新推荐文章于 2025-03-22 10:02:34 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何在微信小程序中实现长按保存图片的功能，主要涉及的API包括wx.getSetting、wx.authorize、wx.getImageInfo和wx.saveImageToPhotosAlbum。通过在wxml中设置图片src并结合JS代码，用户可以顺利长按保存图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所用api

wx.getSetting
wx.authorize
wx.getImageInfo
wx.saveImageToPhotosAlbum

wx.wxml src写你的图片地址，本地或者网络都可以

<!--pages/save/save.wxml-->
<image src="/asset/u=1709216491,2536617744&fm=26&gp=0.png"  data-url="/asset/u=1709216491,2536617744&fm=26&gp=0.png" bindlongpress="saveImage"></image>
<text>长按保存</text>

// 长按保存授权
  saveImage(e) {
    let that = this
    wx.showActionSheet({
      itemList: ['保存到本地'],
      success(res) {
        let url = e.currentTarget.dataset.url;
        console.log(url);
        // 使用setting获取当前小程序权限
        wx.getSetting({
          success: (res) => {
            console.log(res.authSetting);
            //  当没有保存权限时获取权限
            if (!res.authSetting['scope.writePhotosAlbum']) {
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                //  同意授权
                success: () => {
                  that.saveImgInner(url);
                },
                fail: (res) => {
                  console.log(res);
                  wx.showModal({
                    cancelColor: 'red',
                    title: '保存失败',
                    content: '请开启访问权限',
                    success: (res) => {
                      wx.openSetting()
                    }
                  })
                }
              })
            } else {
              console.log(2);
              // 已授权
              that.saveImgInner(url);
            }
          }
        })
      }
    })
  },
  saveImgInner(url) {
    // 使用getImage转换地址
    wx.getImageInfo({
      src: url,
      success: (res) => {
        let path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: (res) => {
            wx.showToast({
              title: '图片已保存',
            })
          },
          fail: (res) => {
            console.log(res);
          }
        })
      }
    })
  },