Eine einfache Möglichkeit, die Drag-Screenshot-Funktion von Vue zu implementieren

npm i html2canvas --save //Wird verwendet, um den angegebenen Bereich in ein Bild umzuwandeln npm i vue-cropper -S //Bild zuschneiden

Importiere VueCropper von „vue-cropper“
Vue.use(VueCropper)

  importiere html2canvas von "html2canvas"
  Standard exportieren{
  }

dies.$nextTick(()=>{
   html2canvas(Dokument.Body,{}).dann(Canvas => {    
     let dataURL = canvas.toDataURL("bild/png");
     this.uploadImg = Daten-URL
     dies.laden = wahr
   });
 })

<Vorlage>
	<div Klasse="Pop_Alarm" v-if="Anzeigen">
	   <vueCropper
	      @mouseenter.native="Eingeben"
	      @mouseleave.native="verlassen"
	      ref="Beschneider"
	      :img="Bild hochladen"
	      :Ausgabegröße="Option.Größe"
	      :Ausgabetyp="Option.Ausgabetyp"
	      :info="wahr"
	      :full="Option.full"
	      :kannVerschieben="Option.kannVerschieben"
	      :kannBox verschieben="Option.kannBox verschieben"
	      :original="Option.original"
	      :autoCrop="Option.autoCrop"
	      :fest="Option.fest"
	      :festeNummer="Option.festeNummer"
	      :centerBox="Option.centerBox"
	      :infoTrue="option.infoTrue"
	      :fixedBox="Option.fixedBox"
	      Stil="Hintergrundbild:keines"
	    ></vueCropper>
	    <div Klasse="btn_box">
	    	<div @click="save">Screenshot bestätigen</div>
	   	    <div @click="close">Abbrechen</div>
	    </div>
	 </div>
 </Vorlage>
