javascript - Почему изображение холста не вращается правильно?

Question

Почему изображение холста не вращается правильно?

Когда я нажимаю кнопку поворота, изображение вращается, но становится странным. Я хочу, чтобы изображение оставалось неповрежденным и просто вращалось.

Важно: я не хочу поворачивать 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()); 
    }; 
} 

EDIT: Мне нужно изображение, чтобы повернуть на 90 градусов на каждый клик.

Я попытался следующие, но это не работает:

ctx.rotate(Math.PI/2); 

Answer 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 в i*Math.PI, чтобы повернуть 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

Answer 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/