[ html2canvas / jszip ] html화면 캡쳐 zip파일로 다운받기

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

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

이전에 html2canvas를 이용해 html을 이미지로 변환하여 저장하는 포스팅을 한적이 있는데,

해당 기능은 기본으로 있는 다운로드 폴더에 이미지가 30개 40개씩 다운이 받아지니 아무래도 불편할때가 있었다.

그래서 혹시 zip파일로 할 수 있는지 알아보고 한번 해봐달라기에 열심히 검색해봤다.

검색 해본 결과 html2canvas로 저장되는 이미지 url을 통해 JSZip 라이브러리로 읽어서 저장할 생각이었다.

그리고 이번에 자바스크립트에서 내가 얼마나 무지한지도 알게됐다ㅎ하...ㅎㅎ

---

JSZip 다운로드 : https://github.com/Stuk/jszip  

해당 깃허브에 들어가면 바로 보이겠지만 우선 JSZip에서 제시하고 있는 기본 적인 문법은 아래와 같다.

var zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");

var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"blob"}).then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

base64 : Binary Data를 Text로 바꿔주는 인코딩 방식

blob : 데이터 사이즈와, 타입에 대해 알 수 있다.

        slice()를 통해 지정된 바이트 범위의 데이터를 포함하는 새로운 blob객체를 만들 수 있다.

 

 

기본적으로 아래의 문법을 통해 파일을 추가해준다.

이 외에도 문서를 읽어보면 folder()를 통해 폴더 생성도 할 수 있다.

img.file("파일명", "내용", {"인코딩방식": true});

 

파일을 추가해줬으면 generateAsync() 함수를 통해 zip파일을 생성한다.

여기서 blob타입으로 저장을 하려고 하니 호환되는 브라우저이여야 했으며

추가적으로 FileSaver라는 라이브러리가 필요했는데...

개인적으로 최신 브라우저인데도 잘 되지 않아 아래처럼 수정해주었다.

다만 파일명을 지정할 수 없는 단점이 있다. :_(

관련 문서 : https://stuk.github.io/jszip/documentation/howto/write_zip.html

zip.generateAsync({type:"base64"}).then(function (base64) {
    location.href="data:application/zip;base64," + base64;
});

---

그럼 이제 본격적으로 적용해보려한다 !

아래의 참고한 페이지에서 되지 않는 부분을 다듬었다.

$("section").each(function(index) {			
    var tag = $(this);
    index += 1;

    html2canvas($(this), {
        onrendered: function(canvas) {
            $("#blank").attr('href',canvas.toDataURL('image/jpeg', 1.0));
            $("#blank").attr('download',"abc" + ".jpeg");
            url = $("#blank").attr('href');
            
            //Create new zip file with filename and content
            zip.file("media"+index+".jpeg", urlToPromise(url),{binary:true});
        }
    });
});	

urlToPromise() 함수는 계속해서 설명하겠다.

해당 함수를 제외하고는 크게 이해하기 어려운 부분은 없다고 생각한다.

다만 참고 코드와 다른점은 canvas.toDataURL()을 a태그에 href 속성으로 설정 후 불러왔다.

이전엔 html2canvas만 사용할 때 a태그를 눌러서 다운 받으니 이해를 했는데...

여기선 왜 다운받지 못하는지 사실 명확하게 이해가 가진 않는다.

 

 

마지막으로 urlToPromise() 함수를 살펴보고 마무리하겠다.

해당 url의 파일을 불러와 읽어야 하기 때문에

jszip-utils 라이브러리를 통해 ajax로 파일을 읽어오도록 하겠다.

JSZip Util 다운 : https://github.com/Stuk/jszip-utils

function urlToPromise(url) {
     return new Promise(function(resolve, reject) {
          JSZipUtils.getBinaryContent(url, function (err, data) {
               if(err) {
                    reject(err);
               } else {
                    resolve(data);
               }
          });
     });
}

 

! 결과 !

고럼 여기서 끝!👏👏

 

 

 

참고 : https://stackoverflow.com/questions/54417964/convert-html-to-canvas-and-download-as-zip-file