jquery html2canvas - 웹페이지 스크린샷

html2canvas를 이용하면 웹페이지를 캡쳐할 수 있다.

body 전체 아니더라도 선택자로 일부분만을 캡쳐할 수도 있다.

 

 

function downloadCanvas(){
		html2canvas(document.getElementById("캡쳐할 요소의 id"), {scale: 1, scrollY:-window.scrollY}).then(function(canvas){
			var el = document.getElementById("downbtn");
			el.href = canvas.toDataURL("image/png");
			el.download = "image_name.png";
			el.click();
			
			$("#downbtn").attr("href","javascript:downloadCanvas();");
		});
	}

 

 

 

 

그런데 스크롤을 밑으로 내려서 다운로드 할 경우에

이미지가 잘리는 경우가 있었다.

 

이런 경우는 scrollY:-window.scrollY 이 옵션을 넣어주니 전체 화면으로 다운로드 되었다!

 

 

 

html2canvas 옵션 👇

https://html2canvas.hertzen.com/configuration

Options