유틸리티 - JSZip

JSZip

by jinam yu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/3.1.0/async.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <form class="p-4">
    <div class="form-group">
      <label>아래 2개의 이미지를 압축하여 다운로드 합니다.</label>
      <div class="row">
        <div class="col-6" v-for="(item, index) in images" :key="index">
          <img :src="item.data" alt="" />
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-primary" @click="click">다운로드</button>
  </form>
</div>

CSS

html, body {
  background-color: #f8f9fa;
}
img {
  width: 100%;
}

Vue

new Vue({
    el: "#app",
    data: {
        urls: [
            "https://loremflickr.com/320/240/dog",
            "https://loremflickr.com/320/240/cat"
        ],
        images: [],
    },
    computed: {},
    methods: {
        load() {
            const task = this.urls.map(v => next => {
                const image = new Image();
                image.crossOrigin = '';
                image.onload = function(img) {
                    let canvas = document.createElement("canvas");
                    let context = canvas.getContext('2d');
                    context.drawImage(this, 0, 0, this.width, this.height);
                    next(null, {
                        filename: v.split('/').pop(),
                        canvas,
                        data: canvas.toDataURL(),
                    });
                }
                image.src = v;
            });
            window.async.series(task, (err, res) => {
                this.images = res;
            });
        },
        click() {
            const zip = new window.JSZip();
            const img = zip.folder("images");
            const task = this.images.map(v => next => {
                v.canvas.toBlob((blob) => {
                    next(null, {
                        filename: v.filename,
                        data: blob,
                    });
                }, 'image/jpeg', 80);
            });
            window.async.series(task, (err, res) => {
                res.forEach(v => {
                    img.file(v.filename + '.jpg', v.data);
                })
                zip.generateAsync({ type: "base64"})
                    .then(function(base64) {
                        const element = document.createElement('a');
                        element.setAttribute('href', "data:application/zip;base64," + base64);
                        element.setAttribute('download', "sample.zip");

                        element.style.display = 'none';
                       ...