微信小程序长按保存图片

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

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

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信

小白前端专栏收录该内容

8 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

先看效果图

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

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

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

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

实现

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'
            })
          }
        })
      }
    })
  }
})

您可能感兴趣的与本文相关的镜像