微信小程序长按保存图片

最新推荐文章于 2023-03-06 09:38:00 发布

爱笑的大雄z

最新推荐文章于 2023-03-06 09:38:00 发布

阅读量1.5k

点赞数 1

分类专栏：小白前端文章标签：小程序微信

本文链接：https://blog.csdn.net/ding139725/article/details/120791750

版权

小白前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中实现长按图片保存功能，包括使用bindlongpress事件监听、getImageInfo获取图片信息以及saveImageToPhotosAlbum将图片保存到手机相册的过程。适合前端开发者了解小程序开发细节。

摘要由CSDN通过智能技术生成

先看效果图

这里使用电脑端做录屏，在真机测试一样好用

正常保存图片可以又两种做法：

长按图片直接保存
长按图片弹出菜单保存

我们这里讲最直接的方法也就是第一个种长按图片直接保存

实现

bindlongpress：长按事件
wx.getImageInfo：获取图片信息方法
wx.saveImageToPhotosAlbum：保存图片到相册方法

注意：saveImageToPhotosAlbum这个方法不支持网络地址，所以需要getImageInfo方法，转换一下本地地址

代码

wxml文件

// index/index.wxml
<view class="container">
  <image src="{{img}}" mode="widthFix" bindlongpress="saveImg"></image>
</view>

js文件

Page({
  data: {
    img: 'https://note.youdao.com/yws/api/personal/file/014F0BD91E814953BC5101FA97A2A7A3?method=download&shareKey=1beb278bdeae350aedd49241745f679a'
  },
  saveImg() {
    var url = this.data.img
    wx.getImageInfo({
      src: url,
      success(res) {
        console.log(res)
        wx.saveImageToPhotosAlbum({
          filePath: res.path,
          success: function(suc) {
            wx.showToast({
              title: '图片保存成功',
              icon: 'none'
            })
          }
        })
      }
    })
  }
})