实现保存图片功能的3种方式
发布于 4 年前 作者 fangyi 2140 次浏览 来自 分享

前言

图片保存是业务中非常常见的需求，本文带你解锁三种不一样的图片保存方式：

  • 点击图片预览保存
  • 点击按钮保存
  • 长按图片保存

点击图片预览保存

点击图片预览保存先通过wx.previewImage接口预览图片，然后长按图片弹出底部弹窗保存图片。这种方式的缺点是会多一个预览的步骤

详细实现代码如下：

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: ['https://www.xxx.png', ...] // 需要预览的图片http链接列表
})
  • 如果只想显示一张，那urls数组值只写一个即可，但urls的类型必须是数组
  • current默认第一张，如果你有多张图片，可以选择其中一张作为优先预览显示的图片

实现效果如下：

点击按钮保存图片

微信官方并当前没有直接提供api实现保存图片到相册的功能，其实现的思路是利用canvas画布有提供api可保存到相册，将图片通过画布相关接口绘制成画布，再通过其api保存到相册即可。

详细的实现步骤如下

  1. 首先准备一个画布和按钮
<canvas  canvas-id="myQrcode" style="width: 100%; height: 180px;" />
<button  bindtap="onSave" data-value="myQrcode" style="margin-top: 100rpx">保存图片</button>
  1. 在合适的时机绘制画布（请求到图片后、生命周期等）
const ctx = wx.createCanvasContext('myQrcode')
wx.getImageInfo({
   src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369241864,430646211&fm=26&gp=0.jpg', // 图片地址
   success: (res) => {
     console.log(res)
     ctx.drawImage(res.path, 0, 0, 375, 180)
     ctx.draw()
   }
})
  1. 点击按钮实现保存逻辑
onSave(res) {
 const { value } = res.currentTarget.dataset
 wx.canvasToTempFilePath({
   canvasId: value,
   success: (res) => {
     const tempFilePath = res.tempFilePath;
     //保存二维码
     wx.getSetting({
       success: (res) => {
         console.log(res)
         const status = res.authSetting['scope.writePhotosAlbum']
         if (!status) {
           // 引导用户授权...
         } else {
           // 保存图片到系统相册
           this.saveImg(tempFilePath)
         }
       }
     })
   },
   fail: function(err) {
     console.log(err);
   }
 });
},
/* 保存图片 */
saveImg(tempFilePath) {
  wx.saveImageToPhotosAlbum({
    filePath: tempFilePath,
    success: function (res) {
      wx.showToast({
        title: '保存图片成功',
      })
    },
    fail: function (err) {
      wx.showToast({
        title: '保存图片失败' ,
      })
    }
  })
}

实现效果如下：

  • 如果在组件中使用这种方式，画布相关的api第二个参数需要传入组件的this。
  • wx.saveImageToPhotosAlbum接口不支持网络路径。
  • wx.getImageInfo接口对于网络图片需先配置download域名才能生效。

长按图片保存

虽然官方也没有提供图片长按保存的功能，但是根据上节内容的实现方法配合wx.showActionSheet接口即可实现长按图片保存的功能

具体的实现步奏如下：

  1. 准备画布，监听长按操作
<canvas canvas-id="myQrcode"  style="width: 100%; height: 180px" data-value="myQrcode" bindlongpress="showActionSheet"/>

2.长按图片弹出操作菜单

showActionSheet(res) {
  wx.showActionSheet({
    itemList: ['保存图片'],
    success: (e) => {
      if(e.tapIndex === 0) {
        this.onSave(res)
      }
    },
    fail (e) {
      console.log(e.errMsg)
    }
  })
},

3.实现保存图片相关逻辑，拷贝上节的onSave及相关方法即可，思路都是一样的。

实现效果如下：


  • 这三种方式保存图片的路径都是相同的。
回到顶部