小程序提供了Canvas绘图的API，我们很轻松就可以使用Canvas绘制一张图片并保存下来。本次案例使用绘制证件照的方式演示Canvas的示例。
准备
去掉背景的证件照（宽160px，高230px)
代码
index.wxml
<!-- Canvas 2D组件 --><canvas canvas-id="firstCanvas" class="firstCanvas"></canvas><!-- 保存按钮 --><button bindtap="saveimg" class="saveimg">保存到相册</button>
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 获取绘图上下文 contextvar 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})}})}})}})
如果你想开发小程序或者了解更多小程序的内容，可以通过专业开发公司，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序开发、APP开发、网站开发、H5小游戏开发
