Javascript 旋转后缩放图像并在画布中进行拟合

我正在尝试旋转图像，并使用按钮单击将其放入画布中

最初我可以将图像调整为画布大小，但当我旋转图像时，它会返回到其原始大小，并且在画布中只能看到图像的一部分。如何在旋转时使图像适合画布

我在SO by上看到过一个示例，但是当图像大小较大时，画布会缩放到图像的大小。我需要画布大小保持不变，图像大小在旋转和加载时相应缩放。我试图通过

markE

尝试两种不同的答案来修改代码，但未能实现

---

这是我更新的JS fiddle链接-

---

更新的JS fiddle链接-

---

JS fiddle链接，如果你想有方面适合以及

---

JS fiddle链接，如果你想有方面适合以及

---

感谢Ayush提供更新的解决方案。但是有什么方法可以让方面保持合适而不是填写此解决方案吗？请查看我的其他答案谢谢Ayush提供更新的解决方案。但是有什么方法可以让方面保持合适，而不是填充这个解决方案吗？检查我的另一个答案顺便说一句，哇，垂直农场很酷顺便说一句，哇，垂直农场很酷谢谢Ayush的解决方案。是否有任何方法可以沿画布中心加载和旋转图像？如果我没有错的话，在c

ctx.draw

之前，我需要将图像平移到中心并绘制图像，然后沿画布中心旋转？我的理解正确吗？谢谢Ayush提供的解决方案。是否有任何方法可以沿画布中心加载和旋转图像？如果我没有错的话，在c

ctx.draw

之前，我需要将图像平移到中心并绘制图像，然后沿画布中心旋转？我的理解正确吗？

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

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

var currentDegrees=0;

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

$("#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);
    var wrh = image.width / image.height;
        var newWidth = canvas.width;
        var newHeight = newWidth / wrh;
        if (newHeight > canvas.height) {
            newHeight = canvas.height;
            newWidth = newHeight * wrh;
        }
ctx.drawImage(image,-canvas.width/2,-canvas.height/2,newWidth,newHeight);

ctx.restore();
}