웹에서 스크린샷을 찍은 후 파일로 저장하기

어쩌다 웹페이지를 이미지로 저장해달라는 요구가 있다.

그때 유용한 오픈소스들을 활용하면 어렵지 않게 구현이 가능하지만

망할  M$ 익스플로러 때문에 삽질을 해댔다.

참고로 IE10 이상부터 지원한다.

아래 소스는 맥 크롬에서도 테스트 해봤다.

js 첨부파일은 각각 여기서 다운로드도 가능함

https://html2canvas.hertzen.com/

https://github.com/hongru/canvas2image

일단 include시키고

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

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

버튼 누르면 이미지 저장

$("#SAVE").click(function(e) {

    e.preventDefault();

    

   var canvas ="";

   html2canvas($("#container"), {

       onrendered: function(canvas) {

            //document.getElementById("RESULT").src = canvas.toDataURL();   // 이미지를 보여주고 싶으면 이런식으로 치환해버림 됨

                

            if (canvas.msToBlob) { // 망할 익스플로러 예외처리.. 망해라 M$

                var blob = canvas.msToBlob();

                window.navigator.msSaveBlob(blob, "FILENAME.png");

            } else {

                Canvas2Image.saveAsPNG(canvas, document.body.clientWidth, document.body.clientHeight, "FILENAME");

            }

       }

   });

});

*활용팁

이미지 덤프기능인 이 소스를 적용하였는데 스크롤이 너무 길어서 다 나타나지 않는다면?

사이즈를 키워주고 덤프 뜨면 되겠지.. 이정도는 기본이니 사족급 팁

window.resizeTo(document.body.scrollWidth, document.body.scrollHeight);

* 추가팁

빌어먹을 익스플로러에선 테이블선이 제대로 나타나지 않는다.

이럴땐 오픈소스를 수정해야 한다.

html2canvas.js를 열어 

이 파랑 부분을 width: container.cssInt('border' + side + 'Width'), 

이렇게 width: container.cssFloat('border' + side + 'Width'),

고쳐주면 제대로 보여진다.