[JavaScript] html2canvas 사용 할 때, transform 때문에 이미지가 잘린 경우.

[JavaScript] html2canvas 사용 할 때,  transform 때문에 이미지가 잘린 경우. 해결방법

---

※ html2canvas사용방법은 이 글을 참고하세요.

아래와 같이 imageDiv(검은 영역)를 canvas에 그린 후 캡쳐할 경우

빨간색 상자가 transform이 되어 있기 때문에 아래와 같은 이미지가 아닌 

오른쪽과 같이 빨간색 상자가 한쪽으로 치우친 형태로 캔버스에 그려진 후 캡쳐된다.

초록색 영역만 canvas에 그려진 것이다.

해결방법은 

imageDiv에 설정되어 있는 transform을 제거 한 후 캡쳐하고 

다시 transform을 설정해 주면 된다.

<JS>

var imageDiv = document.getElementById("imageDiv");

// 캡쳐 후 원래 위치로 복구 하기 위해 transform 값을 저장하는 변수
var _transform = imageDiv.style.transform;  
// transform 제거
imageDiv.style.setProperty("transform", "none");  

// 영상 캡쳐
html2canvas(imageDiv, {
    
}).then(function (_canvas) {
    let base64image = _canvas.toDataURL("image/png");

    // image 위치 정상복구
    imageDiv.style.transform = _transform;

});