[html2canvas] 웹 화면을 이미지로 저장하는 방법 ( 캔버스 )

회사 업무를 하다가 신기한 기능하나를 구현해서 기록하려한다.

"웹페이지를 이미지화 시켜 저장하는 방법"이다.

백단으로 넘어가지 않고 라이브러리를 사용해 스크립트만 사용하여 페이지의 일부분을 저장하는 것이다.

해당 기능을 도와준 친구들은 html2canvas라는 친구다 :D

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

 

 

자바스크립트 코드만 간단히 들고 왔다.

download버튼을 클릭시 section을 모두 이미지화 하고 싶었다.

클릭시 이미지의 경로를 만들어 a태그 생성 및 강제 클릭후 다시 해당 태그를 지웠다. ( saveAs() )

 

한가지 주의할 점이 있는데 가끔 CSS를 인식 못하는것 같다. 특히 position이 absoulte로 설정되어 있는 친구들..!

정상적으로 출력이 안돼 absolute를 float로 바꿔주는등 모두 수정했었다 :_(

$(document).ready(function(){
    // 다운로드
    $("#download").click(function() {
        $("section").each(function(index) {
            index += 1;

            html2canvas($(this), {
                onrendered: function(canvas) {
                //return Canvas2Image.saveAsPNG(canvas);
                saveAs(canvas.toDataURL(), index +'_Media.jpg');
            }
        });
    });
});

// 다운로드 링크 생성
function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
    } else {
        window.open(uri);
    }
}

 

+ ) 주석처리 되어 있는 부분은 다른 라이브러리인데,

https://hongru.github.io/proj/canvas2image/canvas2image.js

해당 라이브러리는 Canvas2Image.saveAsPNG(canvas); 라는 함수만 실행하면 이미지가 다운받아진다.

제대로 사용해본게 아니나 이름변경이 안되고, 이미지가 정상적으로는 열리나 이미지 파일처럼 안생겼다...

 

다운받아진 이미지 :)

 

---

html2canvas에서 제한사항이 하나 있었다.

이것때문에 1시간 반을 날려먹었다^^

크롬기준으로 15000픽셀을 넘어가는 페이지는 텍스트가 제대로 저장되지 않았다.

( 1920x1080 이미지를 저장하는데 이상하게 15번째 다음의 이미지를 제대로 인식 못하도라... )

그래서 쓴 방법 하나는 저장된 이미지를 display : none을 해줬다가 모두 다운 됐으면 다시 보이도록 처리해줬다 :)