이미지가 잘리지 않도록 캔버스에서 이미지를 회전하고 부모를 확장하는 방법은 무엇입니까?

Question

이미지 데이터를 잃지 않고 HTML5 캔버스에서 이미지를 회전하는 방법은 무엇입니까? 회전을하면 이미지 크기가 커지므로 Canvas 컨테이너를 확장하여 이미지가 잘리지 않도록하고 싶습니다. 다음 이미지가 더 좋다고 말할 수 있습니다.

갈색 색 상자는 실제로 Canvas를 래핑하는 컨테이너입니다. 캔버스를 회전 할 때 이미지를 잘리지 않도록 이미지를 확대하고 싶습니다.

업데이트 : 이미지가 캔버스보다 클 수 있으므로 경계 상자를 사용하여 부모 컨테이너로 비례 크기를 계산하여 이미지에 맞 춥니 다. 따라서 Canvas의 style 크기는 계산 된 크기가되는 반면 높이 및 너비 특성은 이미지 크기가됩니다.

도움을 주시면 감사하겠습니다.

Answer 1

이 함수는 회전 된 이미지에 정확하게 맞게 캔바스의 크기를 조정합니다. 이미지의 폭과 높이를 제공해야하며 각도는 현재 회전 각도입니다.

[편집 : OOPS! 나는 캔버스 너비/높이가 큰 이봐하지 CSS를 너비/높이]

function resizeCanvasContainer(w,h,a){ 
var newWidth,newHeight; 
    var rads=a*Math.PI/180; 
    var c = Math.cos(rads); 
    var s = Math.sin(rads); 

    if (s < 0) { s = -s; } 
    if (c < 0) { c = -c; } 
    newWidth = h * s + w * c; 
    newHeight = h * c + w * s ; 

var canvas = document.getElementById('canvas'); 
canvas.width = newWidth + 'px'; 
canvas.height = newHeight + 'px'; 
}