So komprimieren Sie Bilder effektiv mit JS

Vorwort

Das mobile Geschäft des Unternehmens erfordert, dass beim Hochladen von Bildern durch Benutzer das Front-End die Bildgröße komprimiert und sie dann auf den Server hochlädt. Dadurch kann der Upstream-Verkehr des mobilen Endgeräts reduziert, die Upload-Wartezeit des Benutzers verkürzt und das Benutzererlebnis optimiert werden.

Übrigens wurden die Fälle in diesem Artikel in Plug-Ins organisiert und auf npm hochgeladen. Sie können sie über npm install js-image-compressor -D installieren und verwenden. Sie können sie von github herunterladen.

In diesem Dokument wird versucht, die folgenden Probleme zu lösen:

• Verstehen Sie die Konvertierungsbeziehung zwischen Bildobjekten, Daten-URLs, Canvas und Datei (Blob).
• Wichtige Techniken zur Bildkomprimierung;
• Problem mit schwarzem Bildschirm beim Komprimieren sehr großer Bilder.

Konvertierungsbeziehung

Mögliche Szenarien in tatsächlichen Anwendungen: Meistens lesen wir das vom Benutzer hochgeladene Dateiobjekt direkt, lesen und schreiben es auf die Leinwand, komprimieren es mithilfe der Canvas-API, konvertieren es nach der Komprimierung in ein Dateiobjekt (Blob) und laden es auf den Remote-Bildserver hoch. Manchmal müssen wir auch eine Base64-Zeichenfolge komprimieren und sie dann in eine Base64-Zeichenfolge konvertieren, um sie an die Remote-Datenbank zu übergeben oder sie in ein Dateiobjekt (Blob) zu konvertieren. Im Allgemeinen besteht folgende Umrechnungsbeziehung:

Konkrete Umsetzung

Im Folgenden werden die Transformationsmethoden nacheinander im Transformationsbeziehungsdiagramm implementiert.

file2DataUrl(Datei, Rückruf)

Die von Benutzern über den Seiten-Tag <input type="file" /> hochgeladenen lokalen Bilder werden direkt in das Datums-URL-String-Format konvertiert. Sie können den Dateilesekonstruktor FileReader verwenden. Mit dem FileReader-Objekt kann eine Webanwendung den Inhalt einer auf dem Computer gespeicherten Datei (oder eines Rohdatenpuffers) asynchron lesen. Dabei wird ein File- oder Blob-Objekt verwendet, um die zu lesende Datei oder die zu lesenden Daten anzugeben. Die Instanzmethode readAsDataURL liest den Dateiinhalt und konvertiert ihn in einen Base64-String. Nach dem Einlesen steht der Dateiinhalt im Instanzattribut result zur Verfügung.

Funktion file2DataUrl(Datei, Rückruf) {
 var reader = neuer FileReader();
  Leser.onload = Funktion () {
    Rückruf (Reader.Ergebnis);
  };
  reader.readAsDataURL(Datei);
}

Daten-URLs bestehen aus vier Teilen: einem Präfix (data:), einem MIME-Typ, der den Datentyp angibt, einem optionalen Base64-Tag, wenn es sich nicht um Text handelt, und den Daten selbst:

Daten:<Medientyp>,<Daten>

Beispielsweise wird ein Bild im PNG-Format in eine Base64-Zeichenfolge konvertiert: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g.

file2Image(Datei, Rückruf)

Wenn Sie die von Benutzern hochgeladenen Bilder lokal zwischenspeichern und mit img-Tags anzeigen möchten, können Sie zusätzlich zur Verwendung der mit der obigen Methode konvertierten Base64-Zeichenfolge als Bild-Quelle auch direkt das URL-Objekt verwenden, um auf die URL der in Datei und Blob gespeicherten Daten zu verweisen. Der Vorteil der Verwendung einer Objekt-URL besteht darin, dass Sie den Dateiinhalt direkt verwenden können, ohne ihn in JavaScript einlesen zu müssen. Geben Sie hierzu einfach die Objekt-URL dort an, wo der Dateiinhalt benötigt wird.

