So wählen Sie einen Avatar aus und schneiden ihn in Vue3 zu

Endgültiger Effekt

Installieren Sie die VueCropper-Komponente

yarn add vue-cropper@next

Der oben genannte Installationswert gilt für Vue3 oder Sie möchten andere Methoden als Referenz verwenden, besuchen Sie bitte die offizielle npm-Adresse: offizielles Tutorial.

Das Referenzieren in Komponenten

ist auch sehr einfach. Sie müssen nur die entsprechende Komponente und ihre Stildatei einführen. Ich referenziere sie hier nur

<script>
import { userInfoByRequest } from &#39;../js/api&#39;
import { VueCropper } from &#39;vue-cropper&#39;
import &#39;vue-cropper/dist/index.css&#39;
export default {
    components: {
        VueCropper
    },
}

und verwende dann <vue-cropper> Um es zu verwenden, beachten Sie bitte, dass es von einem Außenbehälter umhüllt werden muss und dass eine bestimmte Höhe für den Außenbehälter festgelegt werden muss.

<el-dialog title="头像设置" v-model="showSetAvatarDialog">
            <div class="cropperBox">
                <vue-cropper ref="cropper" :canMoveBox="false" :img="avatarBase64" :fixedBox="true" :autoCrop="true"
                    autoCropWidth="200" autoCropHeight="200" outputType="png"></vue-cropper>
            </div>
            <div class="optionBtn">
                <el-button @click="rotateLeft"><i class="fa fa-rotate-left"></i>左旋转</el-button>
                <el-button @click="rotateRight"><i class="fa fa-rotate-right"></i>右旋转</el-button>
                <el-button @click="getPickAvatar" type="primary"><i class="fa fa-save"></i>保存</el-button>
            </div>
</el-dialog>

Ich habe es in ein Dialog-Popup-Feld eingefügt. Dieses Popup-Fenster erscheint, nachdem das Bild ausgewählt wurde.

Einige seiner Eigenschaften finden Sie unter: Detaillierte Beschreibung im offiziellen Tutorial:

• canMoveBox: Kann die Screenshot-Box verschoben werden? Die Standardeinstellung ist „Ja“. Ich möchte, dass das Bild verschoben wird. Der Screenshot-Rahmen wird nicht verschoben.

• img: Bildquelle, die eine Bild-URL oder Base64-Daten sein kann.

• fixedBox: Es ist nicht möglich, die Größe des Screenshot-Felds zu ändern. Dies ist standardmäßig zulässig. Hier stelle ich es auf „true“, da ich ein Quadrat mit fester Länge und Breite möchte.

• autoCrop: Ob standardmäßig eine Screenshot-Box generiert werden soll, hier auf „true“ setzen

• autoCropWidth: Standardbreite der Screenshot-Box automatisch generieren

• autoCropHeight: Standardhöhe der Screenshot-Box automatisch generieren

• outputType: Ausgabebildformat, hier stelle ich es auf das PNG-Format ein.

Bildinhalt abrufen Informationen zu den integrierten Methoden finden Sie im offiziellen Tutorial.

Benutzerdefinierte Bilder hochladen

Jetzt müssen wir ein Bild auswählen und es dann über das Frontend in Base64 konvertieren und die Screenshot-Komponente zur Auswahl aufrufen Typ ist Datei, aber der native Stil ist nicht das, was wir wollen. In der Demonstration klicke ich auf ein kleines Kamerasymbol und wähle das Bild aus. Der Implementierungsprozess ist wie folgt:

Fügen Sie zuerst das versteckte Attribut hinzu, um es auszublenden

1. Wenn dann über js auf das Kamerasymbol geklickt wird, implementieren Sie das Ereignis des Klickens auf die Eingabe.

2. Definieren Sie das Änderungsereignis im Eingabe-Tag, führen Sie die Logik zum Konvertieren des Bildes in Base64 aus.

3. Legen Sie dann die konvertierten Daten fest zur globalen Variablen

4. Vollständige Code-Implementierung
   UserCenter.vue

//获取base64格式的截图内容
this.$refs.cropper.getCropData(data => {
  // do something
  console.log(data)  
})
//获取blob格式的截图内容
this.$refs.cropper.getCropBlob(data => {
  // do something
  console.log(data)  
})

Das obige ist der detaillierte Inhalt vonSo wählen Sie einen Avatar aus und schneiden ihn in Vue3 zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!