找回密码
 立即注册
2024年3月12日起,关闭新用户注册和登录,相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 66|回复: 0
打印 上一主题 下一主题

微信小程序的image怎么可以长按保存到手机

253

主题

253

主题

253

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
跳转到指定楼层
1#
 楼主| admin 发表于 6 天前 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
首先,在WXML文件中为Image组件添加bindlongtap属性绑定长按事件,例如:<image src="{{imageUrl}}" bindlongtap="saveImage" />




JS:
  1. Page({
  2.   data: {
  3.     imageUrl: '图片路径' // 可以是网络或本地路径
  4.   },
  5.   saveImage: function(e) {
  6.     const url = e.currentTarget.dataset.src || this.data.imageUrl;
  7.     const that = this;
  8.     wx.getSetting({
  9.       success(res) {
  10.         if (!res.authSetting['scope.writePhotosAlbum']) {
  11.           wx.authorize({
  12.             scope: 'scope.writePhotosAlbum',
  13.             success() {
  14.               that.saveImageToAlbum(url);
  15.             },
  16.             fail() {
  17.               wx.showModal({
  18.                 title: '提示',
  19.                 content: '需要开启相册权限才能保存图片',
  20.                 success(res) {
  21.                   if (res.confirm) {
  22.                     wx.openSetting();
  23.                   }
  24.                 }
  25.               });
  26.             }
  27.           });
  28.         } else {
  29.           that.saveImageToAlbum(url);
  30.         }
  31.       }
  32.     });
  33.   },
  34.   saveImageToAlbum: function(url) {
  35.     const that = this;
  36.     wx.getImageInfo({
  37.       src: url,
  38.       success(res) {
  39.         wx.saveImageToPhotosAlbum({
  40.           filePath: res.path,
  41.           success() {
  42.             wx.showToast({ title: '保存成功', icon: 'success' });
  43.           },
  44.           fail() {
  45.             wx.showToast({ title: '保存失败', icon: 'none' });
  46.           }
  47.         });
  48.       },
  49.       fail() {
  50.         wx.showToast({ title: '图片加载失败', icon: 'none' });
  51.       }
  52.     });
  53.   }
  54. });
复制代码


快速回复 返回顶部 返回列表