Javascript 按用户定义的角度旋转图像画布

我想旋转一个用户定义的角度，这将是由一个输入滑块，范围从-90度到90度来确定的图像。基本上，要求是拉直画布上的图像

这就是我使用angularjs所尝试的

我的输入滑块和html：

Straighten: <input type="range" id="rotateImage" value="0" min="-90" max="90" step="1" ng-model="rotateAngle"/>
<div id="imageCanvas">
    <canvas id="canvas"></canvas>
</div>

我还在画布上画了一个网格作为参考

$scope.Straighten = function() {
var imageCanvas = document.getElementById("canvas"),
    gridWidth = imageCanvas.width,
    canvasWidth = gridWidth,
    gridHeight = imageCanvas.height,
    canvasHeight = gridHeight,
    gridPadding = 1;

var gridCanvas = $('<canvas id=gridLayer></canvas>').attr({
    width: canvasWidth,
    height: canvasHeight
}).appendTo('#imageCanvas');
var context = gridCanvas.get(0).getContext("2d");
drawGridBoard(gridWidth, gridHeight, gridPadding, context);
}

function drawGridBoard(gridWidth, gridHeight, gridPadding, context) {
for (var x = 0; x <= gridWidth; x += 40) {
    context.moveTo(0.5 + x + gridPadding, gridPadding);
    context.lineTo(0.5 + x + gridPadding, gridHeight + gridPadding);
}


for (var x = 0; x <= gridHeight; x += 40) {
    context.moveTo(gridPadding, 0.5 + x + gridPadding);
    context.lineTo(gridWidth + gridPadding, 0.5 + x + gridPadding);
}

context.strokeStyle = "blue";

context.setLineDash([15, 5]);
context.stroke();

$scope.right=function（）{
var imageCanvas=document.getElementById（“画布”），
gridWidth=imageCanvas.width，
画布宽度=网格宽度，
gridHeight=imageCanvas.height，
画布高度=网格高度，
网格填充=1；
var gridCanvas=$（''）.attr({
宽度：画布宽度，
高度：画布高度
}).appendTo（“#imageCanvas”）；
var context=gridCanvas.get（0.getContext（“2d”）；
drawGridBoard（网格宽度、网格高度、网格填充、上下文）；
}
函数drawGridBoard（gridWidth、gridHeight、gridPadding、context）{
对于（var x=0；x我已经在画布上工作了两周。我正在更新你的旋转函数。也许你应该等到图像加载后再绘制。请发布下面的代码

function rotate(rotAngle) {
    console.log('rotate angle>> ', rotAngle);
    var canvas= document.getElementById("canvas"),
    context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height); //Clear the canvas first

    var logoImg = new Image(); // Create instance of the Image class
    logoImg.src = item.image; // Tell the Image's relative url

    var gridWidth = canvas.width,
    var gridHeight = canvas.height;
    var deg = Math.PI / 180;


    logoImg.onload = function () {

                context.save();
                context.translate(gridWidth / 2, gridHeight / 2);

                context.rotate(rotAngle * Math.PI / 180);

                context.drawImage(logoImg, -(gridWidth / 2), -(gridHeight / 2));

                context.restore();
            };

}

以上代码对我很有用。
非常感谢：）它工作得很好。但我现在唯一的问题是。漫游时我们会得到额外的空间。我如何通过缩放图像来填充空间并能够平移图像来填充空间？如果你看到我的答案足够好，请不要忘了向上投票。对于你的下一个查询，请你创建一个小提琴，这样我就可以看到我自己了吗？
function rotate(rotAngle) {
    console.log('rotate angle>> ', rotAngle);
    var canvas= document.getElementById("canvas"),
    context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height); //Clear the canvas first

    var logoImg = new Image(); // Create instance of the Image class
    logoImg.src = item.image; // Tell the Image's relative url

    var gridWidth = canvas.width,
    var gridHeight = canvas.height;
    var deg = Math.PI / 180;


    logoImg.onload = function () {

                context.save();
                context.translate(gridWidth / 2, gridHeight / 2);

                context.rotate(rotAngle * Math.PI / 180);

                context.drawImage(logoImg, -(gridWidth / 2), -(gridHeight / 2));

                context.restore();
            };

}