<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" type="text/javascript" charset="utf-8"></script>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js" type="text/javascript" charset="utf-8"></script>

<div id="app">

  <div class="head">

    <h1>绫绵院-照片添加水印工具</h1>

    <p v-if="tips === 'ok'">水印添加完成，<span @click="download">下载</span></p>

    <p v-text="tips" v-else></p>

    <span class="renovate" @click="reload">刷新</span>

  </div>

  <div class="box" @drop="dropImg " @dragover="dragover">

    <div class="img" :id="'capture'+index" v-for="(item, index) in imageUrl" :key="index">

      <img :src="item">

      <div class="watermark"></div>

    </div>

    <b>拖拽图片到这里（支持多张）</b>

  </div>

</div>

 <script type="text/javascript" charset="utf-8">

   let vue = new Vue({

      el: '#app',

      data: {

        tips: '',

        imageUrl: [],

        fileList: []

      },

      methods: {

        // 阻止默认事件

        dragover(e) {

          e.stopPropagation();

          e.preventDefault();

          e.dataTransfer.dropEffect = 'copy';

        },

        // 拖拽

        dropImg(e) {

          this.tips = '开始添加水印'

          e.stopPropagation();

          e.preventDefault();

          this.fileList.push(...e.dataTransfer.files)

          this.fileList.forEach((item, index) => {

            let reader = new FileReader()

            let imgResult = ''

            reader.readAsDataURL(item)

            reader.onloadend = () => {

              this.imageUrl.push(reader.result)

              if (this.imageUrl.length >= this.fileList.length) {

                this.tips = 'ok'

              } else {

                this.tips = `正在添加水印(${this.imageUrl.length}/${this.fileList.length})`

              }

            }

          })

        },

        // 刷新

        reload() {

          window.location.reload();

        },

        // 点击下载

        download() {

          this.tips = '开始下载，请稍等'

          setTimeout(() => {

            this.fileList.forEach((item, index) => {

              this.downloadImg(item, index)

            })

          }, 10)

        },

        // 下载

        downloadImg(item, index) {

          html2canvas(document.querySelector("#capture" + index), {

             useCORS: true,//Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy

                       allowTaint: false,//Whether to allow cross-origin images to taint the canvas

          }).then(canvas => {

            var url = canvas.toDataURL(item.type);

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

            var event = new MouseEvent("click", {

              bubbles: true,

              cancelable: true,

              view: window

            });

            a.download = item.name;

            a.href = url;

            a.dispatchEvent(event);

            if (index === this.fileList.length - 1) {

              this.tips = '下载完成，请刷新页面'

            }

          })

        }

      }

    })

</script>