[javascript] html2canvas로 영역 캡쳐하기 (scroll 영역부분이 캡쳐가 안된다면?)

개념

화면의 일부 영역을 이미지 데이터로 변환하여 사용해야할 필요가 있어서

자바스크립트 브라우저 화면 캡쳐 라이브러리인 html2canvas 를 사용하기로 했다.

 

 

* 공식사이트

https://html2canvas.hertzen.com/

 

 

 

나는 버튼 클릭이벤트가 발생하면 특정 영역을 이미지로 따와야했기 때문에

해당 함수 호출부분에 아래와같은 코드를 추가하였다.

html2canvas(textArea, {
	}).then(canvas => {
	const textToImg = canvas.toDataURL()
})

 

 

나는 이미지를 서버에 저장할필요가 없이 변환된 데이터값만 필요했기때문에 textToImg 변수로 담아 사용하였다.

만약 서버에 이미지를 다운받아야 한다면, 아래와 같이 사용할 수 있다.

 

html2canvas(textArea, {
	}).then(canvas => {
	saveAs(canvas.toDataURL('image/png'),"capture01.png")
})

 

 

---

 

트러블슈팅

 

문제

 

나는 텍스트 파일이 그려진 화면을 캡쳐해야 했다.

구조는 대충 이런 형식이다.

<div id='parentDiv'>
	<pre id='textArea'>
		{{ 텍스트 데이터 내용이 담긴 부분 }}
	</pre>
</div>

 

문제는 화면이 보이는 영역보다 해당 텍스트 데이터(id='textArea')가 더 크기가 컸기때문에

하단 내용이 화면에서 잘리고 스크롤이 생긴다는 것이다.

 

이상황에서 html2canvas를 사용하여 캡쳐를 할 경우

렌더링 과정에서 스크롤 바깥부분은 잘린채로 캡쳐되는 문제가 있었다.

 

검색했을때 스크롤이동, 좌표값 할당 등 다양한 방법이 있었지만

해결책은 은근 간단했다.

 

---

 

해결방법

 

컨트롤 요소는 두가지이다.

1. 스크롤

2. 높이

 

 

1. 스크롤

우선 텍스트영역에 스크롤을 활성화 시켜줬다. (overflow: auto)

그 후 상위 div 태그에 스크롤을 비활성화 시켜준다. (overflow: hidden)

위의 코드에 적용하면 다음과 같다.

<div id='parentDiv' style="overflow: hidden;">
	<pre id='textArea' style="overflow: auto;"> // 이때 height값이 적용되어야 함.
		{{ 텍스트 데이터 내용이 담긴 부분 }}
	</pre>
</div>

 

 

2. 높이

그 후 우선 캡쳐를 하려는 텍스트영역의 높이값이 할당되어 있는지 확인해봐야한다.

100% 와 같은 상대값이 아닌, 500px 등과 같이 해당 텍스트영역의 절대값 높이가 할당되어 있어야 한다.

나는 html영역에서 css로 텍스트영역에 100%로 높이값이 설정되어있다고 가정하고

클릭이벤트 발생시 javascript로 높이값을 할당해주려고 한다.

 

코드는 다음과 같다.

 

*html

<div id='parentDiv' style="overflow: hidden;">
	<pre id='textArea' style="overflow: auto; height: 100%;"> // 이때 height값이 적용되어야 함.
		{{ 텍스트 데이터 내용이 담긴 부분 }}
	</pre>
</div>

 

*js (클릭이벤트가 발생하는 함수에 적용시킨다.)

const el = document.getElementById('textArea')
el.style.height = el.scrollHeight + 'px'

 

이렇게 하면 클릭이벤트 발생시 해당 텍스트 영역의 전체 높이가 pre태그 height로 할당되어

잘리는 부분 없이 이미지 변환값을 얻을 수 있다 ㅎㅎ!