본문 바로가기

프론트엔드/자바스크립트

[JSZip 라이브러리] 이미지 파일을 압축된 폴더로 다운로드

 

 

1.  html-to-image 라이브러리로 이미지를 만든 후

 

2.JSZip 라이브러리를 사용하여 파일을 압축한 다음 다운로드 할 수 있습니다.

 

  1. 터미널에서 다음 명령어를 실행하여 JSZip 라이브러리를 설치합니다. 
  2. npm install jszip
  3. saveImage() 함수에서 JSZip을 import 합니다. import JSZip from 'jszip';

 

JSZip 라이브러리를 CDN으로 가져오는 방법

  1.  <head> ..... <script src="https://cdn.jsdelivr.net/npm/jszip@3.3.0/dist/jszip.min.js"></script> </head> 
  2. const zip = new JSZip();

 

 그러나 CDN 방식으로 라이브러리를 가져오는 것은 인터넷 연결에 의존하기 때문에 네트워크 지연이나 연결 불안정성에 따라 성능이 달라질 수 있습니다. 따라서 가능하면 npm을 사용하여 로컬에 라이브러리를 설치하고 import 구문을 사용하여 가져오는 것이 좋습니다.

 

 

const saveImage = () => {
  let toImageBtn = document.querySelector('#transImgBtn');
  toImageBtn.addEventListener('click', ()=>{
    const elements = document.querySelectorAll('.img1,.img2,.img3,.img4,.img5,.img6');
    let zip = new JSZip();
    elements.forEach((el, index) => {
      htmlToImage.toJpeg(el)
      .then(function (dataUrl) {
        const num = document.querySelector('#result__highwayNum').innerHTML;
        zip.file(`202304_${num}_${index}.jpeg`, dataUrl.split(',')[1], {base64: true});
        if(index === elements.length - 1){
          zip.generateAsync({type:"blob"}).then(function (content) {
            const filename = `202304_${num}.zip`;
            saveAs(content, filename);
          });
        }
      });
    });
  });}.   이렇게 하면 여러 이미지를 다운로드 했을 때 (6개 이미지 중 3개만 다운되는 등) 병렬처리하지 않은 에러가 발생합니다.

 

const saveImage = () => {
  let toImageBtn = document.querySelector('#transImgBtn');
  toImageBtn.addEventListener('click', ()=>{
    const elements = document.querySelectorAll('.img1,.img2,.img3,.img4,.img5,.img6');
    let zip = new JSZip();
    let promises = [];
    elements.forEach((el, index) => {
      promises.push(
        htmlToImage.toJpeg(el)
        .then(function (dataUrl) {
          const num = document.querySelector('#result__highwayNum').innerHTML;
          console.log(num);
          zip.file(`202304_${num}_${index}.jpeg`, dataUrl.split(',')[1], {base64: true});
        })
      );
    });
    Promise.all(promises).then(() => {
      zip.generateAsync({type:"blob"}).then(function (content) {
        const num = document.querySelector('#result__highwayNum').innerHTML;
        const filename = `202304_${num}.zip`;
        saveAs(content, filename);
      });
    });
  });
}

 

 위의 코드에서는 zip.file() 메서드를 호출하는 부분을 Promise 객체에 담아서 병렬로 처리합니다. 그리고 Promise.all() 메서드를 사용하여 모든 Promise 객체가 완료되었을 때 zip.generateAsync() 메서드를 호출합니다. 이렇게 하면 모든 이미지가 압축 파일로 저장될 때까지 기다려주기 때문에 오류가 발생할 가능성이 낮아집니다.

 

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트: 시간을 초단위로 바꾸는 법  (0) 2023.04.25
js 소수점처리 .tofixed()  (0) 2022.08.15
프로토타입체인  (0) 2022.07.25
클래스와 인스턴스  (0) 2022.07.22
객체지향 프로그래밍  (0) 2022.07.22