clipboard image copy&paste

by cheongjin kim

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button @click="reset">초기화</button>
  <div class="container"
    :class="isFocus?'active':''"
    @click="switchFocus">
  
  </div>
  <div v-for="image in imageList" class="img-wrap">
    <img :src="image">
  </div>
</div>

CSS

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #B5B5B5;
  border-radius: 5px;
}

.container.active {
  background-color: #DDDDDD;
  border: 1px solid #B5B5B5;
}

.img-wrap {
  position: relative;
  width: 300px;
}

.img-wrap img {
  position: absolute;
  width: 100%; 
}

JavaScript

function toggleClass(element, className) {
	var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
  if (check.test(element.className)) {
  	element.className = element.className.replace(check, " ").trim();
  } else {
  	element.className += " " + className;
  }
}

new Vue({
	el: '#app',
  data() {
  	return {
    	imageList: [],
      isFocus: false
    }
  },
  created() {
		var self = this;
              
		window.addEventListener('paste', function(event) {
    
    	if(!self.isFocus) {
      	return;
      }
      
      var items = event.clipboardData.items;
      
      if (items) {
        paste_mode = 'auto';
        
        console.log(items.length);

        for (var i = 0; i < items.length; i++) {
					console.log(items[i].type);
          if (items[i].type.indexOf("image") !== -1) {

            var blob = items[i].getAsFile();
            var URLObj = window.URL || window.webkitURL;
            var source = URLObj.createObjectURL(blob);
            
            self.imageList.push(source)

          }
        }
        event.preventDefault();
      }
		}); 	
  },
  methods: {
  	reset() {
    	this.isFocus = false;
      this.image = '';
    },
  	switchFocus() {
			this.isFocus = !this.isFocus;
    }
  }
})