Funktion file2Image(Datei, Rückruf) {
 var image = neues Bild();
 var URL = Fenster.webkitURL || Fenster.URL;
 wenn (URL) {
 var url = URL.createObjectURL(Datei);
    bild.onload = funktion() {
      Rückruf (Bild);
      URL.revokeObjectURL(url);
    };
    bild.src = URL;
  } anders {
    inputFile2DataUrl(Datei, Funktion(dataUrl) {
      bild.onload = funktion() {
        Rückruf (Bild);
      }
      image.src = Daten-Url;
    });
  }
}

Hinweis: Um eine Objekt-URL zu erstellen, verwenden Sie die Methode window.URL.createObjectURL() und übergeben Sie ein Datei- oder Blob-Objekt. Werden die Daten nicht mehr benötigt, gibt man am besten den Inhalt frei, den sie belegen. Aber solange Code vorhanden ist, der auf die Objekt-URL verweist, wird der Speicher nicht freigegeben. Um den Speicher manuell freizugeben, übergeben Sie die Objekt-URL an URL.revokeObjectURL().

url2Image(URL, Rückruf)

Holen Sie sich das Bildobjekt über den Bildlink (URL). Da das Laden des Bildes asynchron erfolgt, fügen Sie es in die Rückruffunktion „callback“ ein, um das erhaltene Bildobjekt zurückzugeben.

Funktion url2Image(url, Rückruf) {
 var image = neues Bild();
  bild.src = URL;
  bild.onload = funktion() {
    Rückruf (Bild);
  }
}

image2Canvas(Bild)

Verwenden Sie die Methode drawlmage(), um das Bildobjekt auf dem Canvas-Objekt zu zeichnen.

drawImage hat drei Syntaxformen:

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(Bild, dx, dy, dBreite, dHöhe);

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

Parameter:

auf den Kontext bezogenes Bildelement;

sx zeichnet die X-Achsenkoordinate der oberen linken Ecke des Auswahlfelds basierend auf dem Bild;

sy Zeichnen Sie die Y-Achsenkoordinate der oberen linken Ecke des Auswahlfelds basierend auf dem Bild.

sWidth zeichnet die Breite des Auswahlfelds;

sHeight zeichnet die Breite des Auswahlfelds;

dx Die X-Achsenkoordinate der oberen linken Ecke des Bildes auf der Zielleinwand;

Die Y-Achsenkoordinate der oberen linken Ecke des dy-Bildes auf der Zielleinwand;

dWidth Die Breite des auf der Zielleinwand gezeichneten Bildes;

dHeight Die Höhe des auf der Zielleinwand gezeichneten Bildes;

Funktion image2Canvas(Bild) {
 var Leinwand = Dokument.createElement('Leinwand');
 var ctx = canvas.getContext('2d');
  Leinwand.Breite = Bild.natürlicheBreite;
  Leinwand.Höhe = Bild.natürlicheHöhe;
  ctx.drawImage(Bild, 0, 0, Leinwandbreite, Leinwandhöhe);
 Leinwand zurückgeben;
}

canvas2DataUrl(Leinwand, Qualität, Typ)

Das HTMLCanvasElement-Objekt verfügt über eine Methode toDataURL(Typ, EncoderOptions), die eine Daten-URL mit dem anzuzeigenden Bild zurückgibt. Sie können auch das Ausgabeformat und die Qualität angeben.

Die Parameter sind:

Typ: Bildformat, der Standard ist image/png.

encoderOptions kann die Bildqualität im Bereich von 0 bis 1 auswählen, wenn das Bildformat als image/jpeg oder image/webp angegeben ist. Wenn der Wert außerhalb des Bereichs liegt, wird der Standardwert 0,92 verwendet und andere Parameter werden ignoriert.

