안녕하세요. 명월입니다.
이 글은 Javascript에서 브라우져 화면 캡쳐 라이브러리(html2canvas)에 대한 설명입니다.
웹 프로그램을 만들어서 서비스를 할 때, 예상치 못한 버그를 만날 때가 있습니다. 그 때마다 유저가 어떤 방식으로 조작을 하다가 에러가 발생했다고 피드백을 받는 경우가 많은데 아무래도 화면 캡쳐까지 이루어지지 않을 경우 버그를 찾기 힘들때가 있습니다.
그 때, 이 캡쳐 라이브러리를 통해서 브라우저 상태를 캡쳐해서 서버로 전송을 하게 되면 많이 유용하게 사용할 듯 싶습니다.
링크 - https://html2canvas.hertzen.com
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 화면 캡쳐 CDN -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<button id="shot">screen shot</button>
<!-- 캡쳐할 영역 -->
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<script>
$(function(){
$("#shot").on("click", function(){
// 캡쳐 라이브러리를 통해서 canvas 오브젝트를 받고 이미지 파일로 리턴한다.
html2canvas(document.querySelector("#capture")).then(canvas => {
saveAs(canvas.toDataURL('image/png'),"capture-test.png");
});
});
function saveAs(uri, filename) {
// 캡쳐된 파일을 이미지 파일로 내보낸다.
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(uri);
}
}
});
</script>
</body>
</html>
예제
여기까지 Javascript에서 브라우져 화면 캡쳐 라이브러리(html2canvas)에 관한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] Full calendar(스케줄 달력)의 사용법 (0) | 2021.07.15 |
|---|---|
| [Javascript] 그래프 오픈 라이브러리(jqplot) (0) | 2020.02.24 |
| [Javascript] Select2 (Select searching, multiselect, ajax) (0) | 2019.08.27 |
| [Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리) (0) | 2019.08.22 |
| [Javascript] 알람 메시지 라이브러리(toastr 라이브러리) (0) | 2019.08.21 |
| Google OAuth 사용법 (0) | 2019.06.18 |
| [CSS] 구글 폰트 (Google font) 이용하기 (0) | 2019.05.31 |
| JqGrid (0) | 2015.07.14 |