小程序canvas转图片

背景

在微信小程序上，当页面出现canvas和弹窗时，由于canvas优先级的问题，总是需要去处理canvas的显示隐藏，有时隐藏了之后又无法重新显示，因此考虑将canvas转图片显示。

代码实现

<!-- canvas，默认隐藏 -->
<canvas  ref="qrcode" id="qrcode"   type="2d" v-show="false"/>
<image :src="tempFilePath" style="width: 100px; height: 100px; margin: auto;"></image>

根据id生成canvas，后将canvas转成图片，返回tempFilePath

// 获取tempFilePath
qrcode(`qrcode`, code, 100, 100, (res) => {
	this.tempFilePath = res
})

// canvas转图片
function qrc(id, code, width, height, callback) {
	wx.createSelectorQuery()
  	.select('#' + id)
  	.node()
  	.exec(function (res) {
   		if (!res[0]) return
    	const canvas = res[0].node
    	const ctx = canvas.getContext('2d')
    	canvas.width = width
    	canvas.height = height
   		qrcode.api.draw(code, {
      		ctx: ctx,
      		width: width,
      		height: height
    	})
    	platfrom.canvasToTempFilePath({
      		canvas,
      		success: async (res) => {
        		callback && callback(res.tempFilePath)
      		}
    	})
  	})
}