使用jQuery或JavaScript旋转原始图像 [英] Rotate original Image with jQuery or JavaScript

问题描述

您好我今天的疑问是如何旋转照片，拒绝只是在浏览器中旋转照片，而是拍摄以纵向和横向拍摄的照片以不同角度拍摄以真正改变照片，以及所有这些有Jquery或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?

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

推荐答案

如果你愿意的话旋转画布并保持画布与旋转时的图像大小相同（例如，如果要保存图像等），则可以在每次旋转时简单地设置画布大小。

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.

这样做的一个简单方法是在数组中存储90度增量，并使用该数组当前角度的索引来确定画布的大小（横向/纵向）应该是。

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.

图像加载后，我们只需按照我们的索引绘制图像，但我们使用索引设置横向/纵向模式，只需设置canvas =图像大小，如果为0或180度和90度和270度相反，即画布高度=图像宽度和画布宽度=图像高度。

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.

这可确保画布在旋转时等于图像的大小和方向。

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

这篇关于使用jQuery或JavaScript旋转原始图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！