반응형
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
관련포스트
반응형
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
코드이그나이터 | 개념 (2) | 2020.11.03 |
---|---|
PHP | 기초문법 (0) | 2020.10.20 |
XML 기초 특징 구조 (0) | 2020.09.29 |
JavaScript | Ajax 기초 (0) | 2020.09.29 |
JavaScript | jQuery 셀렉터와 동작 (0) | 2020.09.04 |
JavaScript | 자바스크립트 개발도구 (0) | 2020.09.04 |
JavaScript | 자바스크립트 그래픽 (0) | 2020.09.03 |
티스토리 | HTML 구조와 주요 태그 (0) | 2020.05.13 |
댓글