<template>

    <div class='demo'>

    <div style="display: none;">

        <img src="../../assets/logo.png"  class="yaojianbaogao" width="50"  data-ordercode="霍痕"  data-title="霍痕1" data-alt="霍痕1.png" >

        <img src="../../assets/logo.png"  class="yaojianbaogao" width="50"  data-ordercode="霍痕"  data-title="霍痕2" data-alt="霍痕2.png" >

        <img src="../../assets/logo.png"  class="yaojianbaogao" width="50"  data-ordercode="霍痕"  data-title="霍痕3" data-alt="霍痕3.png" >

    </div>

        <a href="javascript:;" @click="downloadzip()">打包下载</a>

    </div>

</template>

<script>

import JSZip from 'jszip'

const FileSaver = require('file-saver')

export default {

  data(){

    return{

    }

  },

  methods:{

    downloadzip(){

      var imgs = document.getElementsByClassName('yaojianbaogao')

      console.log(imgs)

      var zip = new JSZip();

      var file_name = '';

      Array.from(imgs).forEach(item => {

        file_name  = item.getAttribute('data-ordercode')+'.zip';

        var img = zip.folder(item.getAttribute('data-title'));

        var imgdata = this.getBase64Image(item.getAttribute('src'));

        var img_arr = imgdata.split(',');

        img.file(item.getAttribute('data-alt'),img_arr[1],{base64: true});

      });

      zip.generateAsync({type:"blob"}).then(function(content) {

          FileSaver.saveAs(content, file_name);

      });

    },

    getBase64Image(images){

      var img = new Image();

      img.src = images;

      var canvas = document.createElement("canvas");

      canvas.width = img.width;

      canvas.height = img.height;

      var ctx = canvas.getContext("2d");

      ctx.drawImage(img, 0, 0, img.width, img.height);

      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

      var dataURL = canvas.toDataURL();

      return dataURL;

    }

  }

}

</script>