Funktion canvas2DataUrl(Canvas, Qualität, Typ) {
 returniere canvas.toDataURL(Typ || „image/jpeg“, Qualität || 0,8);
}

dataUrl2Image(dataUrl, Rückruf)

Der Bildlink kann auch ein Base64-String sein, der direkt dem Bildobjekt src zugewiesen werden kann.

Funktion dataUrl2Image(dataUrl, callback) {
 var image = neues Bild();
  bild.onload = funktion() {
    Rückruf (Bild);
  };
  image.src = Daten-Url;
}

dataUrl2Blob(dataUrl, Typ)

Konvertiert eine Daten-URL-Zeichenfolge in ein Blob-Objekt. Die Hauptidee lautet: Extrahieren Sie zuerst den Datenteil der Daten-URL, dekodieren Sie die Base64-kodierte Zeichenfolge mit atob, konvertieren Sie sie dann in die Unicode-Kodierung, speichern Sie sie in einem Array vom Typ Uint8Array (8-Bit-Array vorzeichenloser Ganzzahlen, jedes Element ist ein Byte) und konvertieren Sie sie schließlich in ein Blob-Objekt.

Funktion dataUrl2Blob(dataUrl, Typ) {
 var data = dataUrl.split(',')[1];
 var mimePattern = /^data:(.*?)(;base64)?,/;
 var mime = dataUrl.match(mimePattern)[1];
 var binStr = atob(Daten);
 var arr = neues Uint8Array(Länge);

 für (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
 gibt neuen Blob zurück ([arr], {Typ: Typ || Mime});
}

canvas2Blob(Canvas, Rückruf, Qualität, Typ)

HTMLCanvasElement verfügt über eine Methode toBlob(callback, [type], [encoderOptions]), um ein Blob-Objekt zum Anzeigen des Bildes auf der Leinwand zu erstellen. Diese Bilddatei kann nach Ermessen des Benutzeragenten zwischengespeichert oder lokal gespeichert werden. Der zweite Parameter gibt das Bildformat an. Wenn nichts angegeben wird, ist der Bildtyp standardmäßig image/png und die Auflösung beträgt 96 dpi. Der dritte Parameter dient zum Einstellen der Qualität des Ausgabebildes bei Bildern im Bild/JPEG-Format.

Funktion canvas2Blob(Canvas, Rückruf, Qualität, Typ){
  canvas.toBlob(Funktion(Blob) {
    Rückruf(Blob);
  }, Typ || „image/jpeg“, Qualität || 0,8);
}

Um mit älteren Browsern kompatibel zu sein, können Sie als Polyfill-Lösung für toBlob die Daten-URL verwenden, um eine Blob-Methode dataUrl2Blob als HTMLCanvasElement-Prototypmethode zu generieren.

wenn (!HTMLCanvasElement.prototype.toBlob) {
 Objekt.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  Wert: Funktion (Rückruf, Typ, Qualität) {
 let dataUrl = this.toDataURL(Typ, Qualität);
    Rückruf(dataUrl2Blob(dataUrl));
  }
 });
}

blob2DataUrl(blob, Rückruf)

Konvertieren Sie das Blob-Objekt in Daten-URL-Daten. Da die Instanz readAsDataURL-Methode von FileReader nicht nur das Lesen von Dateien, sondern auch das Lesen von Blob-Objektdaten unterstützt, kann die obige file2DataUrl-Methode hier wiederverwendet werden:

Funktion blob2DataUrl(blob, Rückruf) {
  file2DataUrl(Blob, Rückruf);
}

blob2Image(blob, Rückruf)

Konvertieren Sie ein Blob-Objekt in ein Image-Objekt. Sie können Dateien über URL-Objekte referenzieren. Sie können auch dateiähnliche Objekte wie Blob referenzieren. Ebenso können Sie die obige Methode file2Image wiederverwenden:

