downloadHeroImage: function () { // 微信不支持非https的图片下载，这里了个替换 let url = this.data.hero.HERO.ICON.replace(/http/, "https"); var that = this; wx.downloadFile({ url: url, success: function (res) { // 下载成功后拿到图片的路径，然后开始绘制 var path = res.tempFilePath; that.drawHeroImage(path); }, fail: function (res) { console.log(res) } }); }
保存图片
说了这么多，自然少不了最终的一步，将绘制到 canvas 的图片保存到手机相册，这里需要用户授权，你需要自己处理。
用的是微信给我们提供的接口 wx.canvasToTempFilePath 。需要我们传入起点坐标 (x, y)和画布大小 (width, height) 以及 canvasId 。
saveShareImage: function () { wx.showLoading({ title: '正在保存图片..', }); let that = this; wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.canvasWidth, height: that.data.canvasHeight, canvasId: 'share_canvas', success: function (res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { console.log(res); wx.showToast({ title: '保存到相册成功', duration: 1500, }) }, fail(res) { console.log(res) wx.showToast({ title: '保存到相册失败', icon: 'fail' }) }, complete(res) { console.log(res) } }) } }) }
开源
本着开源的精神，源码已经放在 Github 上，大家可以去上面查看具体代码。