在保持縱橫比的同時旋轉畫布圖像

Question

我正在嘗試為我的照片編輯器實現rotate功能。 我使用HTML5元素（尤其是canvas元素）相對較新。

現在，單擊按鈕后圖像將旋轉，但是在保持寬高比的情況下不會旋轉圖像。 為了具體起見，我在下面提供了兩張圖像：一幅是在單擊旋轉按鈕之前，另一幅是在單擊之后。

旋轉之前：

旋轉后：

如您所見，圖像確實會旋轉，但是會裁切大部分圖像。 我想念什么嗎？ 任何幫助將非常感激。

到目前為止，我已經嘗試過上面顯示的結果：

function rotateImage(degrees, image) {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");

    if(degrees == 90 || degrees == 270) {
        canvas.width = image.height;
        canvas.height = image.width;
    } else {
        canvas.width = image.width;
        canvas.height = image.height;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if(degrees == 90 || degrees == 270) {
        ctx.translate(image.height/2,image.width/2);
    } else {
        ctx.translate(image.width/2,image.height/2);
    }
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2 , -image.height / 2);

    var dataURL = canvas.toDataURL();
    $("#image").attr('src', dataURL);
}

document.getElementById("rotate").addEventListener("click", function() {
var el = this;
var data = el.getAttribute('data-value');
  var angleInDegrees = 0;

  if(data == 90) {
    angleInDegrees += 90 % 360;
  } else {
    if(angleInDegrees == 0) {
      angleInDegrees = 270;
    } else {
      angleInDegrees -= 90;
    }
  }
  // rotate the image based on degree value
  rotateImage(angleInDegrees, document.getElementById("canvas"));
});

編輯：

現在，它確實在保持寬高比的同時旋轉了圖像，但只執行了一次。 如果再次單擊旋轉按鈕，它將裁切約原始圖像尺寸的20％。 沒有更多照片可以展示：

旋轉之前

旋轉按鈕一次被按下后

重新按下旋轉按鈕后

修改功能

function rotateImage(degrees, image) {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");

    if(degrees == 90 || degrees == 270) {
        canvas.width = image.height;
        canvas.height = image.width;
    } else {
        canvas.width = image.width;
        canvas.height = image.height;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();

    if(degrees == 90 || degrees == 270) {
        ctx.translate(image.height/2,image.width/2);
    } else {
        ctx.translate(image.width/2,image.height/2);
    }
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2 , -image.height / 2);
    ctx.restore();

    var dataURL = canvas.toDataURL();
    image.setAttribute('src', dataURL);
}

Answer 1

我對您的代碼進行了一些更改。

1. if(data == "90")而不是if(data == 90)因為它是一個字符串
2. 我在轉換周圍添加了ctx.save（）和ctx.restore（）

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");


let cw = canvas.width = image.width;
let ch = canvas.height = image.height;

ctx.drawImage(image, 0 , 0);



function rotateImage(degrees, image) {

    if(degrees == 90 || degrees == 270) {
        cw = image.height;
        ch = image.width;
    } else {
        cw = image.width;
        ch = image.height;
    }

    ctx.clearRect(0, 0, cw, ch);
    ctx.save()
    ctx.translate(cw/2,ch/2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2 , -image.height / 2);
    ctx.restore();
    var dataURL = canvas.toDataURL();
    image.setAttribute('src', dataURL);
}

rotate.addEventListener("click", function() {
var el = this;
var data = el.dataset.value; console.log(data)
  var angleInDegrees = 0;

  if(data == "90") {
    angleInDegrees += 90 % 360;
  } else {
    if(angleInDegrees == 0) {
      angleInDegrees = 270;
    } else {
      angleInDegrees -= 90;
    }
  }


  // rotate the image based on degree value
  rotateImage(angleInDegrees, image);
});