【问题标题】：javascript - Why does this canvas image not rotate correctly?javascript - 为什么此画布图像无法正确旋转？
【发布时间】：2014-09-13 00:12:43
【问题描述】：

为什么这个画布图像不能正确旋转？

当我单击旋转按钮时，图像会旋转，但会被奇怪地裁剪。我希望图像保持原样并简单地旋转。

重要提示：我不是要旋转 div，而是要旋转实际图像。

见小提琴： http://jsfiddle.net/8V4V7/2/

代码：

function rotateBase64Image(base64data, callback) {
   console.log("what we get: " + base64data);

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

    var image = new Image();
    image.src = base64data;
    image.onload = function() {
        ctx.translate(image.width, image.height);
        ctx.rotate(Math.PI);
        ctx.drawImage(image, 0, 0);
        callback(canvas.toDataURL());
    };
}

编辑： 我需要图像在每次点击时旋转 90 度。

我尝试了以下方法，但它不起作用：

ctx.rotate(Math.PI/2);

【问题讨论】：

不要犹豫，问我的代码是否没有意义或没有按您的意愿工作。
@DanielLisik 谢谢。请检查编辑？

标签： javascript html5-canvas

【解决方案1】：

这对我有用（我在 onload 函数中指定了画布的高度和宽度）：

function rotateBase64Image(base64data, callback) {
    console.log("what we get: " + base64data);

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

    var image = new Image();
    image.src = base64data;
    image.onload = function () {

        canvas.height = image.height;
        canvas.width = image.width;

        ctx.translate(image.width, image.height);
        ctx.rotate(Math.PI);
        ctx.drawImage(image, 0, 0);
        callback(canvas.toDataURL());
    };
}

编辑

更新了每次点击旋转90度的功能（删除i*Math.PI中的i只旋转90度一次）

var i = 0;
function rotateBase64Image(base64data, callback) {
   console.log("what we get: " + base64data);

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

    var image = new Image();
    image.src = base64data;
    image.onload = function() {
        canvas.width = image.height;
        canvas.height = image.width;

       ctx.translate(canvas.width / 2, canvas.height / 2);
       i++;
       ctx.rotate(i*Math.PI/2);
       ctx.translate(-canvas.width / 2, -canvas.height / 2);

        ctx.drawImage(image, 0, 0);

    };
}

Updated Fiddle

【讨论】：

@user13500 是的，我犹豫了一下，想在 jsFiddle 上试试。你可以看到我从一开始就有相同的代码。
@DanielLisik 这行得通，谢谢。你能不能让它旋转 90 度而不是 180 度？那么它就是你的了。
@quelquecosa 你明白了。请等几分钟。
奖励：@DanielLisik 你能解释一下为什么这是必要的吗？例如，“因为每个画布都必须始终具有固定的宽度和高度”
@markE 好的，不知道save 和restore。需要潜入其中。感谢您的信息！

【解决方案2】：

只是一些旋转的支持信息，特别是上下文的保存以及如何围绕图像中心旋转。

var context = canvas.getContext('2d');
//save the context
//pushes a Matrix on the transformation stack
context.save();
context.translate(x, y); //where to put image
context.rotate(angle); //angle in degrees (i think...)
context.scale(scale); //optional scale
//rotate around center of image
context.drawImage(bitmap, -image.width / 2, -image.height / 2);
//or rotate around top left corner of image
context.drawImage(image, 0, 0);
//restore the canvas
//pop a matrix off the transformation stack
context.restore();

参考资料：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

http://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/

【讨论】：