小程式canvas居中剪裁繪製圖片

多芒小丸子發表於2018-05-23
Canvas

小程式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 軸的位置
}

複製程式碼
  1. 開始繪製圖片
const canvW = 650;//畫布的寬
const canvH = 575;//畫布的高
getCanvasInfo(canvW,canH)
context.drawImage(img, -dx, -dy, dWidth, dHeight);
複製程式碼

至此就可以得到一個不會被拉伸或者擠壓變形的圖片了。

相關文章