Funktion blob2Image(blob, Rückruf) {
  Datei2Bild(Blob, Rückruf);
}

hochladen (URL, Datei, Rückruf)

Um Bilder (komprimiert) hochzuladen, können Sie FormData verwenden, um das Dateiobjekt zu übergeben und die Datei über XHR direkt auf den Server hochzuladen.

Funktion Upload (URL, Datei, Rückruf) {
 var xhr = neue XMLHttpRequest();
 var fd = neue FormData();
  fd.append('Datei', Datei);
  xhr.onreadystatechange = Funktion () {
 wenn (xhr.readyState === 4 && xhr.status === 200) {
 //Rückruf erfolgreich hochgeladen && callback(xhr.responseText);
    } anders {
 neuen Fehler (xhr) auslösen;
    }
  }
  xhr.open('POST', URL, wahr);
  xhr.send(fd);
}

Sie können auch FileReader verwenden, um den Dateiinhalt zu lesen und ihn zum Hochladen in Binärdateien zu konvertieren

Funktion Upload(URL, Datei) {
 var reader = neuer FileReader();
 var xhr = neue XMLHttpRequest();

  xhr.open('POST', URL, wahr);
  xhr.overrideMimeType('text/plain; Zeichensatz=x-benutzerdefiniertes Binär');

  Leser.onload = Funktion() {
    xhr.send(Leser.Ergebnis);
  };
  reader.readAsBinaryString(Datei);
}

Implementierung einer einfachen Bildkomprimierung

Nachdem Sie sich mit der spezifischen Implementierung der oben genannten verschiedenen Bildkonvertierungsmethoden vertraut gemacht haben, kapseln Sie sie in einem gemeinsamen Objekt-Dienstprogramm und kombinieren Sie sie dann mit dem Komprimierungskonvertierungs-Flussdiagramm. Hier können wir die Bildkomprimierung einfach implementieren:
Zuerst wird das hochgeladene Bild in ein Bildobjekt konvertiert, dann auf die Canvas-Leinwand geschrieben und schließlich passt die Canvas-Objekt-API die Größe und Ausgabe des Bildes an, um eine Komprimierung zu erreichen.

/**
 * Einfache Bildkomprimierungsmethode* @param {Object} Optionen zugehörige Parameter*/
(Funktion (Gewinn) {
 var REGEXP_IMAGE_TYPE = /^Bild\//;
 var util = {};
 var Standardoptionen = {
    Datei: null,
    Qualität: 0,8
  };
 var isFunc = Funktion (fn) { return Typ von fn === 'Funktion'; };
 var isImageType = Funktion (Wert) { return REGEXP_IMAGE_TYPE.test(Wert); };

 /**
   * Einfacher Bildkomprimierungskonstruktor * @param {Object} Optionen zugehörige Parameter */
 Funktion SimpleImageCompressor(Optionen) {
    Optionen = Objekt.assign({}, Standardoptionen, Optionen);
 this.options = Optionen;
 diese.Datei = Options.Datei;
 dies.init();
  }

 var _proto = SimpleImageCompressor.prototype;
  win.SimpleImageCompressor = SimpleImageCompressor;

 /**
   * Initialisierung */
  _proto.init = Funktion init() {
 var _this = dies;
 var Datei = diese.Datei;
 var Optionen = diese.Optionen;

 wenn (!Datei || !isImageType(Datei.Typ)) {
      console.error('Bitte laden Sie die Bilddatei hoch!');
 zurückkehren;
    }

 wenn (!isImageType(options.mimeType)) {
      Optionen.MimeType = Datei.Typ;
    }

    util.file2Image(Datei, Funktion (img) {
 var Leinwand = util.image2Canvas(img);
      Datei.Breite = Bild.natürlicheBreite;
      Datei.Höhe = Bild.natürlicheHöhe;
      _this.beforeCompress(Datei, Leinwand);

      util.canvas2Blob(Leinwand, Funktion (Blob) {
        Blob.Breite = Leinwand.Breite;
        Blob.Höhe = Leinwand.Höhe;
        Optionen.Erfolg && Optionen.Erfolg(Blob);
      }, Optionen.Qualität, Optionen.MIME-Typ)
    })
  }

 /**
   * Vor der Komprimierung, nach dem Lesen der Bild-Hook-Funktion */
  _proto.beforeCompress = Funktion beforeCompress() {
 wenn (isFunc(this.options.beforeCompress)) {
 diese.Optionen.vorKomprimieren(diese.Datei);
    }
  }

 // Lassen Sie die öffentliche Methodendefinition „util“ weg // ...

 // Fügen Sie die öffentliche Methode `util` zu den statischen Eigenschaften der Instanz hinzu für (Schlüssel in util) {
 wenn (util.hasOwnProperty(Schlüssel)) {
      SimpleImageCompressor[Schlüssel] = util[Schlüssel];
    }
  }
})(Fenster)

