在 HTML5 Canvas 上将图像旋转 90 度答案

【问题标题】：Rotate image by 90 degrees on HTML5 Canvas在 HTML5 Canvas 上将图像旋转 90 度
【发布时间】：2014-06-14 07:10:54
【问题描述】：

我在使用 HTML5 画布旋转图像时遇到问题。我想我只是算错了，如果能帮助我解决这个问题，我将不胜感激。

在移动设备上，我在 150 x 558 像素的画布上捕获用户签名。我不是试图创建一个 558 像素 x 150 像素的图像，它只是将捕获的签名旋转 90 度。下面是我目前提出的代码的 sn-p。正如你可能猜到的那样，我对这方面的数学没有很好的把握。我相信我的程序是正确的，只是数字不正确。

我想要做的是： 1）将画布的中心设置为中间，偏移我图像的高度和宽度 2) 将画布旋转 90 度 3）绘制图像 4) 将画布翻译回来。

编辑：这是一个 JSFiddle：http://jsfiddle.net/x9FyK/

    var $signature = $("#signature");
    var signatureData = $signature.jSignature("getData");

    console.log(signatureData);

    var img= new Image();
    img.onload = function() {
        var rotationCanvas = document.createElement('canvas');
        rotationCanvas.width = img.height;
        rotationCanvas.height = img.width;

        var context = rotationCanvas.getContext("2d");
        context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4);

        context.rotate(Math.PI/2);
        context.drawImage(img,0,0);
        context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4));
        var rotatedData = rotationCanvas.toDataURL();

        ...Handling rotated data here

    };
    img.src = signatureData;

如果我可以提供更多信息，请告诉我。

提前感谢您的帮助，

【问题讨论】：

你能发一个 jsfiddle 链接吗？
我用小提琴编辑了帖子：jsfiddle.net/x9FyK

标签： javascript html canvas

【解决方案1】：

有几种方法可以将转换（平移+旋转）的画布重置为其原始状态。

Low-Pointer 的答案是使用 context.save 将上下文保存为原始未转换状态，并在绘制完成后使用 context.restore 将上下文恢复到其原始状态。

以与执行相反的顺序撤消转换的另一种方式。

另外，请注意 context.translate 实际上会将画布原点移动到画布的中心。由于图像是从左上角（而不是中心）绘制的，因此如果您希望图像在画布中居中，则必须将 drawImage 偏移图像宽度和高度的一半。

下面是示例：http://jsfiddle.net/m1erickson/EQx8V/

// translate to center-canvas 
// the origin [0,0] is now center-canvas

ctx.translate(canvas.width/2,canvas.height/2);

// roate the canvas by +90% (==Math.PI/2)

ctx.rotate(Math.PI/2);

// draw the signature
// since images draw from top-left offset the draw by 1/2 width & height

ctx.drawImage(img,-img.width/2,-img.height/2);

// un-rotate the canvas by -90% (== -Math.PI/2)

ctx.rotate(-Math.PI/2);

// un-translate the canvas back to origin==top-left canvas

ctx.translate(-canvas.width/2,-canvas.height/2);

// testing...just draw a rect top-left

ctx.fillRect(0,0,25,10);

【讨论】：

【解决方案2】：

这肯定会对你有所帮助 >>HTML5 Canvas Rotate Image :)

使用一些单独的 js 函数来绘制你的画布：

 function drawRotated(degrees){
     contex_var.clearRect(0,0,canvas.width,canvas.height);
     contex_var.save();
     contex_var(canvas.width/2,canvas.height/2);
     contex_var.rotate(degrees*Math.PI/180);
     contex_var.drawImage(image,-image.width/2,-image.width/2);
     contex_var.restore();
          }

为任何按钮点击功能提供一些角度：

$("#clockwise").click(function(){ 
    angleInDegrees+=30;
    drawRotated(angleInDegrees);
});

【讨论】：