html2canvas 사용법 : 캡처를 이미지로 다운로드

728x90

javascript 브라우저 화면 캡처(capture) 라이브러리 html2canvas 사용법을 알아보자.

html2canvas - Screenshots with JavaScript

Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture

html2canvas.hertzen.com

코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Html2canvas사용법</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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--캡처영역-->
    <div id="main_capture">
        <h3>A B C D E F G</h3>
    </div>
    <button id="pick">Download</button>
<script>
$(function(){
    $("#pick").on("click", function(){
    // 캡처 라이브러리를 통해 canvas 오브젝트 받고 이미지 파일로 리턴함
    html2canvas(document.querySelector("#main_capture")).then(canvas => {
                saveAs(canvas.toDataURL('image/jpg'),"lime.jpg"); //다운로드 되는 이미지 파일 이름 지정
                });
    });
    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>

브라우저 실행 시

div 영역에 있는 화면을 캡처하여 이미지로 변환시키고 싶을 경우

다운로드 버튼(#pick)을 누르면 A B C D E F가 쓰여있는 화면이 캡처(#main_capture) 되도록 구현한다.

lime으로 이미지 이름을 지정해보니 lime.jpg 이름으로 이미지 파일이 변환되고 다운로드 된다.

이미지 클릭시 div화면이 캡처되어 이미지로 저장된 것을 볼 수 있다.

이미지 저장시 유용하게 사용할 수 있는 기능이다.

저작자표시

'IT개발 > 웹개발' 카테고리의 다른 글

객체지향형과 절차지향형 차이 (0)	2021.11.04
Java : 클래스(Class) 객체지향 프로그래밍! (0)	2021.11.01
자바 업데이트 버전 변경하는 방법 Java8 에서 Java11로! (0)	2021.10.25
javascript 웹사이트 방문자수 코드 (0)	2021.10.05
명언테스트 : MBTI테스트 성격테스트 만들기 (0)	2021.08.17