Aufruf und Eingabeparameter dieser einfachen Bildkomprimierungsmethode:

var fileEle = document.getElementById('Datei');

fileEle.addEventListener('ändern', Funktion () {
  Datei = diese.Dateien[0];

 var Optionen = {
    Datei: Datei,
    Qualität: 0,6,
    MIME-Typ: „image/jpeg“,
 // Rückruf vor der Komprimierung beforeCompress: Funktion (Ergebnis) {
      console.log('Bildgröße vor der Komprimierung: ', result.size);
      console.log('MIME-Typ: ', Ergebnis.Typ);
 // Vorschau des hochgeladenen Bildes auf der Seite // SimpleImageCompressor.file2DataUrl(result, function (url) {
 // document.getElementById('origin').src = URL;
 // })
    },
 // Komprimierung erfolgreich Callback erfolgreich: Funktion (Ergebnis) {
      console.log('Bildgröße nach der Komprimierung: ', result.size);
      console.log('MIME-Typ: ', Ergebnis.Typ);
      console.log('Komprimierungsrate: ', (Ergebnisgröße / Dateigröße * 100).toFixed(2) + '%');

 // Komprimiertes Bild generieren und auf der Seite anzeigen // SimpleImageCompressor.file2DataUrl(result, function (url) {
 // document.getElementById('Ausgabe').src = URL;
 // })

 // Auf Remote-Server hochladen // SimpleImageCompressor.upload('/upload.png', result);
    }
  };

 neuer SimpleImageCompressor(Optionen);
}, FALSCH);

Wenn es Ihnen nichts ausmacht, dass diese Demo zu einfach ist, können Sie hier klicken, um sie auszuprobieren. Wenn Sie genug Geduld haben, mehrere Arten von Bildern hochzuladen, werden Sie feststellen, dass immer noch die folgenden Probleme bestehen:

Die Größe des komprimierten Ausgabebildes ist auf die Originalbildgröße festgelegt. In der Praxis müssen Sie jedoch möglicherweise die Größe des Ausgabebildes steuern und gleichzeitig die Größe komprimieren.

Bilder im PNG-Format werden im gleichen Format komprimiert, die Komprimierungsrate ist nicht hoch und es kann das Phänomen „Zunahme statt Abnahme“ auftreten.

In einigen Fällen kann es bei der Konvertierung anderer Formate in das PNG-Format auch zu einem „Zunahme-statt-Abnahme“-Phänomen kommen.

Bei großen Bildern im PNG-Format kann es nach der Komprimierung auf manchen Mobiltelefonen zu einem schwarzen Bildschirm kommen.

Verbesserte Bildkomprimierung

Wie das Sprichwort sagt: „Rom wurde nicht an einem Tag erbaut.“ Durch die obigen Experimente haben wir viele Mängel festgestellt. Im Folgenden werden die Probleme einzeln analysiert und nach Lösungen gesucht.