<Skript>
 Standard exportieren{
   Daten(){
       Option: {
          info: true, // Größeninformationen zum ZuschneidefeldoutputSize: 0.8, // Qualität des zugeschnittenen BildesoutputType: "jpeg", // Format des zugeschnittenen BildescanScale: false, // ob das Bild eine Skalierung mit dem Scrollrad zulässtautoCrop: false, // ob standardmäßig ein Screenshot-Feld generiert werden sollfixedBox: false, // feste Größe des Screenshot-Felds kann nicht geändert werdenfixed: false, // ob ein festes Seitenverhältnis des Screenshot-Felds aktiviert werden sollfixedNumber: [7, 5], // Seitenverhältnis des Screenshot-Feldsfull: true, // ob der Screenshot im Original-Seitenverhältnis ausgegeben werden sollcanMove: false, // kann das Originalbild verschoben werdencanMoveBox: true, // ob das Screenshot-Feld gezogen werden kannoriginal: false, // hochgeladenes Bild wird im Original-Seitenverhältnis gerendertcenterBox: false, // ob das Screenshot-Feld auf das Bild beschränkt istinfoTrue: true // true, um die tatsächliche Breite und Höhe des Ausgabebilds anzuzeigenfalse, um die Breite und Höhe des Screenshot-Felds anzuzeigen},
        Bild hochladen:"",
        anzeigen:false
   },
   Methoden:{
     eingeben() {
       wenn (this.uploadImg == "") {
         zurückkehren;
       }
       this.$refs.cropper.startCrop(); //Mit dem Zuschneiden beginnen},
     verlassen() {
       this.$refs.cropper.stopCrop();//Zuschneiden beenden},
     save() { //Screenshot bestätigen this.$refs.cropper.getCropData((data) => { //Daten des Screenshots im Base64-Format abrufen console.log(data)
          this.show = falsch
        })
        // this.$refs.cropper.getCropBlob(data => { //Blob-Formatdaten des Screenshots abrufen// this.cutImg = data;
        // });
      },
      close(){ //Abbrechen this.show = false
      }
   }
 }
 </Skript>

<Vorlage>
   <div>
     <div @click="tailoring">Schnitt</div>
	<!--Schreiben Sie weiterhin den restlichen Inhalt der Seite. Pop_alert kann zur Verwendung in eine Komponente gekapselt werden-->
	
     <div Klasse="Pop_Alarm" v-if="Anzeigen">
	   <vueCropper
	      @mouseenter.native="Eingeben"
	      @mouseleave.native="verlassen"
	      ref="Beschneider"
	      :img="Bild hochladen"
	      :Ausgabegröße="Option.Größe"
	      :Ausgabetyp="Option.Ausgabetyp"
	      :info="wahr"
	      :full="Option.full"
	      :kannVerschieben="Option.kannVerschieben"
	      :kannBox verschieben="Option.kannBox verschieben"
	      :original="Option.original"
	      :autoCrop="Option.autoCrop"
	      :fest="Option.fest"
	      :festeNummer="Option.festeNummer"
	      :centerBox="Option.centerBox"
	      :infoTrue="option.infoTrue"
	      :fixedBox="Option.fixedBox"
	      Stil="Hintergrundbild:keines"
	    ></vueCropper>
	    <div Klasse="btn_box">
	    	<div @click="save">Screenshot bestätigen</div>
	   	    <div @click="close">Abbrechen</div>
	    </div>
	 </div>
   </div>
</Vorlage>
<Skript>
importiere html2canvas von "html2canvas"
 Standard exportieren{
  Daten(){
   zurückkehren {
     Option: {
          info: true, // Größeninformationen zum ZuschneidefeldoutputSize: 0.8, // Qualität des zugeschnittenen BildesoutputType: "jpeg", // Format des zugeschnittenen BildescanScale: false, // ob das Bild eine Skalierung mit dem Scrollrad zulässtautoCrop: false, // ob standardmäßig ein Screenshot-Feld generiert werden sollfixedBox: false, // feste Größe des Screenshot-Felds kann nicht geändert werdenfixed: false, // ob ein festes Seitenverhältnis des Screenshot-Felds aktiviert werden sollfixedNumber: [7, 5], // Seitenverhältnis des Screenshot-Feldsfull: true, // ob der Screenshot im Original-Seitenverhältnis ausgegeben werden sollcanMove: false, // kann das Originalbild verschoben werdencanMoveBox: true, // ob das Screenshot-Feld gezogen werden kannoriginal: false, // hochgeladenes Bild wird im Original-Seitenverhältnis gerendertcenterBox: false, // ob das Screenshot-Feld auf das Bild beschränkt istinfoTrue: true // true, um die tatsächliche Breite und Höhe des Ausgabebilds anzuzeigenfalse, um die Breite und Höhe des Screenshot-Felds anzuzeigen},
        Bild hochladen:"",
        anzeigen:false
   }
  },
  Methoden:{
    Schneidern(){ //Schneide dies.$nextTick(()=>{
           html2canvas(Dokument.Body,{}).dann(Canvas => {
             let dataURL = canvas.toDataURL("bild/png");
             this.uploadImg = Daten-URL
             dies.show = wahr
           });
       })
    },
    eingeben() {
       wenn (this.uploadImg == "") {
         zurückkehren;
       }
       this.$refs.cropper.startCrop(); //Mit dem Zuschneiden beginnen},
     verlassen() {
       this.$refs.cropper.stopCrop();//Zuschneiden beenden},
     save() { //Screenshot bestätigen this.$refs.cropper.getCropData((data) => { //Daten des Screenshots im Base64-Format abrufen console.log(data)
          this.show = falsch
        })
        // this.$refs.cropper.getCropBlob(data => { //Blob-Formatdaten des Screenshots abrufen// this.cutImg = data;
        // });
      },
      close(){ //Abbrechen this.show = false
      }
   }
 }
</Skript>
<Stil>
	.pop_alert{
      Breite: 100 %;
	  Höhe: 100%;
	  Position: absolut;
	  oben: 0;
	  links: 0;
	  Rand: 1px gestrichelt rot;
	  Hintergrundfarbe: #000000;
    }
    .btn_box{
        Position: absolut;
	    oben: 0;
	    Farbe: rot;
	    rechts: 0;
	    Schriftgröße: 30px;
	    Anzeige: Flex;
        Elemente ausrichten: zentrieren;
	    Z-Index: 6666;
    }
</Stil>