1. html-to-image 라이브러리로 이미지를 만든 후
2.JSZip 라이브러리를 사용하여 파일을 압축한 다음 다운로드 할 수 있습니다.
- 터미널에서 다음 명령어를 실행하여 JSZip 라이브러리를 설치합니다.
- npm install jszip
- saveImage() 함수에서 JSZip을 import 합니다. import JSZip from 'jszip';
JSZip 라이브러리를 CDN으로 가져오는 방법
- <head> ..... <script src="https://cdn.jsdelivr.net/npm/jszip@3.3.0/dist/jszip.min.js"></script> </head>
- 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 |
