javascript - 为什么此 Canvas 图像无法正确旋转？

Question

为什么此 Canvas 图像无法正确旋转？

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

重要提示:我不想旋转 div，我想旋转实际图像。

参见 fiddle : 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);

Answer 1

这对我有用(我在 onload 函数中指定了 Canvas 的高度和宽度):

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