웹 div를 image로 download하는 방법!(html2canvas.js)

회사에서 프로젝트를 하면서

현재 html div 영역에 그러져 있는 이미지나, 그래프를 이미지(image)로 다운로드 가능하도록 해달라는 요구가 있었다

그래서 '이게 되나?' 이러면서 찾아봤었는데

처음에는 node js로 div image download 기능만 보이다가 더 찾아보니까

html2canvas라는 js 라이브러리가 있었다

만약 이런 사진이 있다면

이렇게 이미지를 올리고

이미지로 다운로드를 클릭을 하면

파일이 다운로드가 된다.

파일명은 바꿀 수 있다

이렇게 png 파일로 다운로드가 된 것을 볼 수 있다.

사용법은 의외로 정말 간단했다

(물론 별의 별 오류를 다 겪었지만..)

버튼 하나 만들고

버튼 클릭 시 printdiv 함수를 호출하는데 $('#div_id')를 넘겨주면 된다.

자바스크립트로 하실꺼면 document.getElementById()로 해도 상관없는 것 같았다.

그리고 printdiv에서 div = div[0]을 통해 한 번 더 받는데

이렇게 한 이유는

Uncaught (in promise) Provided element is not within a Document

라는 에러가 나왔기 때문이다.

div 영역 안에 있는 0번째 인덱스 정보를 가져온다.

다음으로 html2canvas(div).then(function(canvas)를 사용하는데

이게 문제가 버전마다 다르다.

본인은 19년 01월 30일 기준으로 다운로드를 받았었는데 예전 문법을 사용하니까

onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value

라는 오류가 나왔다.

알고보니 문법이 다른 것이었고 위와 같은 방법으로 진행하면 아무 문제가 없다.