畫布旋轉不能按預期工作

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

我想帶出的部分的快照在js的結果中小提琴使用html2canvas插件。但html2canvas不支持CSS3旋轉屬性。 所以我用畫布來旋轉圖像，旋轉被html2canvas成功捕獲。

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

任何調整大小，拖動和旋轉的組合都不應該扭曲圖像。

問題是什麼？

Answer 1

這是因爲在繪製和縮放圖像時使用臨時值（寬度和高度）作爲方向。然後方向的值應用於setContainerHeight和setContainerWidth;總之：你使用相同的座標值和縮放比例

我看不到你的第一張圖片（它在我的國家被封鎖），也許是因爲它是方形的（width = height）;因此沒有問題發生，但矩形是寬度= 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); 
}; 

Answer 2

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

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

默認情況下，html5會將圖像擴展爲畫布大小，因此您必須手動管理圖像大小。

Answer 3

你應該多解釋一下你想做什麼。我認爲輪換不是那麼複雜

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

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

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

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