A simple way to implement Vue's drag screenshot function

npm i html2canvas --save //Used to convert the specified area into an image npm i vue-cropper -S //Crop the image

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

  import html2canvas from "html2canvas"
  export default{
  }

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

<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">Confirm screenshot</div>
	   	    <div @click="close">Cancel</div>
	    </div>
	 </div>
 </template>
<script>
 export default{
   data(){
       option: {
          info: true, // size information of cropping boxoutputSize: 0.8, // quality of cropped imageoutputType: "jpeg", // format of cropped imagecanScale: false, // whether image allows scroll wheel scalingautoCrop: false, // whether to generate screenshot box by defaultfixedBox: false, // fixed screenshot box size cannot be changedfixed: false, // whether to enable fixed aspect ratio of screenshot boxfixedNumber: [7, 5], // aspect ratio of screenshot boxfull: true, // whether to output screenshot in original aspect ratiocanMove: false, // can original image be movedcanMoveBox: true, // whether screenshot box can be draggedoriginal: false, // uploaded image is rendered in original aspect ratiocenterBox: false, // whether screenshot box is limited to imageinfoTrue: true // true to show actual output image width and heightfalse to show screenshot box width and height},
        uploadImg:"",
        show:false
   },
   methods:{
     enter() {
       if (this.uploadImg == "") {
         return;
       }
       this.$refs.cropper.startCrop(); //Start cropping},
     leave() {
       this.$refs.cropper.stopCrop();//Stop cropping},
     save() { //Confirm the screenshot this.$refs.cropper.getCropData((data) => { //Get the screenshot's base64 format data console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //Get the Blob format data of the screenshot// this.cutImg = data;
        // });
      },
      close(){ //Cancel this.show = false
      }
   }
 }
 </script>

<template>
   <div>
     <div @click="tailoring">Cut</div>
	<!--Continue to write other content of the page. Pop_alert can be encapsulated into a component for use-->
	
     <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">Confirm screenshot</div>
	   	    <div @click="close">Cancel</div>
	    </div>
	 </div>
   </div>
</template>
<script>
import html2canvas from "html2canvas"
 export default{
  data(){
   return {
     option: {
          info: true, // size information of cropping boxoutputSize: 0.8, // quality of cropped imageoutputType: "jpeg", // format of cropped imagecanScale: false, // whether image allows scroll wheel scalingautoCrop: false, // whether to generate screenshot box by defaultfixedBox: false, // fixed screenshot box size cannot be changedfixed: false, // whether to enable fixed aspect ratio of screenshot boxfixedNumber: [7, 5], // aspect ratio of screenshot boxfull: true, // whether to output screenshot in original aspect ratiocanMove: false, // can original image be movedcanMoveBox: true, // whether screenshot box can be draggedoriginal: false, // uploaded image is rendered in original aspect ratiocenterBox: false, // whether screenshot box is limited to imageinfoTrue: true // true to show actual output image width and heightfalse to show screenshot box width and height},
        uploadImg:"",
        show:false
   }
  },
  methods:{
    tailoring(){ //Cut 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(); //Start cropping},
     leave() {
       this.$refs.cropper.stopCrop();//Stop cropping},
     save() { //Confirm the screenshot this.$refs.cropper.getCropData((data) => { //Get the screenshot's base64 format data console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //Get the Blob format data of the screenshot// this.cutImg = data;
        // });
      },
      close(){ //Cancel 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>