HTML태그의 내용을 이미지로 저장할 수 있는 라이브러리입니다.
제가 필요한 것은 스크린샷 기능 뿐만 아니라.. 다운로드하는 기능을 포함한 것이었습니다.
구글링이 구글링을 더해 완성했네요.
IE11, Edge, 크롬에서 테스트 완료했습니다.
여러모로 활용도가 있어보입니다.
* IE 10, 11 버전까지 지원됩니다.
* 새창으로 구현하는게 저장된 이미지의 잘림이 없네요.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- IE10, 11 지원을 위한 es6-promise -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js"></script>
<div id="capture" style="padding:10px; background:#ddd; ">
<h1>Hello world!</h1>
<h2>Hello world!</h2>
<h3>Hello world!</h3>
<h4>Hello world!</h4>
</div>
<button type="button" class="btnScreenShot" id="btnScreenShot">스크린샷</button>
<div id="img-out"></div>
<script>
$("#btnScreenShot").on("click", function() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
if (canvas.msToBlob) { //for IE 10, 11
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, "capture.png");
} else {
saveAs(canvas.toDataURL(), "capture.png");
}
});
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
});
</script>
</body>
</html>