[JQuery]div영역 이미지로 저장하기

INTRO

안녕하세요. 이번에는 div내부를 이미지로 저장하는 기능을 알아보도록 하겠습니다.

div내부에 이미지나 텍스트를 넣고 난 후 결과물을 이미지로 저장할 경우 유용하게 사용할 수 있습니다.

일단 필요한 js파일은 

1. FileSaver.js

2. html2canvas.js

이 두가지 파일이 필요합니다.

CONTENTS

1. js파일 추가

<script src="js/FileSaver.js"></script>

<script src="js/html2canvas.js"></script>

파일이 없을 경우(CDN)

https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js (하위버전은 실행이 되지 않을 수 있습니다.)

추가

2. 간단한 html

<div id="downloadImage" align="center" style="width: 391px;">

   <img alt="" src="image/background/b1.png">

</div>

<div>

   <button id="save">저장하기</button>

</div>

★ div의 width값을 지정해주지 않으면 100%값이 적용되어 해당 라인을 모두 저장합니다.

3. 스트립트

<script type="text/javascript">

$(function(){

   $("#save").click(function() { 

        html2canvas($("#downloadImage"), {

            onrendered: function(canvas) {

                canvas.toBlob(function(blob) {

                    saveAs(blob, 'image.png');

                });

            }

        });

    });

});

</script>

OUTRO

지금까지 div를 이미지로 저장하는 방법을 알아봤습니다. 간단한 소스이지만 유용하게 많이 쓰일 듯 합니다.