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

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

你能帮忙吗

HTML

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

---

加载图像后，首先初始化画布大小：

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;
 }

无需清除画布，因为更改大小将清除画布（否则仅当图像包含透明通道时才需要）

您还希望围绕画布的中心旋转图像（不过这不是一个大问题）

---

非常感谢您的快速帮助。还有一个问题。如果我使用Jquery UI调整图像大小，那么通常Jquery UI会在图像上添加style=“width，height”，然后如果我旋转图像，它只会根据图像原始尺寸而不是大小调整后的图像中的尺寸进行旋转。请看我的。如果我调整图像的大小，然后旋转图像，那么它就可以根据调整大小的尺寸旋转吗？@mak我在这里更新了小提琴。在html图像中添加一个id，从中读取w/h，将其设置在画布上并与drawImage一起使用，您应该会很好：如果仍然不清楚，请打开一个新问题。希望这有帮助！

 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;
 }