javascript - 旋转后缩放图像并适合 Canvas

Question

我正在尝试旋转图像并通过单击按钮将其调整到 Canvas 中。

最初我可以使图像适合 Canvas 大小，但是当我旋转图像时，它会恢复到其原始大小并且在 Canvas 中只能看到图像的一部分。即使在旋转时，我怎样才能使图像适合 Canvas 。

我在 markE 上看过一个关于 SO 的例子但是当图像大小时， Canvas 会缩放到图像的大小。我需要 Canvas 大小保持不变，图像大小在旋转和加载时相应地缩放。我试图通过 markE 尝试两个不同的答案来修改代码，但无法实现。

这是我的 JSFiddle

Answer 1

更新的 JS fiddle 链接 -

https://jsfiddle.net/oLyou41j/3/

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

var currentDegrees=0;

var image=document.createElement("img");
image.src="http://b.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg";
image.onload=function(){
//Remove extra lines                
ctx.drawImage(image,0,0,canvas.height, canvas.width);
}


$("#clockwise").click(function(){ 
currentDegrees+=90;
drawRotated(currentDegrees);
});

$("#counterclockwise").click(function(){ 
   currentDegrees-=90;
drawRotated(currentDegrees);
});

function drawRotated(degrees){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(degrees*Math.PI/180);

//Changed Method
ctx.drawImage(image,-canvas.width/2,-canvas.height/2, canvas.height, canvas.width);
ctx.restore();
}