小程序提供了Canvas绘图的API。我们可以很方便的使用Canvas画图并保存。本案例通过绘制证件照来演示Canvas的示例。准备去除证件照背景（宽160px，高230px）代码index.wxml!--保存按钮-->保存到相册index.wxss.firstCanvas{width:160px;高度：230px；margin:30pxauto0;}.saveimg{margin-top:30px;}index.jsPage({canvasIdErrorCallback:function(e){console.error(e.detail.errMsg)},onReady:function(e){//使用wx.createContext获取绘图上下文上下文varcontext=wx.createCanvasContext('firstCanvas')//设置边框颜色context.setStrokeStyle("#fff")//设置边框粗细context.setLineWidth(0)//设置背景colorcontext.setFillStyle("#f00")context.fillRect(0,0,160,230)//绘制肖像context.drawImage('../images/1.png',0,0,160,230)//创建一个rectanglecontext.rect(0,0,160,230)context.stroke()context.draw()},//保存图片到相册saveimg(){varthat=this;//先把Cnavas画成a临时文件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:'Saved',icon:'success',duration:2000})}})}})}})演示小程序体验思路拓展开发过程中可以使用本地镜像进行开发。如果实际应用需要使用网络图片，需要使用wx.downloadFile接口下载，保存为本地临时文件，然后使用临时文件的地址进行绘制！作者TANKINGhttps://github.com/likeyun
