JSP 페이지 이미지로 저장, 웹페이지 이미지로 저장, 페이지 이미지 캡쳐

2017.03.13 15:59language/javascript


JSP 페이지 이미지로 저장, 웹페이지 이미지로 저장, 페이지 이미지 캡쳐

 

 

프로젝트를 진행하다보니 페이지의 특정 영역을 이미지로 다운받아야 하는 경우가 생겼다.

 

여러 방법이 있는데 이번엔 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
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

 

 

 

 

 

본 포스팅에서는 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 가 안나온다거나 문제가 있다면

 

다음 포스팅 참고

 


html2canvas 테이블 오류 해결 방법

 

 

 

  • 프로필사진
    temp2019.08.14 14:38

    혹시 commons-codec이랑 commons-io 버전이 어떤걸루 하셨나요 ㅠㅠ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2019.08.14 14:48 신고

      안녕하세요 ㅎㅎ

      제가 소스를 다 가지고 있진 않아서 정확한 버전은 모르겠어요 ㅠㅠ

      개발하시는 환경에 맞게 설정하시면 될 거같아요

      라이브러리마다 디펜던시가 있으니 참고하셔서 사용하세요 ㅎㅎ

  • 프로필사진
    2019.08.22 11:02

    비밀댓글입니다