Die Größe des komprimierten Ausgabebildes ist auf die Originalbildgröße festgelegt. In der Praxis müssen Sie jedoch möglicherweise die Größe des Ausgabebildes steuern und gleichzeitig die Größe komprimieren.

Um eine Verformung komprimierter Bilder zu vermeiden, wird im Allgemeinen eine geometrische Skalierung verwendet. Zunächst muss das Seitenverhältnis des Originalbildes berechnet werden. Die vom Benutzer festgelegte Höhe wird mit dem Seitenverhältnis multipliziert, um die Breite nach der geometrischen Skalierung zu erhalten. Wenn sie kleiner als die vom Benutzer festgelegte Breite ist, wird die vom Benutzer festgelegte Höhe als Grundlage für die Skalierung verwendet. Andernfalls wird die Breite als Grundlage für die Skalierung verwendet.

var aspectRatio = natürlicheBreite / natürlicheHöhe;
var width = Math.max(options.width, 0) || natürlicheBreite;
var Höhe = Math.max(Optionen.Höhe, 0) || natürlicheHöhe;
wenn (Höhe * Seitenverhältnis > Breite) {
  Höhe = Breite / Seitenverhältnis;
} anders {
  Breite = Höhe * Seitenverhältnis;
}

Die Größe des Ausgabebildes wird bestimmt. Der nächste Schritt besteht darin, ein Canvas entsprechend dieser Größe zu erstellen und das Bild darauf zu zeichnen. Hier können wir die oben erwähnte Methode image2Canvas leicht modifizieren:

Funktion image2Canvas(Bild, Zielbreite, Zielhöhe) {
 var Leinwand = Dokument.createElement('Leinwand');
 var ctx = canvas.getContext('2d');
  canvas.width = Zielbreite || Bild.natürlicheBreite;
  canvas.height = Zielhöhe || Bild.natürliche Höhe;
  ctx.drawImage(Bild, 0, 0, Leinwandbreite, Leinwandhöhe);
 Leinwand zurückgeben;
}

Bilder im PNG-Format werden im gleichen Format komprimiert, die Komprimierungsrate ist nicht hoch und es kann das Phänomen „Zunahme statt Abnahme“ auftreten.

Es ist grundsätzlich nicht zu empfehlen, Bilder im PNG-Format in ihr eigenes Format zu komprimieren, da die Komprimierungsrate nicht optimal ist und es manchmal sogar zu einer Verschlechterung der Bildqualität kommen kann.

Denn in der „konkreten Implementierung“ haben wir zwei Komprimierungsschlüssel-APIs:

toBlob(callback, [type], [encoderOptions]) Der Parameter „encoderOptions“ wird verwendet, um die Qualität des Ausgabebildes für Bilder im Bild-/JPEG-Format festzulegen.

toDataURL(Typ, EncoderOptions-Parameter EncoderOptions Wenn das Bildformat als image/jpeg oder image/webp angegeben ist, kann die Bildqualität im Bereich von 0 bis 1 ausgewählt werden.

Keines von beiden hat irgendeinen Komprimierungseffekt auf Bilder im PNG-Format.

Es gibt eine Kompromisslösung. Wir können einen Schwellenwert festlegen. Wenn die Qualität des PNG-Bildes unter diesem Wert liegt, komprimieren wir es trotzdem und geben es im PNG-Format aus, sodass das schlechteste Ausgabeergebnis nicht zu schlecht ist. Auf dieser Grundlage verarbeiten wir das Ausgabequellbild für den Benutzer, wenn die Größe des komprimierten Bildes „zunimmt statt abzunehmen“. Wenn die Bildqualität einen bestimmten Wert überschreitet, komprimieren wir es in das JPEG-Format.

// Die Bildgröße im `png`-Format überschreitet `convertSize`, konvertiere in das `jpeg`-Format, wenn (file.size > options.convertSize und options.mimeType === 'image/png') {
  Optionen.mimeType = "Bild/JPEG";
}
// Etwas Code weglassen // ...
// Wenn die vom Benutzer erwartete Ausgabebreite und -höhe nicht größer als die Breite und Höhe des Quellbildes ist, ist die Ausgabedateigröße größer als die Quelldatei und die Quelldatei wird zurückgegeben, wenn (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {
  Ergebnis = Datei;
}

