绘制图片到canvas上并保存图片

绘制图片到canvas上

html代码

<canvas id="myCanvas" wx:if="canvasShow" style="width: 375px; height: 904px;" type="2d" ></canvas>

const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].node;const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dprcanvas.height = res[0].height * dprconst ctx = canvas.getContext('2d')ctx.scale(dpr, dpr)//canvas.createImage()在微信版本7.0.20会有报错，进入不了onload。 但是在7.0.21已经修复。let pic = canvas.createImage();ctx.fillRect(0, 0, 100, 100)pic.src = self.data.imgsrc; //可以是本地，也可以是网络图片console.log(pic)pic.onload = () => {//不要用官方示例的图片路径，包括网上在这之前所有的文档/示例里是地址链接的都不要看了，要用image对象！ctx.drawImage(pic,0, 0, 150, 150);}}

把绘制完的canvas导出

wx.canvasToTempFilePath({ //将canvas生成图片//这里写canvas为获取或者创建的canvas对象 不要按照文档里写canvasId ，否则会有fail canvas is empty 的报错canvas:canvas, x: 0, y: 0,width: self.data.imageWidth, //自己定义canvas的宽度height: self.data.imageHeight, //自己定义canvas的高度destWidth: self.data.imageWidth, //截取canvas的宽度destHeight: self.data.imageHeight, //截取canvas的高度success: function (res) {console.log(res)wx.saveImageToPhotosAlbum({ //保存图片到相册filePath: this.data.savePic,success: function () {wx.showToast({title: "生成图片成功！",duration: 2000})}})},fail:function(res){console.log(res) }})