[Javascript] 웹 화면 캡쳐하기 (Javascript, Html2Canvas)

웹 화면 캡처하기 (Javascript, Html2Canvas)

 

HTML의 특정 태그(div, canvas) 영역의 차트를 이미지로 다운로드하는 요구사항이 있어서, 그 방법을 찾고 정리해보려 한다.

 

 

 

방법은 두 가지가 있다.

 

1. javascript 코드로 이미지 다운 받기

2. html2canvas 라이브러리를 이용해 특정 영역 이미지로 다운받기

 

현재 내가 개발중인 프로젝트는 toast-ui chart와 chart.js 라이브러리를 사용하는데 chart.js 는 canvas 위에 그리고 toast-ui chart는 이전버전을 사용하고 있어서 div 태그 영역을 캡쳐 해야하는 상황이 생겼다.

그래서 두 가지 방법 모두 사용하였다.

 

 

 

첫 번째 방법

 

자바스크립트와 a태그를 이용한 다운로드 방법이다.

 

예시

imageCreate = () => {

	//Download Chart Image
	document.getElementById("download").addEventListener('click', function(){
	/*Get image of canvas element*/
	var url_base64jp = document.getElementById("combo-tree-chart").toDataURL("image/jpg");
	/*get download button (tag: <a></a>) */
	var a =  document.getElementById("download");
	/*insert chart image url to download button (tag: <a></a>) */
	a.href = url_base64jp;

}

 

 

toDataURL()은 캔버스 영역을 이미지로 변환하는 함수이다.

이를 변수에담고 html에서 정의한 a태그의 href 속성값으로 넣어주기만하면 이미지가 다운로드 된다.

 

두 번째 방법

 

다음은 html2canvas 라이브러리를 이용한 방법이다.

html2canvas 라이브러리는 웹 화면을 캡쳐하기 위해 사용하는 라이브러리이다.

아래에 링크에 공식사이트가 있다.

 

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

 

설치는 아래와 같다.

 

//Install NPM
npm install --save html2canvas
//Install Yarn
yarn add html2canvas

 

나는 React를 기반으로 해서 사용했기 때문에 다음과 같이 사용하였다.

 

import html2canvas from 'html2canvas';
//...생략


imageCreate = () => {
        
        //div -> canvas -> jpg
        html2canvas(document.getElementById('combo-tree-chart')).then(canvas => {
            let url_base64jp = canvas.toDataURL("image/jpg");

			//a태그를 생성하여 클릭이벤트까지 발생시킴
            var link = document.createElement('a');
            //파일명을 정의한다.
            link.download = 'title.jpg';
            //href속성에 base64값을 넣어준다.
            link.href = url_base64jp;
            link.click();

        })
    }

보면 여러가지 오류가 많다고 하고, 제약사항 또한 존재하여 구현은 하였지만 여러가지 테스트를 해봐야겠다.