微信小程序长按保存图片

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

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

所用api

  1. wx.getSetting
  2. wx.authorize
  3. wx.getImageInfo
  4. 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>

js

// 长按保存授权
  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);
          }
        })
      }
    })
  },

这样就能长按保存了
参考原文链接点击查看原文

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值