Detaillierte Erklärung der Webseiten-Screenshot-Funktion in Vue

 importiere Vue von „vue“;
 importiere { VueCropper } von "vue-cropper";

 Vue.use(VueCropper)

 <div>
            <span class="spanStyle">Produktbilder:</span>
            <!--Das gesamte Bildvorschau-Div-->
            <div Stil="Anzeige:flex;padding-left: 300px;">
              <div Klasse = "info-item" Stil = "flex:1;margin-left:-160px;margin-top: -25px">
                <label class="btn btn-orange theme-bg-gray theme-white w90" for="uploads" style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;" >Bild auswählen</label>
                <Eingabetyp="Datei" id="Uploads" :Wert="Bilddatei" Stil="Position:absolut; Clip:Rechteck(0 0 0 0);" akzeptieren="Bild/png, Bild/jpeg, Bild/gif, Bild/jpg" @change="uploadImg($event, 1)">
                <div Klasse = "Linie" Stil = "Rand links: -280px;Rand oben: 85px;">
                  <div Klasse = "cropper-content" Stil = "margin-top: -60px;margin-left: 160px;">
                    <div Klasse="cropper">
                      <vueCropper
                        ref="Beschneider"
                        :img="Option.img"
                        :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"
                        :autoCropWidth="Option.autoCropWidth"
                        :autoCropHeight="Option.autoCropHeight"
                        :fixedBox="Option.fixedBox"
                        @realTime="Echtzeit"
                      ></vueCropper>
                    </div>
                    <!--Das aufgenommene Bild wird in div angezeigt-->
                    <div Stil="Margin-left:700px;">
                      <div Klasse = "show-preview" :style = "{'width': '300px', 'height':'150px', 'overflow': 'hidden', 'margin-left': '-650px'}">
                        <div :style="Vorschau.div" >
                          <img :src="vorschau.url" :style="vorschau.img">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

Daten (){
	zurückkehren {
		 Kopfbild:'',
                //Bild ausschneiden und Mist hochladen: false,
                Vorschau: {},
                Option: {
                    img: '',
                    outputSize:1, //Bildqualität nach dem Schneiden (0,1-1)
                    full: false, // Originalbildmaßstab ausgeben Screenshot Requisiten Name full
                    Ausgabetyp: "png",
                    kannVerschieben: wahr,
                    Original: falsch,
                    canMoveBox: wahr,
                    autoCrop: wahr,
                    autoCropWidth: 300,
                    autoCropHeight: 150,
                    fixedBox: wahr
                },
                Dateiname:'', //Lokale Dateiadresse downImg: '#',
                imgDatei:'',
                uploadImgRelaPath:'', //Die Adresse des hochgeladenen Bildes (ohne den Domänennamen des Servers)
	}
},
Methoden:{
	// Echtzeitvorschaufunktion realTime(data) {
       console.log('Echtzeit')
       this.previews = Daten
   },
   //Wähle ein lokales Bild aus uploadImg(e, num) {
       console.log('uploadImg');
       var _this = dies;
       //Bild hochladen var file = e.target.files[0]
       _this.fileName = Dateiname;
       wenn (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.ziel.wert)) {
           alert('Der Bildtyp muss einer der folgenden sein: .gif, jpeg, jpg, png, bmp')
           return false
       }
       var reader = neuer FileReader();
       reader.onload = (e) => {
           Daten lassen;
           wenn (Typ von e.Ziel.Ergebnis === 'Objekt') {
               // Array-Puffer in Blob konvertieren. Wenn es Base64 ist, ist es nicht erforderlich. data = window.URL.createObjectURL(new Blob([e.target.result]))
           }
           anders {
               Daten = e.Ziel.Ergebnis
           }
           wenn (Zahl === 1) {
               _this.option.img = Daten
           } sonst wenn (Zahl === 2) {
               _this.example2.img = Daten
           }
       }
       // // In Blob konvertieren
       Leser.readAsArrayBuffer(Datei);
   }
}
 

Produkt hinzufügen () {
dies.$refs.cropper.getCropBlob((data) => {
	  //Diese Daten sind das Blob-Bild, das wir abgefangen haben. let formData = new FormData();
	  //Dateinamen abrufen, da dieser bei der Dateikonvertierung nicht verwendet werden kann. Sie müssen also eine Variable verwenden, um var name=this.fileName zuzuweisen.
       var Datei = neue Datei ([Daten], Name, {Typ: Daten.Typ, letzte Änderung: Datum.jetzt()});
       formData.append("Dateien",Datei)
       neues Versprechen((lösen, ablehnen) => {
           productAdd(formData).then(response => {
               wenn (Antwortcode == 20000) {
                   Dialog.alarm({
                       Titel: 'Tipps',
                       Meldung: ,Erfolgreich gespeichert!‘ '
                   }).then(() => {
                       dies.zurück('/produktInfo')
                   });

               }
           }).fangen(Fehler => {
               ablehnen(Fehler)
           })
       })
   })
}