Vue 드래그 캡 처 기능 의 간단 한 실현 방법

마 우 스 를 드래그 하여 페이지 캡 처(영역 드래그 캡 처 도 지정 가능)
html 2 canvas,vue-cropper 설치

npm i html2canvas --save          //           
npm i vue-cropper -S             //       

2.main.js 에 vue-cropper 구성 요 소 를 등록 합 니 다.

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

3.페이지 에 html 2 canvas 도입

  import html2canvas from "html2canvas"
  export default{
  }

코드 분해
1.지 정 된 영역 을 그림 으로 전환

this.$nextTick(()=>{
   html2canvas(document.body,{}).then(canvas => {    
     let dataURL = canvas.toDataURL("image/png");
     this.uploadImg = dataURL
     this.loading = true
   });
 })

body 전체 페이지 를 그림 으로 바 꾸 고 base 64 형식 데 이 터 를 얻 으 며 다른 지역 에 서 는 class 나 id 를 직접 가 져 옵 니 다.
2.생 성 된 그림 을 드래그 하여 캡 처

<template>
	<div class="pop_alert" v-if="show">
	   <vueCropper
	      @mouseenter.native="enter"
	      @mouseleave.native="leave"
	      ref="cropper"
	      :img="uploadImg"
	      :outputSize="option.size"
	      :outputType="option.outputType"
	      :info="true"
	      :full="option.full"
	      :canMove="option.canMove"
	      :canMoveBox="option.canMoveBox"
	      :original="option.original"
	      :autoCrop="option.autoCrop"
	      :fixed="option.fixed"
	      :fixedNumber="option.fixedNumber"
	      :centerBox="option.centerBox"
	      :infoTrue="option.infoTrue"
	      :fixedBox="option.fixedBox"
	      style="background-image:none"
	    ></vueCropper>
	    <div class="btn_box">
	    	<div @click="save">    </div>
	   	    <div @click="close">  </div>
	    </div>
	 </div>
 </template>
<script>
 export default{
   data(){
       option: {
          info: true, //         
          outputSize: 0.8, //          
          outputType: "jpeg", //          
          canScale: false, //           
          autoCrop: false, //          
          fixedBox: false, //              
          fixed: false, //              
          fixedNumber: [7, 5], //         
          full: true, //            
          canMove: false, //        
          canMoveBox: true, //        
          original: false, //             
          centerBox: false, //              
          infoTrue: true // true             false           
        },
        uploadImg:"",
        show: false
   },
   methods:{
     enter() {
       if (this.uploadImg == "") {
         return;
       }
       this.$refs.cropper.startCrop(); //    
     },
     leave() {
       this.$refs.cropper.stopCrop();//    
     },
     save() {        //    
        this.$refs.cropper.getCropData((data) => {      //     base64    
          console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //     Blob    
        //   this.cutImg = data;
        // });
      },
      close(){        //  
        this.show = false
      }
   }
 }
 </script>

5.모든 코드

<template>
   <div>
     <div @click="tailoring">  </div>
	<!--           pop_alert        -->
	
     <div class="pop_alert" v-if="show">
	   <vueCropper
	      @mouseenter.native="enter"
	      @mouseleave.native="leave"
	      ref="cropper"
	      :img="uploadImg"
	      :outputSize="option.size"
	      :outputType="option.outputType"
	      :info="true"
	      :full="option.full"
	      :canMove="option.canMove"
	      :canMoveBox="option.canMoveBox"
	      :original="option.original"
	      :autoCrop="option.autoCrop"
	      :fixed="option.fixed"
	      :fixedNumber="option.fixedNumber"
	      :centerBox="option.centerBox"
	      :infoTrue="option.infoTrue"
	      :fixedBox="option.fixedBox"
	      style="background-image:none"
	    ></vueCropper>
	    <div class="btn_box">
	    	<div @click="save">    </div>
	   	    <div @click="close">  </div>
	    </div>
	 </div>
   </div>
</template>
<script>
import html2canvas from "html2canvas"
 export default{
  data(){
   return{
     option: {
          info: true, //         
          outputSize: 0.8, //          
          outputType: "jpeg", //          
          canScale: false, //           
          autoCrop: false, //          
          fixedBox: false, //              
          fixed: false, //              
          fixedNumber: [7, 5], //         
          full: true, //            
          canMove: false, //        
          canMoveBox: true, //        
          original: false, //             
          centerBox: false, //              
          infoTrue: true // true             false           
        },
        uploadImg:"",
        show: false
   }
  },
  methods:{
    tailoring(){            //  
      this.$nextTick(()=>{
           html2canvas(document.body,{}).then(canvas => {
             let dataURL = canvas.toDataURL("image/png");
             this.uploadImg = dataURL
             this.show = true
           });
       })
    },
    enter() {
       if (this.uploadImg == "") {
         return;
       }
       this.$refs.cropper.startCrop(); //    
     },
     leave() {
       this.$refs.cropper.stopCrop();//    
     },
     save() {        //    
        this.$refs.cropper.getCropData((data) => {      //     base64    
          console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //     Blob    
        //   this.cutImg = data;
        // });
      },
      close(){        //  
        this.show = false
      }
   }
 }
</script>
<style>
	.pop_alert{
      width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  border: 1px dashed red;
	  background-color: #000000;
    }
    .btn_box{
        position: absolute;
	    top: 0;
	    color: red;
	    right: 0;
	    font-size: 30px;
	    display: flex;
        align-items: center;
	    z-index: 6666;
    }
</style>

효과 도


총결산
Vue 드래그 캡 처 기능 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue 드래그 캡 처 기능 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!