微信小程序

2024-07-09 13:11| 来源: 网络整理| 查看: 265

点击图片预览保存

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

详细实现代码如下：

wx.previewImage({ current: '', // 当前显示图片的http链接 urls: ['https://www.xxx.png', ...] // 需要预览的图片http链接列表 }) 如果只想显示一张，那urls数组值只写一个即可，但urls的类型必须是数组

实现效果如下：

点击按钮保存图片

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

详细的实现步骤如下

首先准备一个画布和按钮保存图片在合适的时机绘制画布（请求到图片后、生命周期等） 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() } }) 点击按钮实现保存逻辑 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接口即可实现长按图片保存的功能

具体的实现步奏如下：

准备画布，监听长按操作

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

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

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

实现效果如下：

这三种方式保存图片的路径都是相同的。

【本文地址】

微信小程序

微信小程序

今日新闻

推荐新闻