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

问题背景和问题描述

• 问题描述
  新版小程序canvas drawImage绘制图片后,图片在canvas上变形，如图所示：

1. 原图
   
2. 变形图片
   

• 问题背景
  小程序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].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    
    //新接口需显示设置画布宽高；
    // canvas.width = res[0].width * dpr
    // canvas.height = res[0].height * dpr
    ctx.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].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    
    //新接口需显示设置画布宽高；
    canvas.width = res[0].width * dpr
    canvas.height = res[0].height * dpr
    ctx.scale(dpr, dpr);
    ctx.imageSmoothingQuality = "high"
    this.setData({
      canvasObj: canvas,
      canvasCtx: ctx,
      dpr
    }, () => {
      if (this.data.type == 1) {
        //商品分享
        this.drawGoodsShareImage();
      } else {
        //商城分享
        this.drawShangchenghaibao();
      }

    });

  },