2020.10.30.(금) 파이널 프로젝트 - html2canvas : html을 이미지로 저장

myspace 2020. 10. 31. 13:50

버튼 누르면 div 영역이 캡쳐 돼서 이미지로 저장 됨.

1. pom.xml

		<!-- html2canvas -->
		<dependency>
		    <groupId>org.webjars.npm</groupId>
		    <artifactId>html2canvas</artifactId>
		    <version>0.5.0-beta4</version>
		</dependency>

2. kakaoshare.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%request.setCharacterEncoding("UTF-8");%>
<%response.setContentType("text/html; charset=UTF-8");%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kakao Sharing</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="resources/js/kakaoshare.js" defer></script>
<script src="resources/js/imgdownload.js" defer></script>
<link rel="stylesheet" type="text/css" href="resources/css/kakaoshare.css">
</head>
<body>

	<div>
	<img src="resources/image/park.JPG" alt="london park" width="400" height="200" id="kakao-link-btn" onclick="sendLink()">
	<button id="kakao-link-btn" onclick="sendLink()">공유하기</button>
	<button id="kakao-link-btn" onclick="dailyLink()">daily 공유</button>
	<button id="kakao-link-btn" onclick="etcLink()">weekly/monthly 공유</button>
	</div>
	
	
	<div id="capture" style="padding: 10px; background:#f5da55">
		<h4 style="color: #000; ">Hello world! Capture Test!</h4>
	</div>
	<button id="saveImg">html 화면 캡쳐해서 이미지로 변경</button>
	
	
	<a id="download" download="hitmap.JPG">
	<button type="button" onClick="download()">Download</button>
	</a>
<!-- 	<canvas id="myCanvas" width="720" height="450">
		Your browser does not support Canvas.
	</canvas> -->
	
	
	<div style="background:red;" id="test">
		<div style="background:green;">
			<div style="background:blue;border-color:white;">
				<div style="background:yellow;">
					<div style="background:orange;">
					<img src="resources/image/paris.JPG" alt="paris" width="400" height="200">
						<h1>Heading</h1>
						Text that isn't wrapped in anything.
						<p>
						Followed by some text wrapped in a <b> paragraph.</b>
						</p>
						Maybe add a	<a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>. <hr/>
						<h2>More content</h2>
						<div style="width:10px;height:10px;border-width:10px;padding:0;">
						a
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

3. imgdownload.js

// 버튼 클릭할 시 캡처한 내용 body에 붙이기
$('#saveImg').click((e) => {
	html2canvas(document.querySelector("#capture")).then(canvas => {
		document.body.appendChild(canvas)
	});
});

/* html2canvas - 흰 화면 그대로 저장 */
/*function download(){
	var download = document.getElementById("download");
	var image = document.getElementById("myCanvas").toDataURL("image/png")
	    .replace("image/png", "image/octet-stream");
	download.setAttribute("href", image);
	//download.setAttribute("download","archive.png");
}*/

/* html2canvas - div 영역이 아닌 전체화면 스크린샷 */
/*html2canvas(document.body).then(function(canvas) {
	canvas.setAttribute("id", "mycanvas");
	canvas.setAttribute("style", "display:none");
	document.body.appendChild(canvas);
	download();
});*/

/* html2canvas - div 영역 스크린샷 */
html2canvas(document.querySelector("#test")).then(function(canvas) {
	canvas.setAttribute("id", "mycanvas");
	canvas.setAttribute("style", "display:none");
	document.body.appendChild(canvas);
	download();
});

function download() {
	var image = document.getElementById("mycanvas")
						.toDataURL("image/png")
						.replace("image/png", "image/octet-stream");
	var download = document.getElementById("download")
							.setAttribute("href", image);
							
}

참고 사이트

irpro.tistory.com/10

JS만으로 화면을 찍어 이미지로 다운받기

1. JS를 이용해서 화면에 있는 내용을 SVG로 변환 https://html2canvas.hertzen.com/ 위 라이브러리는 화면에 대한 내용이 바로 아래에 SVG로 나타나는 것을 확인할 수 있습니다. 메뉴 Examples에서 예제를 통해

irpro.tistory.com