본문 바로가기
웹 개발/웹프로그래밍

JavaScript | html2canvas 캡쳐 사용방법

by KISCH 2020. 9. 29.
반응형

 

html2canvas

 

html2canvas는 웹페이지를 캡쳐할 때 유용한 자바스크립트 라이브러리입니다.

 

 

 

캡쳐 

 

바디 안 모든 요소

1
2
3
4
5
6
html2canvas(document.body, {
    backgroundColor: "#000000"
}), then(function(canvas) {
    var base64image = canvas.toDataURL
    window.open(base64image, "_blank")
});
cs

 

특정 요소

1
2
3
html2canvas(document.getElementById("capture")).then(function(canvas) {
    
});
cs

 

특정 요소 제외 (data-html2canvas-ignore)

1
<div class="element" data-html2canvas-ignore="true"> No visible </div>
cs

 

이미지로 저장

1
2
3
4
5
6
7
8
9
html2canvas(document.body, {
    onrendered: function (canvas) {
        var c = document.createElement('c');
        c.href = canvas.toDataURL("image/jpeg").replace("image/jpeg","image/octet-stream");
        c.download = 'capture.jpg';
        c.click(); 
    }
});
 
cs

 

 

 

 

 

 

 

 

옵션  

 

allTaint — 크로스오리진를 허락할 것인지

logging — 디버그 목적의 로그를 남길수 있게

useCORS — CORS사용한 서버로부터 이미지를 로드할 것인지

 

 

 

에러  

 

인터넷 익스플로러 

promise — 지원

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js"></script>

 

외부 이미지

이미지 경로가 외부 이미지면 이미지 저장 시 보이지 않습니다. 내부 경로로 되어있어야합니다.

외부 이미지인 경우 proxy를 사용하시길 바랍니다.

  • html2canvas-php-proxy

 

 

html2canvas

 

관련포스트

 

 

 

반응형

댓글