微信小程序绘制图片到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 * dpr

    canvas.height = res[0].height * dpr

    const 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)    
    }
})