티스토리 뷰
안녕하세요 탐구소년입니다!
이번 게시글에서는 HTML/CSS/Javascript로 코드를 작성하여 웹 문서를 표시했을 때, 전체 또는 일부의 내용을 이미지 파일로 내보내는 방법에 대해 알아보도록 하겠습니다. 예상컨대 다양한 방법과 관련 라이브러리가 여러가지 경로를 통해 제공되고 있으리라 생각이 드는데요. 여기에서는 dom-to-image 라는 라이브러리를 사용해 목표하는 기능을 구현해보도록 하겠습니다.
dom-to-image?
자바스크립트로 작성된 라이브러리로, DOM 요소를 벡터나 래스터 이미지로 변환하는 데 사용할 수 있습니다.
filsaver?
파일 내보내기 기능을 구현할 때 곧잘 사용되는 라이브러리입니다.
적용 예
먼저 아래와 같이 html 문서를 작성해줍니다(이미지는 아무거나 사용해도 무관합니다).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"
></script>
<title>영역 내보내기 as image</title>
<style>
#image__{
width: 640px;
padding: 20px;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<div id="image__">
<h1>내보내고 싶은 영역</h1>
<p>자식 요소들이 다수 포함되어 있다</p>
<p>과연 잘 될까?</p>
</div>
<button id="exportBtn">내보내기</button>
<script>
</script>
</body>
</html>
|
6번 줄과 9번 줄에서는 각각 dom-to-image와 filesaver 라이브러리를 CDN 방식으로 import 하고 있습니다. 그리고 나중에 이미지로 내보내기 원하는 div 영역에 image__라는 ID를 지정하였습니다. 이제 해당 영역을 내보낼 수 있도록 script 태그 사이에 자바스크립트 코드를 작성해줍니다. 버튼을 누르면 내보내기가 동작하는 방식으로 구현할 것입니다.
|
1
2
3
4
5
6
|
document.getElementById('exportBtn').onclick = function(){
domtoimage.toBlob(document.getElementById('image__'))
.then(function (blob) {
window.saveAs(blob, 'image__.png');
});
}
|
버튼의 onclick 속성에 기능을 등록해주는 코드입니다. domtoimage라는 객체(don-to-image로부터 나온)가 toBlob 메소드를 사용해 내보내고자 하는 영역을 지정해주었습니다. 해당 메소드가 동작을 마치고 나면 결과에 대한 객체가 생성됩니다. 이를 익명함수로 처리해줄 때에 fileSaver의 saveAs 메소드를 사용했습니다. 이는 파일을 내보내는 동작에 대한 직접적인(?) 메소드입니다.
코드 작성을 마쳤으니, 이제 결과를 확인해보도록 하겠습니다.
버튼을 누르고 난 뒤 다운로드 폴더를 확인하면, image__.png 라는 이름의 파일이 생긴 것을 확인할 수가 있습니다.
마지막으로 해당 파일의 모습을 보이면서 마무리하도록 하겠습니다.
감사합니다.
'IT > 프로그래밍' 카테고리의 다른 글
| 프론트엔드 개발자 기술면접 질문 정리 (0) | 2020.11.06 |
|---|---|
| 파이썬 pandas | 소개 및 데이터프레임 사용법 (0) | 2020.10.05 |
| 파이썬 turtle 예제 : 도형 그리기 (1) | 2020.09.21 |
| 컴파일러 인터프리터 차이 (0) | 2020.09.16 |
| 자바스크립트 map() (0) | 2020.09.11 |