小程序canvas居中剪裁绘制图片

如上图，绘制图片时，将图片等比例缩放至铺满画布，然后只显示图片最中间部分。

1. 获取图片信息

wx.getImageInfo({
    src: url,
    success: function (res) {
      resolve(res);
    },
    fail: function (error) {
      console.log("读取头像错误", error)
      reject(error);
    }
})

2.获取图片在绘制时的宽高及坐标

getCanvasInfo(canvW,canH){
    const imgX = head_img.width;//图片的实际宽度
    const imgY = head_img.height;//图片的实际高度
    let dWidth = 0;//图片按比例缩放后的宽
    let dHeight = 0;//图片按比例缩放以后的高
    if (imgX > imgY) {
      dHeight = canH;
      dWidth = imgX / (imgY / canH);
      if (dWidth < canvW) {
        dWidth = canvW;
        dHeight = imgY / (imgX / canvW);
      }
    } else {
      dWidth = canvW;
      dHeight = imgY / (imgX / canvW);
      if (dHeight < canH) {
        dHeight = canH;
        dWidth = imgX / (imgY / canH);
      }
    }
    const dx = (dWidth - canvW) / 2;//图像的左上角在目标canvas上 X 轴的位置
    const dy = (dHeight - canH) / 2;//图像的左上角在目标canvas上 Y 轴的位置
}

3. 开始绘制图片

const canvW = 650;//画布的宽
const canvH = 575;//画布的高
getCanvasInfo(canvW,canH)
context.drawImage(img, -dx, -dy, dWidth, dHeight);

至此就可以得到一个不会被拉伸或者挤压变形的图片了。