Live demo

Question

您好我今天的疑问是如何旋转照片，拒绝只是在浏览器中旋转照片，而是拍摄以纵向和横向拍摄的照片以不同角度拍摄以真正改变照片，以及所有这些有Jquery或JavaScript的人可以帮忙吗？

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

Answer 1

如果您希望旋转画布并保持画布与旋转时的图像大小相同（例如，如果要保存图像等），则只需设置画布大小即可每次旋转它。

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

听起来很复杂？这很简单：

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

现在我们有预先计算的角度，第一个角度是最初的方向。

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

Live demo

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

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

要将以下代码挂钩的图像旋转到按钮：

/// 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旋转原始图像

JSFiddle：jsfiddle.net/6ZsCz/291

1 个答案:

Live demo