畫布旋轉無法正常工作

Question

http://jsfiddle.net/s1n6cssa/12/

的HTML

<a href="#" id="rotate">Rotate</a>
<div id="print-region">
    <img class="overlay" src="http://www.itasveer.com/common/images/mobilecover/apple-5_5s.png" /> <span id="uploaded-image-container"></span>

    <img class="overlay" src="http://www.itasveer.com/common/images/mobilecover/apple-5_5s_white.png" />
</div>

的CSS

#myCanvas {
height: 100%;
width: 100%;
background-color: blue;
}
#print-region {
    height: 542px;
    width: 520px;
    margin: 0;
    position: relative;
    overflow: hidden;
}
.overlay {
    position: absolute;
    pointer-events: none;
}
#rotate {
    width: 100px;
    height: 30px;
}

JAVASCRIPT

var context;
var canvas;
var nHeight;  //the new height after resizing
var nWidth;   //the new width after resizing
var TO_RADIANS = Math.PI / 180;
var imageObj = new Image();

//USE ONLY ONE OF THE BELOW IMAGES AT A TIME

//square image which does not distort after rotation
imageObj.src = "http://i.stack.imgur.com/hwxO6.png";


//rectangular image which distorts after rotation
<!-- imageObj.src = "http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"; -->


var originalWidth = imageObj.width;
var originalHeight = imageObj.height;

$('#myCanvas').remove();


//used by context.rotate and updated after every rotation
$("#uploaded-image-container").attr({
    rotation: 0
});

$("#uploaded-image-container").append("<canvas id='myCanvas'></canvas>");


$("#uploaded-image-container").css({
    "position": "absolute",
        "height": originalHeight / 3, //one-third size of the original height of the uploaded image
        "width": originalWidth / 3,
        "top": $('#print-region').height() / 3,
        "left": $('#print-region').width() / 3
});

canvas = document.getElementById('myCanvas');

context = canvas.getContext('2d');
nHeight = canvas.height = originalHeight / 3;
nWidth = canvas.width = originalWidth / 3;


imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0, originalWidth / 3, originalHeight / 3);
};

$("#uploaded-image-container").draggable({
    snap: false,
    scroll: false,
    cursor: "move",
    containment: '#print-region'
});


$("#uploaded-image-container").resizable({
    handles: 'nw, ne, sw, se',
    aspectRatio: true,
    containment: '#print-region',

    resize: function (e, ui) {
        nHeight = ui.size.height;
        nWidth = ui.size.width;
    }
});


$("#rotate").click(function () {
    updateRotation($("#uploaded-image-container"));
});


var imageRotation = 0; // the angle that the image is rotated
var updateRotation = function (elem) {
    var angle = parseInt(elem.attr('rotation'));

//after rotation, the nWidth and nHeight are interchanged hence temp variables
    var tempHeight, tempWidth;

    if (angle == 0) {
        imageRotation = 90;
        elem.attr('rotation', 90);
        tempHeight = nWidth;
        tempWidth = nHeight;
    } else if (angle == 90) {
        imageRotation = 180;
        elem.attr('rotation', 180);
        tempHeight = nHeight;
        tempWidth = nWidth;
    } else if (angle == 180) {
        imageRotation = 270;
        elem.attr('rotation', 270);
        tempHeight = nWidth;
        tempWidth = nHeight;
    } else {
        imageRotation = 0;
        elem.attr('rotation', 0);
        tempHeight = nHeight;
        tempWidth = nWidth;
    }

    $("#uploaded-image-container").css({
        "height": tempHeight,
            "width": tempWidth
    });

    canvas.width = tempWidth;
    canvas.height = tempHeight;
    context.translate(tempWidth / 2, tempHeight / 2);
    context.rotate(imageRotation * TO_RADIANS);
    context.translate(-tempWidth / 2, -tempHeight / 2);
    context.drawImage(imageObj, 0, 0, tempWidth, tempHeight);
};

我想使用html2canvas插件對jsfiddle結果中顯示的部分進行快照。 但是html2canvas不支持CSS3旋轉屬性。 因此，我使用canvas旋轉圖像，並且html2canvas成功捕獲了旋轉。

