场景:使用小程序文档的API可以获取带参数的二维码和小程序码,但是小程序码中的图片默认都是小程序的头像(红框中的图片)。现在我们需要替换里面的图片,然后将小程序码保存成一张图片存入相册。
1.获取带参数的小程序码
小程序开发文档提供三种接口获取带参数的小程序码,根据自己的需求选择相应的接口。
https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html
2.将网络图片路径转换为本地图片路径。
- 使用wx.getImageInfo或者wx.downloadFile可以返回图片的本地路径。
- 用wx.setStorage将返回的本地路径存储在本地缓存中并指定key的值:path1,path2。
- 用wx.getStorageSync(KEY)从本地缓存中同步获取指定的key对应的内容。
备注:url1为第一步获取到的带参数的小程序码。url2为需要填入小程序码中间的图片。
const url1 = "https://images/ewm.jpg"; const url2 = "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epNAxDh5I0dQAQrNVs4pKWrYibfbA6Xw6lOJqqYic4qTFXt9tjbTJrgpusYy4KCEXnF3iaib8sdqP6CfQ/132"; wx.getImageInfo({ src: url1, success:function(res){ wx.setStorage({ key: 'path1', data: res.path, }) } }) wx.getImageInfo({ src: url2, success:function(res){ wx.setStorage({ key: 'path2', data: res.path, }) } }) const path1 = wx.getStorageSync('path1'); const path2 = wx.getStorageSync('path2');
3.根据设备宽度设置canvas的width和height。
- 在WXML中设置canvas组件,并在JS文件中设置data字段width,height,margin。
- 获取设备的宽度,并保存在全局变量windowWidth中。
- 在小程序码生成页面读取全局变量windowWidth,并根据设备的宽度设置canvas的width,height,margin。
<canvas style='width:{{width}}px;height:{{height}}px;margin:50px {{margin}}px;background-color:#ffffff;' canvas-id='ewmCanvas'></canvas>
// 获取设备宽度 wx.getSystemInfo({ success: function (res) { app.globalData.windowWidth = res.windowWidth; }, })
//在对应页面读取设备的宽度 const width = app.globalData.windowWidth*4/5; const height = app.globalData.windowWidth; const margin = app.globalData.windowWidth / 10; //在data中设置canvas的width和height以及左右的边距margin this.setData({ width:width, height: height, margin: margin })
4.使用canvas绘制小程序码。
- 根据canvasId创建canvas绘图。
- 根据path1绘制原始的小程序码图片。
- 绘制底部文字说明。
- 通过ctx.save()保存当前的绘图上下文。
- 绘制一个圆形,使它能够完全覆盖掉原始小程序码中间的图片区域。
- 通过ctx.clip()方法将画布中的圆形裁剪出来。
- 在裁剪的圆形区域绘制一个相同大小的图片(path2),此时图片只能显示剪切后的圆形区域。
- ctx.restore()恢复之前保存的绘图上下文。
- 绘制图片和文字。ctx.stroke(),ctx.draw()。
const ctx = wx.createCanvasContext('ewmCanvas') ctx.drawImage(path1, 0, 0, this.data.width, this.data.width); ctx.setTextAlign('center') ctx.setFillStyle('#8c8c8c') ctx.setFontSize(15) ctx.fillText('扫一扫小程序码', this.data.width / 2, this.data.width + 30) ctx.save(); ctx.strokeStyle = "#ffffff"; ctx.arc(this.data.width / 2, this.data.width / 2, this.data.width * 9 / 40, 0, 2 * Math.PI); //绘制圆形 ctx.clip(); ctx.drawImage(path2, this.data.width * 11 / 40, this.data.width * 11 / 40, this.data.width * 9 / 20, this.data.width * 9 / 20); ctx.stroke(); ctx.restore(); ctx.draw();
5.将canvas保存至相册。
- 创建一个点击事件saveImg。
- 调用wx.canvasToTempFilePath将canvas存储在本地,big返回一个本地路径。
- 调用wx.saveImageToPhotoAlbum将返回的本地路径保存至相册。
- 调用wx.showToast创建保存成功与失败时的消息提示框。
备注:当用户关闭了相册权限时就会调用失败,此时可在小程序的设置中打开权限。
saveImg:function(e){ wx.canvasToTempFilePath({ canvasId: 'ewmCanvas', success: function (res) { const path = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: path, success: function (res) { wx.showToast({ title: '保存成功', icon:'success' }) }, fail: function (res) { wx.showToast({ title: '保存失败,请在小程序中打开相册权限', icon: 'none' }) } }) } }, this) }