微信小程序Canvas绘制证件照底色，小程序Canvas绘图微信小程序Canvas绘制证件照底

小程序提供了Canvas绘图的API，我们很轻松就可以使用Canvas绘制一张图片并保存下来。本次案例使用绘制证件照的方式演示Canvas的示例。
准备去掉背景的证件照（宽160px，高230px)
代码 index.wxml

【微信小程序Canvas绘制证件照底色，小程序Canvas绘图】index.wxss

.firstCanvas{ width: 160px; height: 230px; margin:30px auto 0; } .saveimg{ margin-top: 30px; }

index.js

Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, onReady: function (e) { // 使用 wx.createContext 获取绘图上下文 context var context = wx.createCanvasContext('firstCanvas') // 设置边框颜色 context.setStrokeStyle("#fff") // 设置边框粗细 context.setLineWidth(0) // 设置背景颜色 context.setFillStyle("#f00") context.fillRect(0, 0, 160, 230) // 将人像绘制上去 context.drawImage('../images/1.png',0,0,160,230) // 创建一个矩形 context.rect(0, 0, 160, 230) context.stroke() context.draw() }, // 保存图片到相册 saveimg(){ var that = this; // 先将Cnavas绘制成临时文件 wx.canvasToTempFilePath({ x: 0, y: 0, width: 160, height: 230, destWidth: 160, destHeight: 230, canvasId: 'firstCanvas', success(res) { console.log(res.tempFilePath) // 再保存到相册 wx.saveImageToPhotosAlbum({ filePath:res.tempFilePath, success(res) { wx.showToast({ title: '已保存', icon: 'success', duration: 2000 }) } }) } }) } })

演示