在上面的代碼中，當我使用正方形圖像時，它可以完美旋轉，但是當考慮矩形圖像時，圖像的寬度和高度會失真。

調整大小，拖動和旋轉的任何組合都不應使圖像變形。

有什么問題

Answer 1

試試這個http://jsfiddle.net/5hrx77nr/小提琴。

context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)

默認情況下，html5將圖像縮放到畫布大小，因此您必須手動管理圖像大小。

Answer 2

您應該多解釋一些您要做什么。 我認為輪換並不復雜

無論如何。 我在第33、34行發現了一個錯誤

nHeight = canvas.height = originalHeight / 3;
nWidth = canvas.width = originalWidth / 3;

也許您的意思是加法或乘法？ 因為出現藍色畫布並在更改后旋轉。

    nHeight = canvas.height + originalHeight / 3;
    nWidth = canvas.width + originalWidth / 3;

Answer 3

這是因為在繪制和縮放圖像時使用臨時值（寬度和高度）作為方向。 然后將方向的值應用於setContainerHeight和setContainerWidth; 簡而言之：您使用與坐標和比例相同的值

我看不到您的第一張圖片（該圖片在我的國家被屏蔽），可能是因為它是正方形（寬=高）； 因此沒有問題，但矩形的寬度= 2 *高度 ; 因此使用圖像比例。 這可以在任何盒子形狀中工作

    var context;
    var canvas;
    var nHeight;
    var nWidth;
    var TO_RADIANS = Math.PI / 180;
    var imageObj = new Image();
     imageObj.src = "http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"; 


    var originalWidth = imageObj.width;
    var originalHeight = imageObj.height;

    $('#myCanvas').remove();
    $("#uploaded-image-container").attr({
        rotation: 0
    });

    $("#uploaded-image-container").append("<canvas id='myCanvas'></canvas>");


    $("#uploaded-image-container").css({
        "position": "absolute",
            "height": originalHeight / 3,
            "width": originalWidth / 3,
            "top": $('#print-region').height() / 3,
            "left": $('#print-region').width() / 3
    });

    canvas = document.getElementById('myCanvas');

    context = canvas.getContext('2d');
    nHeight = canvas.height ;
    nWidth = canvas.width ;


    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0, originalWidth / 3, originalHeight / 3);
    };

    $("#uploaded-image-container").draggable({
        snap: false,
        scroll: false,
        cursor: "move",
        containment: '#print-region'
    });


    $("#uploaded-image-container").resizable({
        handles: 'nw, ne, sw, se',
        aspectRatio: true,
        containment: '#print-region',

        resize: function (e, ui) {
            nHeight = ui.size.height;
            nWidth = ui.size.width;
        }
    });


    $("#rotate").click(function () {
        updateRotation($("#uploaded-image-container"));
    });

 var imageRotation = 0; // the angle that the image is rotated
var updateRotation = function (elem) {
    var angle = parseInt(elem.attr('rotation'));
    var ratio = nWidth/nHeight;
    var customX = nWidth, scaleX = nWidth;
    var customY = nHeight, scaleY = nHeight;
    var tempHeight, tempWidth;
    //the problem is in number 1 and 3 
    if (angle == 0) { //number 1
        imageRotation = 90;
        elem.attr('rotation', 90);
        tempHeight = nWidth;
        tempWidth = nHeight; customY = ratio*customY;
    } else if (angle == 90) { //number 2
        imageRotation = 180;
        elem.attr('rotation', 180);
        tempHeight = nHeight;
        tempWidth = nWidth ;
    } else if (angle == 180) {
        imageRotation = 270;
        elem.attr('rotation', 270);
        tempHeight = nWidth;
        tempWidth = nHeight;  customY = ratio*customY;
    } else { // number 4 handle 
        imageRotation = 0;
        elem.attr('rotation', 0);
        tempHeight = nHeight;
        tempWidth = nWidth;
    }

    $("#uploaded-image-container").css({
        "height": tempHeight,
        "width": tempWidth
    });

    canvas.width = customX;
    canvas.height = customY;
    context.translate(customX / 2, customY / 2);
    context.rotate(imageRotation * TO_RADIANS);
    context.translate( -customX / 2, -customY / 2);        
    context.drawImage(imageObj, 0, 0, customX, customY);
};