2017. 3. 13. 15:59ㆍlanguage/javascript
프로젝트를 진행하다보니 페이지의 특정 영역을 이미지로 다운받아야 하는 경우가 생겼다.
여러 방법이 있는데 이번엔 html2canvas.js 라는 녀석을 사용해보기로 했다.
JSP, Spring 프레임워크 위에서 적용시켰다.
테스트는 ie9, 10, 11, Edge, Chrome 에서 진행하였다.
|
LICENSE : 무료라는 내용이다.
Copyright (c) 2012 Niklas von Hertzen Permission is hereby granted, free of charge, to any person The above copyright notice and this permission notice shall be THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
본 포스팅에서는 2015년 1월 20일날 released 된 0.5.0-alpha1 버전을 기준으로 설명한다.
|
주의사항
본 포스팅에서 설명하는 html2canvas 라이브러리는 브라우져별로 아직 해결되지 않는 문제점들이 있다.
1. 특정 태그 영역을 기준으로 캡쳐를 할 때 그 영역의 css(style) 적용이 누락 될 수 있다. 2. 브라우저 버전(ie9~11, Edge, Chrome 등등)에 따라 다른 각기 다른 오류 및 이상증상이 나타날 수 있다. ( 본문 아래 해결책 링크있음 ) 3. iframe 이슈가 있었는데 최신버전에서는 지원이 된다는 내용의 글을 본적이 있다. (테스트는 안해봤음)
그러므로 이미지로 캡쳐되어지는 결과물에 대해서 충분한 테스트를 진행해 보아야 하겠다.
단, 적용방법은 심플하기 때문에 10분도 걸리지 않는다.
|
적용방법
1. 재료 준비
html2canvas.js 다운로드
다운로드 주소 : https://github.com/niklasvh/html2canvas/releases
commons-codec 라이브러리 다운로드
다운로드 주소 : http://commons.apache.org/proper/commons-codec/download_codec.cgi
commons-io 라이브러리 다운로드
다운로드 주소 : http://commons.apache.org/proper/commons-io/download_io.cgi
라이브러리들은 버전에 맞게 받도록 한다.
jdk 지원 및 상호 호환이 맞는지 정도는 체크해야 함
2. jsp 파일 작성
|
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
33
34
35
36 |
<html>
<head>
<title>Print</title>
<script type="text/javascript" src="/resources/script/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="Javascript">
$(function(){
/** btnDown 버튼 클릭 **/
$('#btnDown').click(function() {
html2canvas($('.printDiv'), {
onrendered: function(canvas) {
if (typeof FlashCanvas != "undefined") {
FlashCanvas.initElement(canvas);
}
var image = canvas.toDataURL("image/png");
$("#imgData").val(image);
$("#imgForm").submit();
}
});
});
});
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div class="printBtnZone" align="right" >
<a id="btnDown" class="btn bg-gray small w-auto">다운로드</a>
</div>
<form name="imgForm" id="imgForm" action="/link/download/" method="post">
<input type="hidden" id="imgData" name="imgData">
</form>
<div class="printDiv">
여기가 이미지로 바뀌는 영역입니다.
이 영역에는 table 등 기타 다른 테그들로 체워질 수 있습니다.
</div>
</body>
</html> |
cs |
4# : 다운받은 html2canvas.js 파일을 import
5# : jquery import
9# : 다운로드 버튼 클릭 이벤트
10# : $('.printDiv') 는 이미지로 만들 태그 (영역)
15# : canvas 로 변환 (Base64 encoding)
16# : hidden 태그에 변환된 값 대입
17# : post 방식으로 submit
26# : 다운로드 버튼
28# : 다운로드 form
31# : 이미지로 만들 태그 (영역)
3. 이미지 다운로드 (Controller)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
@RequestMapping(value = "/link/download/", method = RequestMethod.POST)
public void download(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) {
try {
String imgData = request.getParameter("imgData");
imgData = imgData.replaceAll("data:image/png;base64,", "");
byte[] file = Base64.decodeBase64(imgData);
ByteArrayInputStream is = new ByteArrayInputStream(file);
response.setContentType("image/png");
response.setHeader("Content-Disposition", "attachment; filename=report.png");
IOUtils.copy(is, response.getOutputStream());
response.flushBuffer();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} |
cs |
4# : 이미지 파라미터를 꺼냄
5# : 필요없는 단어들 제거
6# : Base64 로 decoding 해서 byte[] 타입으로 변환
commons-codec 라이브러리가 필요함 ( import org.apache.commons.codec.binary.Base64; )
8# : byte[] 을 ByteArrayInputStream 으로 변환
10# , 11# : contentType, header 정보 셋팅. header 마지막에 filename 는 다운로드되는 파일명
13# : IOUtils 을 이용해서 다운로드
commons-io 라이브러리가 필요함 ( import org.apache.commons.io.IOUtils; )
끝
혹시 table 에 board 가 안나온다거나 문제가 있다면
다음 포스팅 참고
'language > javascript' 카테고리의 다른 글
| spin.js 에 알림말 text 넣기 / 로딩바 (0) | 2017.08.22 |
|---|---|
| javascript onbeforeunload 오작동 / 버그 (0) | 2017.06.29 |
| javascript encoding url / url encode decode 하기 / javascript 한글 깨짐 (0) | 2017.06.28 |
| javascript 프로그레스바 / 로딩바 플러그인 (0) | 2017.05.29 |
| html2canvas 적용 시 table border 안나오는 문제 (4) | 2017.03.13 |
| javascript showModalDialog 에서 window.open 시 session 이슈 (0) | 2017.01.05 |
| javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지 (16) | 2016.12.09 |
| dwr 에서 request, session 사용하기 / WebContextFactory is deprecated (0) | 2016.12.08 |
| javascript | 모바일 브라우저 userAgent로 디바이스 구분하기 / android ios 구분하기 (0) | 2016.08.10 |
| javascript 계산기 / 자바스크립트 계산기 만들기 (2) | 2016.06.28 |