Vue verwendet Plug-Ins, um Bilder proportional zuzuschneiden

Daten(){
 zurückkehren {
     formData:{
        currentBannerImg:""
     },
     istShowCropper:false,
 }
}
<el-hochladen
      Klasse = "Avatar-Uploader"
      Listentyp = "Bildkarte"
      Aktion=""
      akzeptieren=".jpg, .jpeg, .png"
      :mit-Anmeldeinformationen="true"
      :on-change="DateiÄnderungsBanner"
      :auto-upload="false"
      :Dateiliste anzeigen="false"
    >
    <div Klasse="imgBoX">
        <img class="bannerImg" v-if="formData.currentBannerImg" title="Zum Ändern klicken" :src="formData.currentBannerImg" alt="" />
        <i class="el-icon-delete delImg" v-if="formData.currentBannerImg" title="Löschen"></i>
        <i v-if="!formData.currentBannerImg" slot="default" class="el-icon-plus"></i>
      </div>
      <div slot="tip" class="el-upload__tip">Es können nur die Formate JPG, JPEG und PNG hochgeladen werden und die einzelne Datei darf nicht größer als 10 MB sein</div>
</el-upload>

//Laden Sie das Bild hoch und schneiden Sie es nach Erfolg zu. async fileChangeBanner(file, fileList) {
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const fileTypeArr = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"];
      wenn (fileTypeArr.indexOf(fileType) < 0) {
        this.$alert("Bitte laden Sie Bilder im JPG-, JPEG- oder PNG-Format hoch!", "Systemaufforderung", {
          confirmButtonText: "Bestätigen"
        });
        fileList.splice(fileList.length - 1);
        zurückkehren;
      }
      // Größenbeschränkung const isLt2M = file.size / 1024 / 1024 < this.$FileSize;
      wenn (!isLt2M) {
        this.$alert(`Die Größe der hochgeladenen Datei darf ${this.$FileSize}MB nicht überschreiten!`, "Systemaufforderung", {
          confirmButtonText: "Bestätigen"
        });
        fileList.splice(fileList.length - 1);
        zurückkehren;
      }
      // Den Zuschneideteil hinzufügen this.isShowCropper = true;
      dies.$nextTick(() => {
        dies.$refs.vueCropperDialog.open(Datei);
      });
    },

<vueCropperDialog @cutImgEnter="cutImgEnter" v-if="isShowCropper" ref="vueCropperDialog"></vueCropperDialog>

<!-- -->
<Vorlage>
  <!-- vueCropper Implementierung zum Zuschneiden von Bildern -->
  <el-dialog title="Bild zuschneiden" :visible.sync="dialogVisible" an Body anhängen>
    <div Klasse="cropper-content">
      <div Klasse="cropper" Stil="text-align:center">
        <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"
          :fest="Option.fest"
          :festeNummer="Option.festeNummer"
          :centerBox="Option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="Option.fixedBox"
        ></vueCropper>
      </div>
    </div>
    <div slot="Fußzeile" class="dialog-footer btnBox">
      <div>
        <el-button icon="el-icon-refresh-left" @click="turnLeftOrRight('left')">Nach links drehen</el-button>
        <el-button icon="el-icon-refresh-right" @click="turnLeftOrRight('right')">Nach rechts drehen</el-button>
      </div>
      <div>
        <el-button @click="dialogVisible = false">Abbrechen</el-button>
        <el-button type="primary" @click="finish" :loading="loading">Bestätigen</el-button>
      </div>
    </div>
  </el-dialog>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Dateiinfo:"",
      dialogVisible: false,
      // Grundlegende Konfigurationsoption für die Zuschneidekomponente
      Option: {
        :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
      picsList: [], //Auf der Seite angezeigtes Array // Verhindert das Laden doppelter Übermittlungen: false
    };
  },
  Methoden: {
    öffnen(Datei) {
      this.fileinfo = Datei;
      diese.option.img = datei.url;
      this.dialogVisible = true;
    },
    blobToFile(derBlob, Datei) {
      const files = neues Fenster.Datei([derBlob], Datei.Name, { Typ: derBlob.Typ });
      Dateien zurückgeben;
    },
    //Linksdrehung turnLeftOrRight(Typ) {
      wenn (Typ == "links") {
        dies.$refs.cropper.rotateLeft();
      } anders {
        dies.$refs.cropper.rotateRight();
      }
    },
    // Klicken Sie hier, um zuzuschneiden. In diesem Schritt wird die verarbeitete Adresse abgerufen. finish() {
      dies.$refs.cropper.getCropBlob((data) => {
        dies.laden = wahr;
        const changeFile = this.blobToFile(Daten, this.fileinfo);
        const fileUrl = Fenster.URL.createObjectURL(Daten);
        //Rückruf nach erfolgreichem Ausschneiden this.$emit("cutImgEnter", changeFile, fielUrl);
        dies.laden = falsch;
        this.dialogVisible = falsch;
      });
    }
  }
};
</Skript>
<style lang="scss" scoped>
// Screenshot.cropper-content {
  .cropper {
    Breite: automatisch;
    Höhe: 300px;
  }
}
.btnBox {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
}
</Stil>