Vue verwendet Canvas, um den Bildkomprimierungs-Upload zu realisieren

ctx.drawImage(Bild, dx, dy);
ctx.drawImage(Bild, dx, dy, dBreite, dHöhe);
ctx.drawImage(Bild, sx, sy, sBreite, sHöhe, dx, dy, dBreite, dHöhe);

//html
<input id="Datei" Typ="Datei">

// JS
var eleFile = document.querySelector('#Datei');

//Einige Elemente und Objekte, die zum Komprimieren von Bildern benötigt werden var reader = new FileReader(), img = new Image();

//Ausgewähltes Dateiobjekt var file = null;

//Skalierung der für das Bild erforderlichen Leinwand
var Leinwand = Dokument.createElement('Leinwand');
var Kontext = Canvas.getContext('2d');

// Nachdem das Base64-Adressbild geladen wurde, img.onload = function () {
    //Originalgröße des Bildes var originWidth = this.width;
    var originHeight = diese.Höhe;
    // Maximale Größenbeschränkung var maxWidth = 400, maxHeight = 400;
    // Zielgröße var targetWidth = originWidth, targetHeight = originHeight;
    // Die Bildgröße überschreitet das Limit von 400x400 if (originWidth > maxWidth || originHeight > maxHeight) {
        wenn (Ursprungsbreite / Ursprungshöhe > max.Breite / max.Höhe) {
            // Breiter, begrenze die Größe entsprechend der Breite targetWidth = maxWidth;
            Zielhöhe = Math.round(maximale Breite * (Ursprungshöhe / Ursprungsbreite));
        } anders {
            Zielhöhe = max. Höhe;
            Zielbreite = Math.round(max.Höhe * (Ursprungsbreite / Ursprungshöhe));
        }
    }
        
    // Canvas skaliert das Bild canvas.width = targetWidth;
    canvas.height = Zielhöhe;
    //Leinwand löschen context.clearRect(0, 0, targetWidth, targetHeight);
    // Bildkomprimierung context.drawImage(img, 0, 0, targetWidth, targetHeight);
    // Canvas in Blob umwandeln und hochladen canvas.toBlob(function (blob) {
        // Ajax-Upload von Bildern var xhr = new XMLHttpRequest();
        // Datei-Upload erfolgreich xhr.onreadystatechange = function() {
            wenn (xhr.status == 200) {
                // xhr.responseText sind die zurückgegebenen Daten}
        };
        // Starten Sie den Upload xhr.open("POST", 'upload.php', true);
        xhr.send(blob);    
    }, Dateityp || 'image/png');
};

//Konvertiere die Datei in Base64, um die Originalgröße des Bildes zu erhalten reader.onload = function(e) {
    img.src = e.Ziel.Ergebnis;
};
eleFile.addEventListener('ändern', Funktion (Ereignis) {
    Datei = Ereignis.Ziel.Dateien[0];
    // Die ausgewählte Datei ist ein Bild if (file.type.indexOf("image") == 0) {
        reader.readAsDataURL(Datei);    
    }
});

// Gerät-DPR abrufen
getPixelRatio: Funktion (Kontext) {
    let backingStore = context.backingStorePixelRatio ||
    Kontext.webkitBackingStorePixelRatio ||
    Kontext.mozBackingStorePixelRatio ||
    Kontext.msBackingStorePixelRatio ||
    Kontext.oBackingStorePixelRatio ||
    Kontext.backingStorePixelRatio || 1;
    Rückgabewert (window.devicePixelRatio || 1) / backingStore;
}

// so etwas wie das hier const ctx = this.canvas.getContext("2d");
const dpr = this.getPixelRatio(ctx);
this.$refs.postImg.crossOrigin = "Anonym";
var alteWidth = this.canvas.width;
var alteHeight = this.canvas.height;
this.canvas.style.width = alteBreite + 'px'; 
this.canvas.style.height = alteHöhe + 'px';
this.canvas.width = alteBreite * dpr;
this.canvas.height = alteHöhe * dpr;
ctx.scale(dpr, dpr);

//Normale Vorgänge ausführen ctx.drawImage(this.$refs.cropImg, 0, 0, 250, 400);