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

Question

我想旋转图片，但根据图片的宽度和高度调整画布大小。请在js小提琴“http://jsfiddle.net/6ZsCz/1123/”中查看我的代码。我实际上是基于画布旋转图像，但我的画布具有固定的高度和宽度，因此图像只是在内部旋转。我只想要这样的东西。请查看我附带的截图。绿色边框是一个画布，所以如果我旋转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;
 }

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

您还希望围绕画布的中心旋转图像（虽然这里不是大问题）。

<强> Modified fiddle