Rotate original Image with jQuery or JavaScript

问题:

Hello my doubts today is how can I rotate a photo, say no to just turn rotate the photo in a browser but doing a photo that was taken in portrait and landscape stand in different angles to really change the picture, and all this with Jquery or JavaScript someone there to help?

JSFiddle: jsfiddle.net/6ZsCz/291

var look = false;

//**************************************************************************************
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var angleInDegrees = 0;
var image = document.createElement("img");
image.onload = function () {
    ctx.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.width / 2);
}
image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
//**************************************************************************************
var photoTwo = document.getElementById("photoTwo");
var ctxTwo = photoTwo.getContext("2d");
var angleInDegreesTwo = 0;
var imageTwo = document.createElement("img");
imageTwo.onload = function () {
    ctxTwo.drawImage(imageTwo, photoTwo.width / 2 - imageTwo.width / 2, photoTwo.height / 2 - imageTwo.width / 2);
}
imageTwo.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
//**************************************************************************************

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

$("#counterclockwise").click(function () {
    look = false;
    angleInDegrees += 90;
    drawRotated(angleInDegrees);
});

function drawRotated(degrees) {
    var tmp_canvas;
    var tmp_ctx;
    var tmp_img;
    if (look) {
        tmp_canvas = canvas;
        tmp_ctx = ctx;
        tmp_img = image;
    } else {
        tmp_canvas = photoTwo;
        tmp_ctx = ctxTwo;
        tmp_img = imageTwo;
    }

    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
    tmp_ctx.save();
    tmp_ctx.translate(tmp_canvas.width / 2, tmp_canvas.height / 2);
    tmp_ctx.rotate(degrees * Math.PI / 180);
    tmp_ctx.drawImage(tmp_img, -tmp_img.width / 2, -tmp_img.width / 2);
    tmp_ctx.restore();
}

回答1:

If you wish to rotate canvas and keep the canvas the same size as the image when rotated (for example if you want to save out the image etc.) then you can simply set the canvas size for each time you rotate it.

A simple way of doing this is to store 90 degree increments in an array and use the index of the current angle of that array to determine what size (landscape /portrait) the canvas should be.

Sounds complicated? It's really simple:

/// store angles (0, 90, 180, 270) in an array
var angles = [0 * Math.PI, 0.5 * Math.PI, Math.PI, 1.5 * Math.PI],
    index = 0;

Now we have pre-calculated angles and the first angle is the originally orientation.

After the image has loaded we simply draw the image at whatever index we have, but we use the index to set the landscape/portrait mode by simply setting the canvas = image size if 0 or 180 degrees, and opposite for 90 and 270 degrees, ie, canvas height = image width and canvas width = image height.

Live demo

This makes sure the canvas is equal the size and orientation of the image when rotated.

function renderImage() {

    /// use index to set canvas size
    switch(index) {
        case 0:
        case 2:
            /// for 0 and 180 degrees size = image
            canvas.width = img.width;
            canvas.height = img.height;
            break;
        case 1:
        case 3:
            /// for 90 and 270 canvas width = img height etc.
            canvas.width = img.height;
            canvas.height = img.width;
            break;
    }

    /// get stored angle and center of canvas    
    var angle = angles[index],
        cw = canvas.width * 0.5,
        ch = canvas.height * 0.5;

    /// rotate context
    ctx.translate(cw, ch);
    ctx.rotate(angle);
    ctx.translate(-img.width * 0.5, -img.height * 0.5);

    /// draw image and reset transform
    ctx.drawImage(img, 0, 0);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}

To rotate the image just hook of the following code to the buttons:

/// rotate counter-clock-wise (CCW)
function rotateCCW() {
    index--;      /// decrement index of array
    if (index < 0) index = angles.length -1;
    renderImage();
}

/// rotate clock-wise (CW)
function rotateCW() {
    index++;     /// increment index of array
    if (index >= angles.length) index = 0;
    renderImage();
}