canvas處理切圖並旋轉圖片

場景描述

需要把大圖中的框的圖片給顯示出來~類似下圖

如果將圖片倒置，則顯示對應倒置的圖片~類似下圖

代碼實現

let base64Canvas = document.createElement('canvas');
let base64Context = this.base64Canvas.getContext('2d');
// 獲取框的座標和寬高
let {  w, h, x, y } = data;
base64Canvas.width = w;
base64Canvas.height = h;
base64Context.drawImage(img, x, y, w, h, 0, 0, w, h);
let base64Img = base64Canvas.toDataURL("image/png");
console.log(base64Img)

因爲框本身就是在圖片上切的，所以直接使用canvas的drawImage方法即可。

圖片旋轉

由於框是基於SVG畫的，當圖片旋轉後，框的座標其實還是基於正框下的位置，這裏我想了好幾種方法，最後覺得還是在基於正框切圖下的基礎上，再進行旋轉最方便。也就是先執行上面的正常切圖，再旋轉~

 rotateDegCutImg(w, h, rotateDeg, base64Img, callbackHandler) {
    let canvas66 = document.createElement('canvas');
    let ctx66 = canvas66.getContext('2d');
    let img66 = new Image();
    img66.setAttribute('crossOrigin', 'anonymous');
    img66.src = base64Img;
    canvas66.width = w;
    canvas66.height = h;

    img66.onload = () => {
      if (rotateDeg == 90) { // 90
        // 寬高互換
        canvas66.width = h;
        canvas66.height = w;
        ctx66.rotate(Math.PI / 2)
        ctx66.drawImage(img66, 0, -h, w, h)
      }
      if (rotateDeg == 180) {
        ctx66.rotate(Math.PI)
        ctx66.drawImage(img66, -w, -h, w, h)
      }
      if (rotateDeg == 270) { // 270
        // 寬高呼喚
        canvas66.width = h;
        canvas66.height = w;
        ctx66.rotate(Math.PI / 2 * 3)
        ctx66.drawImage(img66, -w, 0, w, h)
      }

      let img66Src = canvas66.toDataURL("image/png");

      if (callbackHandler) {
        callbackHandler(img66, img66Src)
      }
    }
  }