특정 영역 캡쳐해서 이미지로 HTML에 띄우기

출처 : https://hooongs.tistory.com/65

[html] Canvas로 특정 영역 스샷하기

 

상황

<div>든 HTML의 특정 영역을 캡쳐해서 별도로 지정한 <div>등의 영역에 캡쳐해서 자동으로 이미지로 띄워주는 기능을 구현하고 싶다.

문제 해결하기

• 기능 구현에 사용되는 JQuery, html2canvas CDN 삽입하기
  • </body> 닫는 태그 앞 권장
  • HTML 문서에서 외부 자바스크립트 시트를 불러와 별도로 작업하는 경우 해당 호출 태그는 CDN 아래에 삽입하여야 작동한다.
    그리고 외부 시트가 아니라 HTML에서 작성하더라도 이 기능의 <script></script>는 아래 CDN 아래에서 작성한다.

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<script src="script.js"></script>

• 아래의 제이쿼리를 이용해 자바스크립트 기능을 구현한다.

<script>
    $(function(){
        $("#온클릭을 발생시킬 버튼의 아이디").click(function() { 
            html2canvas($('#복사할 영역의 아이디 또는 .클래스').get(0)).then( function (canvas) {
                document.getElementById('붙여넣을 구역의 아이디').appendChild(canvas)
            });
        });
    });
</script>