JavaScript zur Implementierung der Funktion zum Ändern des Avatars

<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

<script src="/assets/lib/jquery.js"></script>
<!-- Importieren Sie das Cropper-JS-Skript-->
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

<!-- Bildzuschnitt und Vorschaubereich in der ersten Zeile-->
   <div Klasse="Zeile1">
         <!-- Bildzuschneidebereich-->
            <div Klasse="cropper-box">
                    <!-- Dieses img-Tag ist sehr wichtig, es wird zukünftig als Zuschneidebereich initialisiert-->
                    <img id="Bild" src="/assets/images/sample.jpg" />
             </div>
             <!-- Bildvorschaubereich-->
             <div Klasse="Vorschau-Box">
                    <div>
                        <!-- Vorschaubereich mit einer Breite und Höhe von 100px -->
                        <div Klasse="img-preview w100"></div>
                        <p class="size">100 x 100</p>
                    </div>
                    <div>
                        <!-- Vorschaubereich mit einer Breite und Höhe von 50px -->
                        <div Klasse="img-preview w50"></div>
                        <p class="size">50 x 50</p>
                    </div>
                </div>
            </div>
 
 <!-- Schaltflächenbereich der zweiten Reihe-->
<div Klasse="Zeile2">
         <button type="button" class="layui-btn">Hochladen</button>
         <button type="button" class="layui-btn layui-btn-danger">OK</button>
</div>

/* Breite des Kartenkörperbereichs festlegen */
 
.layui-Kartenkörper {
    Breite: 500px;
}
 
 
/* Den Stil der Schaltflächenzeile festlegen */
 
.Zeile2 {
    Anzeige: Flex;
    Inhalt ausrichten: Flex-Ende;
    Rand oben: 20px;
}
 
 
/* Den Stil des Clipping-Bereichs festlegen */
 
.cropper-box {
    Breite: 350px;
    Höhe: 350px;
    Hintergrundfarbe: Cyan;
    Überlauf: versteckt;
}
 
 
/* Legt den Stil des ersten Vorschaubereichs fest */
 
.w100 {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: grau;
}
 
 
/* Legt den Stil des zweiten Vorschaubereichs fest */
 
.w50 {
    Breite: 50px;
    Höhe: 50px;
    Hintergrundfarbe: grau;
    Rand oben: 50px;
}
 
 
/* Legen Sie den Stil des Textes unter dem Vorschaubereich fest */
 
.Größe {
    Schriftgröße: 12px;
    Farbe: grau;
    Textausrichtung: zentriert;
}
 
 
/* Den Stil der Bildzeile festlegen */
 
.Zeile1 {
    Anzeige: Flex;
}
 
 
/* Den Stil des Vorschaufensterbereichs festlegen */
 
.Vorschau-Box {
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    biegen: 1;
    Elemente ausrichten: zentrieren;
}
 
 
/* Legen Sie den Stil des Bildvorschaubereichs fest */
 
.img-Vorschau {
    Überlauf: versteckt;
    Randradius: 50 %;
}

$(Funktion() {
    // 1.1 Holen Sie sich das DOM-Element des Zuschneidebereichs var $image = $('#image');
    // 1.2 Konfigurationsoptionen const options = {
        // Seitenverhältnis aspectRatio: 1,
        //Geben Sie den Vorschaubereich an preview: '.img-preview'
    };
 
    // 1.3 Zuschneidebereich erstellen$image.cropper(options);
})

<!-- Schaltflächenbereich der zweiten Reihe-->
<div Klasse="Zeile2">
<!-- Über das Accept-Attribut können Sie festlegen, welchen Dateityp der Benutzer auswählen darf-->
<input type="file" id="file" accept="image/png,image/jpeg" />
<button type="button" class="layui-btn" id="btnChooseImage">Hochladen</button>
<button type="button" class="layui-btn layui-btn-danger" id='btnUpload'>OK</button>
</div>

// Binden Sie das Änderungsereignis an das Dateiauswahlfeld // Das Änderungsereignis wird immer dann ausgelöst, wenn sich die ausgewählte Datei ändert $('#file').on('change', function(e) {
        // Vom Benutzer ausgewählte Datei abrufen var filelist = e.target.files;
        if (Dateiliste.Länge === 0) {
            return layer.msg('Bitte wählen Sie ein Foto aus!');
        }
        // 1. Holen Sie sich die vom Benutzer ausgewählte Datei var file = e.target.files[0];
        // 2. Konvertieren Sie die Datei in einen Pfad var imgURL = URL.createObjectURL(file);
        // 3. Reinitialisierung des Clipping-Bereichs $image
            .cropper('destroy') // Zerstöre den alten Zuschneidebereich.attr('src', imgURL) // Setze den Bildpfad zurück.cropper(options) // Initialisiere den Zuschneidebereich neu})

// Klickereignis an Bestätigungsschaltfläche binden$('#btnUpload').on('click', function() {
 // 1. Um den zugeschnittenen Avatar des Benutzers zu erhalten, var dataURL = $image
            .cropper('getCroppedCanvas', { // Canvas erstellen Leinwandbreite: 100,
                Höhe: 100
            })
            .toDataURL('image/png') // Konvertiere den Inhalt auf der Canvas-Leinwand in einen String im Base64-Format // 2. Rufe die Schnittstelle auf, um den Avatar auf den Server hochzuladen $.ajax({
            Methode: 'POST',
            URL: '/mein/Update/Avatar',
            Daten: {
                Avatar: Daten-URL
            },
            Erfolg: Funktion (Res) {
                wenn (res.status !== 0) {
                    return layer.msg('Ändern des Avatars fehlgeschlagen!');
                }
                layer.msg('Avatar erfolgreich geändert!');
                window.parent.getUserInfo();
            }
 })