小程序canvas图片变形问题处理

问题背景和问题描述

新版小程序canvasdrawImage绘制图片后,图片在canvas上变形，如图所示： 原图

变形图片

问题背景

小程序sdk版本更新之后，原来的canvas基本废弃了，启用了新版的canvs的api和方法：

解决方案：

新版的canvas在获取到nodeRef的对象之后，要对canvas重新设置一下宽高，不然就会出现图片变形。

问题代码

const query = wx.createSelectorQuery()query.select('#my-canvas').fields({id: true,node: true,size: true}).exec(that.init.bind(that));//---------------------------------------------//init(res) {console.log("res:", res)const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatio//新接口需显示设置画布宽高；// canvas.width = res[0].width * dpr// canvas.height = res[0].height * dprctx.scale(dpr, dpr);ctx.imageSmoothingQuality = "high"this.setData({canvasObj: canvas,canvasCtx: ctx,dpr}, () => {if (this.data.type == 1) {//商品分享this.drawGoodsShareImage();} else {//商城分享this.drawShangchenghaibao();}});},

正确代码

const query = wx.createSelectorQuery()query.select('#my-canvas').fields({id: true,node: true,size: true}).exec(that.init.bind(that));//---------------------------------------------//init(res) {console.log("res:", res)const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatio//新接口需显示设置画布宽高；canvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr);ctx.imageSmoothingQuality = "high"this.setData({canvasObj: canvas,canvasCtx: ctx,dpr}, () => {if (this.data.type == 1) {//商品分享this.drawGoodsShareImage();} else {//商城分享this.drawShangchenghaibao();}});},