![]()
[JavaScript] html2canvas 사용 할 때, transform 때문에 이미지가 잘린 경우. 해결방법 ※ html2canvas사용방법은 이 글을 참고하세요. 아래와 같이 imageDiv(검은 영역)를 canvas에 그린 후 캡쳐할 경우 빨간색 상자가 transform이 되어 있기 때문에 아래와 같은 이미지가 아닌 오른쪽과 같이 빨간색 상자가 한쪽으로 치우친 형태로 캔버스에 그려진 후 캡쳐된다. 초록색 영역만 canvas에 그려진 것이다. 해결방법은 imageDiv에 설정되어 있는 transform을 제거 한 후 캡쳐하고 다시 transform을 설정해 주면 된다. var imageDiv = document.getElementById("imageDiv"); // 캡쳐 후 원래 위치로 복구 하기..
[JavaScript] html2canvas html2canvas [링크] 웹(html)에서 화면을 캡쳐하는 기능. 실질적으로는 선택한 요소를 Canvas에 그린다. 하위 자식들까지 모두 canvas에 그릴 수 있다. # Body 안의 모든 요소를 Canvas에 그릴 경우 html2canvas(document.body, { backgroundColor: "#000000" // 배경 색 선택. 기본값 : 흰색 }).then(function(canvas) { var base64image = canvas.toDataURL("image/png"); window.open(base64image , "_blank"); // Open the image in a new window }); # 특정 div만 선택할 경우 ..
