小程序 canvas画图片

小程序 canvas 新版（2.9.0之后）和旧版画图步骤 这边记录一下希望大家少踩坑

旧版

• 需要canvas-id

<canvas :style="`width: ${cWidth}px; height: ${cHeight}px;position:fixed;left:-10000px;`" canvas-id="myCanvas" />

• 需要draw

// 创建指定id的canvas实例
var ctx = wx.createCanvasContext('myCanvas')
// 第一个参数是图片路径
ctx.drawImage(imgPath, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx.draw(false, ()=>{
	// 图片画出来之后的其他操作 可以通过wx.canvasToTempFilePath做后续操作
	// 一定要在回调里 如果不生效可以尝试用setTimeout包裹回调函数
})


// 贴两个可能用到的方法
// 一、获取移动设备的宽 可以作为画布的宽
wx.getSystemInfo({
	success: (result) => {
		console.log('设备', result)
	},
	fail: () => {},
	complete: () => {}
})
// 二、获取网络图片或者本地图片的宽高及临时路径
wx.getImageInfo({
	src: this.imgUrl,
	success: (res) => {
		console.log('图片', res)
	}
})

新版(2d)

• 需要设置type和id

<canvas id="myCanvas" type="2d" :style="`width: ${cWidth}px; height: ${cHeight}px;position:fixed;left:-1000px;`" />

• 创建方法变了 draw方法也没有了 ctx.drawImage第一个参数是需要通过canvas.createImage()创建出来的对象

const query = wx.createSelectorQuery()
query
	.select('#myCanvas')
	.fields({ node: true, size: true })
	.exec((res) => {
		const canvas = res[0].node
		this.canvas = canvas // 保存canvas实例 可能会用到
		const ctx = canvas.getContext('2d')
		// dpr好像是防止图片模糊之类的
		const dpr = wx.getSystemInfoSync().pixelRatio
		canvas.width = res[0].width * dpr
		canvas.height = res[0].height * dpr
		ctx.scale(dpr, dpr)
		// 描绘图片 顺序不能换
		// 1.创建图片 canvas.createImage (不能通过new Image())
		const img = canvas.createImage()
		// 2.图片加载完毕之后再画出来
		img.onload = () => {
			// 新的方法第一个参数需要是DOM元素
			ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
			// 不需要再调用draw方法
			wx.canvasToTempFilePath({
				canvas: this.canvas, // 需要传canvas实例
				success: (result) => {
					console.log('新的图片', result)
				}
			})
		}
		// 3.赋值src要在onload后面
		img.src = ''
})