728x90
반응형
[JavaScript & jQuery] html 내가 원하는 화면 캡쳐하는 방법 !!
(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="capBtn">캡쳐</button>
<!-- 캡쳐할 영역 -->
<div id="capture" style="padding: 5px; width: 300px; background: tomato">
<h1>캡쳐할 부분</h1>
<h2>캡쳐할 부분2</h2>
<h3>캡쳐할 부분3</h3>
</div>
<script>
$(function(){
$("#capBtn").on("click", function(){
// 캡쳐할 영역을 html2canvas로 캡쳐하여 canvas로 변환
html2canvas(document.querySelector("#capture")).then(canvas => {
saveImg(canvas.toDataURL('image/png'),"capture-test.png");
});
});
// 캡쳐된 파일을 저장하는 함수
function saveImg(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>결과값
캡쳐할 부분
캡쳐할 부분2
캡쳐할 부분3
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript & jQuery] html 특정 영역 드래그로 캡쳐하는 방법 !! (html2canvas 라이브러리) (0) | 2023.03.03 |
|---|---|
| [JavaScript] 자바스크립트로 URL, 주소 복사 하는 방법 !! (0) | 2023.03.02 |
| [JavaScript] 자바스크립트로 텍스트(TEXT) 복사 하는 방법 !! (0) | 2023.02.28 |
| [JavaScript & jQuery] 특정 태그에 width 값 변경 및 주는 방법 !! (0) | 2023.02.27 |
| [JavaScript] 자바스크립트 원하는 소수점 표시하는 방법 !! (0) | 2023.02.26 |
댓글