0
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;
}
내가 표시된 부분의 스냅 샷을하고 싶어
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);
};
JAVASCRIPT js의 결과 html2canvas 플러그인을 사용하여 바이올린. 하지만 html2canvas는 CSS3 rotate 속성을 지원하지 않습니다. 그래서 캔버스를 사용하여 이미지를 회전 시켰으며 회전이 html2canvas에 의해 성공적으로 캡쳐되었습니다.
위의 코드에서 정사각형 이미지를 사용하면 완전히 회전하지만 직사각형 이미지를 사용하면 이미지 너비와 높이가 왜곡됩니다.
크기 조정, 끌기 및 회전을 조합하면 이미지가 왜곡되어서는 안됩니다.
무엇이 문제입니까?
감사합니다. 나는 명성이 15 점이므로 투표를 할 수 없다. 나는 그 명성에 도달 할 때 투표 할 것입니다. :) – user3752017