图像旋转 - 根据图像高度和宽度调整画布大小

Question

我想旋转图像，但根据图像的宽度和高度调整画布的大小。请在JSFiddle 中查看我的代码。我实际上是在基于画布旋转图像，但我的画布具有固定的高度和宽度，因此图像只是在内部旋转。我只想要这样的东西。请检查我随附的屏幕截图。绿色边框是画布，所以如果我旋转 90 度，那么画布应该扩大高度并显示整个图像。

你能帮忙吗？

HTML

<canvas id="canvas" ></canvas><br>
<button id="clockwise">Rotate right</button>

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var degrees=0;
var image=document.createElement("img");
image.onload=function(){
    ctx.drawImage(image,0,0,image.width,image.height);
}
image.src="http://www.ajaxblender.com/article-sources/images/plane-1.jpg";
$("#clockwise").click(function(){
   degrees+=90
   ctx.clearRect(0,0,canvas.width,canvas.height);
   ctx.save();
   ctx.translate(image.width/2,image.height/2);
   ctx.rotate(degrees*Math.PI/180);
   ctx.drawImage(image,0,0,image.width,image.height,-image.width/2,-image.height   /2,image.width,image.height);
   ctx.restore();
});

Answer 1

图片加载完毕后首先初始化画布大小：

image.onload=function(){
    canvas.width = image.width;
    canvas.height = image.height;    
    ctx.drawImage(image,0,0);
}

现在您可以使用角度作为画布大小的基础。如果是 0 或 180 度，则使用与图像相同的尺寸，如果不交换尺寸：

 if (degrees >= 360) degrees = 0;

 if (degrees === 0 || degrees === 180) {
     canvas.width = image.width;
     canvas.height = image.height;
 }
 else {
     // swap
     canvas.width = image.height;
     canvas.height = image.width;
 }

不需要清除画布，因为更改大小会清除它（否则只有在图像包含透明通道时才需要它）。

您还想围绕 canvas 的中心旋转图像（不过这里不是大问题）。

Modified fiddle