CODEWITHSUNDEEP
javascripthtml5-canvas
quelquecosa
quelquecosa

Reputation: 910

javascript - Why does this canvas image not rotate correctly?

Why does this canvas image not rotate correctly?

When I click the rotate button the image rotates but gets cropped weirdly. I want the image to stay intact and simply rotate.

Important: I'm not looking to rotate the div, I'm looking to rotate the actual image.

See fiddle: http://jsfiddle.net/8V4V7/2/

Code:

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: I need the image to rotate by 90 degrees on every click.

I tried the following but it doesn't work:

ctx.rotate(Math.PI/2);

Upvotes: 2

Views: 2212

Answers (2)

mattdlockyer
mattdlockyer

Reputation: 7314

Just some supporting info for rotations, notably the saving of the context and how to rotate around the center of the image.

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();

References:

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/

Upvotes: 0

display-name-is-missing
display-name-is-missing

Reputation: 4399

This worked for me (I specified the height and width of the canvas inside the onload function):

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());
    };
}

Edit

Updated function to rotate 90 degrees with every click (remove i in i*Math.PI to rotate 90 degrees only once)

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

Upvotes: 1

Related Questions