微信小程序canvas drawImage绘制图片缩放问题解决

前言

canvas是微信小程序中最常用的组件之一，可以实现图片裁剪、压缩等多种功能。但是实现这些功能的前提之一是用canvas绘制图片，但是由于微信官方的辣鸡文档，总是要有坑需要踩，其中最常见的就是使用drawImage这个API绘制图片时经常出现的图片缩放问题。

解决思路

首先给定一个canvas宽度 （假定为窗口宽度），然后根据所要绘制的图片计算出图片的高宽比，再使用窗口高度（除去导航栏，状态栏剩下的部分）乘以图片高宽比得到画布高度，计算公式如下：
$canvas\_width=window\_width \\ canvas\_height=window\_height * \frac{image\_height}{image\_width}$canvas_width=window_widthcanvas_height=window_height∗image_widthimage_height​

代码实现

<canvas id="cut_image_canvas"
style="width:{{cut_img_canvas_w}}px;height:{{cut_img_canvas_h}}px;" 
type="2d"  >
</canvas>

page({
	data: {
    	// 屏幕宽度和高度
    	window_width: 0,
    	window_heigt: 0,
    	// 画布宽高
    	cut_img_canvas_w: 0,
   		cut_img_canvas_h: 0,
   		//绘图使用的图片对象
   		image_obj:{}
 	 },
 	 onReay:function(){
 	  const that = this
      wx.getSystemInfo({
        success: function(res) {
        //获取屏幕窗口高度和宽度
          that.data.window_heigt = res.windowHeight
          that.data.window_width = res.windowWidth
        },
      })
 	 },
 	 /**
     * 创建图片裁剪画布
     */
    create_cut_image_canvas: function(image_url) {
      const that = this
      //在自定义组件中使用时换成 that.createSelectorQuery()
      const query = wx.createSelectorQuery()
      query.select('#cut_image_canvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          console.log("res", res)
          const canvas = res[0].node
          //获取画布上下文
          that.data.cut_image_canvas = canvas.getContext('2d')
          let w = 0
          let h = 0
          // 根据要绘制的图片调整画布宽高
          wx.getImageInfo({
            src: image_url,
            success: function(res) {
            //设置canvas宽度为窗口宽度
              canvas.width = that.data.window_width;
              w = that.data.window_width
              //设置canvas高度
              canvas.height = that.data.window_width / res.width * res.height
              h = canvas.height
              that.setData({
                cut_img_canvas_h: h,
                cut_img_canvas_w: w
              })
              // 绘制图片
              that.data.image_obj = canvas.createImage();
              that.data.image_obj.src = image_url
              that.data.image_obj.onload = () => {
              that.data.cut_image_canvas.drawImage(that.data.image_obj, 0, 0, w, h)
              }
            }
          })

        })
    },
  })

注意事项

图片url不能使用网络图片，如果要使用网络图片，需要先下载到本地然后使用微信小程序生成的临时文件url。