1. Anwendungsszenario der Bildkonvertierung in Base64

Die Bildkonvertierung in Base64 wird normalerweise verwendet, wenn Benutzer Bilder hochladen. Ihre Funktion besteht darin, Benutzern die Vorschaubilder anzuzeigen, ohne vom Netzwerk beeinträchtigt zu werden.

Dies ist der herkömmliche Dateiübertragungsprozess : Zuerst wählt der Benutzer ein Bild aus und lädt es auf den Server hoch, der Server speichert und empfängt es und gibt eine URL-Adresse zurück, und dann fordert der Client das Bild mit der URL-Adresse an und erhält es schließlich die Vorschau des vom Benutzer hochgeladenen Bildes. Wenn der Vorgang durch ein schlechtes Netzwerk verursacht wird, wird die Benutzererfahrung stark beeinträchtigt.

Dies ist der Upload-Prozess zum Konvertieren von Bildern in Base64

Beim Hochladen ist es nicht erforderlich, sich auf die Anforderung des Servers zu verlassen, und die Konvertierung erfolgt direkt auf der Clientseite unter Verwendung des Datei-E/A-Lesens, das nicht durch Netzwerk-E/A beeinflusst wird und viel schneller als das Netzwerk ist

Und wenn Bilder bearbeitet werden müssen, muss der erste Schritt erneut durchgeführt werden? Wenn das Netzwerk nicht gut ist, wird die Benutzererfahrung stark beeinträchtigt.

Der Hauptgrund für die Konvertierung von Bildern in Base64 besteht also darin, die Benutzererfahrung zu verbessern

2. Bild zu Base64-Code

Struktur von HTML

  <!-- 上传图片 -->
  <input type="file">
  <img src="" alt="" id="IMG">

Nun zum js-Code

Posten Sie einfach den Code und erklären Sie ihn.

 const IMG = document.getElementById('IMG');
 const ipt = document.querySelector('input');
  ipt.onchange = function () {
    const file = ipt.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
       IMG.src = e.target.result
    }
    reader.readAsDataURL(file)
  }

Die erste besteht darin, die Elemente des Eingabe-Tags und des IMG-Tags abzurufen. Es gibt nicht viel zu sagen, das wird jeder tun.

Hören Sie dann auf das Ereignis onchange () des Eingabefelds und rufen Sie das vom Benutzer ausgewählte Dateiobjekt über ipt.files [0] ab.

Der Kerncode ist die Methode „reader.readAsDataURL(file)“, da es sich bei dieser Methode um eine asynchrone Methode handelt. Nach dem Lesen können Sie einen in Base64 konvertierten Code erhalten, der wie folgt ausgedruckt wird:

Sie können die Dateigröße auch nach der Konvertierung in Base64 sehen

Ändern Sie abschließend das src-Attribut des img-Tags über die Zuweisungsmethode

Dies ist der Endeffekt

Nach dem Hochladen können Sie sofort die Vorschau des Bildes sehen, da die Lesemethode des Lesers nicht vom Netzwerk beeinflusst wird und seine Geschwindigkeit viel schneller ist als die des Netzwerks

3. Komprimieren Sie die hochgeladenen Bilder

Obwohl diese Methode sehr einfach zu verwenden ist, wird das Bild langsamer, wenn es relativ groß ist, und die Karte wird langsamer

Damit Sie das Bild komprimieren können, verwende ich hier Canvas zum Komprimieren

direkt auf dem Code

 const ipt = document.querySelector('input');
  const IMG = document.getElementById('IMG');

  ipt.addEventListener('change', function () {
    const file = ipt.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const img = new Image();
      img.src = e.target.result;

      img.onload = function () {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const maxWidth = 300; // 设置最大宽度
        const maxHeight = 300; // 设置最大高度

        let width = img.width;
        let height = img.height;

        // 如果图片尺寸大于最大宽度或最大高度，则按比例缩放图片
        if (width > maxWidth || height > maxHeight) {
          const ratio = Math.min(maxWidth / width, maxHeight / height);
          width *= ratio;
          height *= ratio;
        }

        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(img, 0, 0, width, height);

        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩图片质量为0.8
        console.log(compressedDataUrl);
        IMG.src = compressedDataUrl;
      };
    };

    reader.readAsDataURL(file);
  });

Sie können sehen, dass die Datei dieses Mal nach dem Hochladen komprimiert wurde. Der Code ist eigentlich relativ einfach. Sie können ihn verstehen, indem Sie sich einfach die Kommentare in meinem Code ansehen.

Zusammenfassen:

Tatsächlich besteht die Funktion dieser Methode darin, die Anzeigegeschwindigkeit der Front-End-Seite zu verbessern, dh die Benutzererfahrung zu verbessern

Konvertieren Sie das Front-End-Bild in Base64 und komprimieren Sie das Bild mit Canvas

1. Anwendungsszenario der Bildkonvertierung in Base64

2. Bild zu Base64-Code

3. Komprimieren Sie die hochgeladenen Bilder

Supongo que te gusta