Bei großen Bildern im PNG-Format kann es nach der Komprimierung auf manchen Mobiltelefonen zu einem schwarzen Bildschirm kommen.

Da die meisten Browser unterschiedliche maximale Canvas-Größen unterstützen

Wenn die Bildgröße zu groß ist und Sie eine Leinwand mit derselben Größe erstellen und dann das Bild darauf zeichnen, tritt eine abnormale Situation auf. Das heißt, die generierte Leinwand weist keine Bildpixel auf und die Standardhintergrundfarbe der Leinwand selbst ist schwarz, wodurch das Bild als „schwarzer Bildschirm“ angezeigt wird.

Hier können Sie verhindern, dass die generierte Leinwand die Grenzen überschreitet, indem Sie die maximale Breite und Höhe des Ausgabebildes steuern, und das Problem des „schwarzen Bildschirms“ lösen, indem Sie den standardmäßigen schwarzen Hintergrund mit einer transparenten Farbe abdecken:

// ...
// Begrenzen Sie die minimale und maximale Breite und Höhe var maxWidth = Math.max(options.maxWidth, 0) || Infinity;
var maxHeight = Math.max(options.maxHeight, 0) || Unendlich;
var minWidth = Math.max(options.minWidth, 0) || 0;
var minHeight = Math.max(options.minHeight, 0) || 0;

if (maxBreite < Unendlich && maxHöhe < Unendlich) {
 if (max. Höhe * Seitenverhältnis > max. Breite) {
    max. Höhe = max. Breite / Seitenverhältnis;
  } anders {
    max.Breite = max.Höhe * Seitenverhältnis;
  }
} sonst wenn (maxBreite < Unendlich) {
  max. Höhe = max. Breite / Seitenverhältnis;
} sonst wenn (maxHeight < Unendlich) {
  max.Breite = max.Höhe * Seitenverhältnis;
}

wenn (minBreite > 0 && minHöhe > 0) {
 wenn (min. Höhe * Seitenverhältnis > min. Breite) {
    min. Höhe = min. Breite / Seitenverhältnis;
  } anders {
    min.Breite = min.Höhe * Seitenverhältnis;
  }
} sonst wenn (minWidth > 0) {
  min. Höhe = min. Breite / Seitenverhältnis;
} sonst wenn (minHeight > 0) {
  min.Breite = min.Höhe * Seitenverhältnis;
}

Breite = Math.floor(Math.min(Math.max(Breite, min.Breite), max.Breite));
Höhe = Math.floor(Math.min(Math.max(Höhe, min.Höhe), max.Höhe));

// ...
// Überschreibe die Standardfüllfarbe (#000)
var Füllstil = "transparent";
Kontext.Füllstil = Füllstil;

Zu diesem Zeitpunkt wurden die oben genannten unerwarteten Probleme nacheinander gelöst

Zusammenfassen

Wir haben den gesamten Prozess vom Hochladen lokaler Bilder über das Seiten-Tag <input type="file" /> bis zur Bildkomprimierung geklärt und auch einige unerwartete Situationen berücksichtigt, die bei der tatsächlichen Verwendung immer noch auftreten, und entsprechende Lösungen bereitgestellt. Die verbesserte Version der Bildkomprimierung wurde in einem Plug-In zusammengefasst und auf npm hochgeladen. Es kann über npm install js-image-compressor -D installiert und verwendet werden. Es kann von github heruntergeladen werden.

Oben finden Sie Einzelheiten zur effektiven Verwendung von JS zum Komprimieren von Bildern. Weitere Informationen zur effektiven Komprimierung von Bildern mit JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!