Ändern der Größe von Base64-Bildern mit JavaScript: Ein Schnappschuss zum Skalieren

Bei der Arbeit mit Bildern ist es oft notwendig, die Größe zu ändern, um die Dateigröße zu reduzieren oder ein bestimmtes Seitenverhältnis anzupassen. Und seien wir ehrlich, niemand will mit einem verpixelten Bild stecken bleiben, das einfach nicht die richtige Größe hat.

Wir haben alles für dich! In diesem Beitrag werden wir eine JavaScript-Funktion untersuchen, die die Größe eines Base64-codierten Bildes ändern kann. Diese Funktion ist ein echter Lebensretter und sorgt dafür, dass Ihre Bilder in kürzester Zeit perfekt aussehen.

Die Funktion resizeBase64Image nimmt einen einzigen Parameter auf: das base64-codierte Bild. Es gibt ein Versprechen zurück, das mit dem in der Größe geänderten Bild in Form einer Daten-URL aufgelöst wird. Diese Funktion ist ein echter "Schnappschuss" und macht die Größenänderung von Bildern zum Kinderspiel.

Die Funktion legt zunächst eine maximale Bildgröße von 4 MB in Bytes fest und konvertiert sie dann. Darüber hinaus wird die maximale Bildgrößenbegrenzung als Grenze für die endgültige Bildgröße verwendet.

const maxSizeInMB = 4;
const maxSizeInBytes = maxSizeInMB * 1024 * 1024;

Als nächstes erstellt die Funktion ein HTML-Image-Objekt und legt seine src-Eigenschaft auf das base64-Image fest. Anschließend wird dem Bild ein Ereignis-Listener hinzugefügt, der aufgerufen wird, wenn das Bild geladen wurde.

const img = new Image();
img.src = base64Image;
img.onload = function () {
   // Resizing logic goes here
};

Innerhalb des Onload-Ereignis-Listeners erstellt die Funktion ein HTML-Canvas-Element und erhält seinen 2D-Rendering-Kontext. Es speichert dann die ursprüngliche Breite und Höhe des Bildes sowie sein Seitenverhältnis.

const canvas = document.createElement("canvas"); 
const ctx = canvas.getContext('2d'); 
const width = img.width; 
const height = img.height; 
const aspectRatio = width / height;

Um die neue Breite und Höhe des Bildes zu bestimmen, verwendet die Funktion das Seitenverhältnis, um die Größe zu berechnen, die es dem Bild ermöglichen würde, in die maximale Größe in Bytes zu passen. Und lassen Sie mich Ihnen sagen, es ist ein echter "Ratio-Nale" -Ansatz.

const newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);
const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);

Die Funktion legt dann die Breite und Höhe der Leinwand auf die neuen Werte fest und zeichnet das Originalbild auf der Leinwand, skaliert auf die neue Größe. Und einfach so ist Ihr Bild bereit für die Nahaufnahme!

canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);

Schließlich codiert die Funktion das verkleinerte Bild als JPEG mit einer Standardqualität von 80%. Es gibt dann das Bild in Form einer Daten-URL zurück. Und das ist ein "Schnappschuss" des Endergebnisses!

let quality = 0.8; 
let dataURL = canvas.toDataURL('image/jpeg', quality); 
resolve(dataURL);

Und das war's! Mit dieser Funktion können Sie die Größe von base64 ganz einfach ändern.

Hier ist die volle Funktion:

resizeBase64Image: function (base64Image) {
  return new Promise((resolve, reject) => {
    const maxSizeInMB = 4;
    const maxSizeInBytes = maxSizeInMB * 1024 * 1024;
    const img = new Image();
    img.src = base64Image;
    img.onload = function () {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext('2d');
      const width = img.width;
      const height = img.height;
      const aspectRatio = width / height;
      const newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);
      const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);
      canvas.width = newWidth;
      canvas.height = newHeight;
      ctx.drawImage(img, 0, 0, newWidth, newHeight);
      let quality = 0.8;
      let dataURL = canvas.toDataURL('image/jpeg', quality);
      resolve(dataURL);
    };
  });
}

Zusammenfassend lässt sich sagen, dass die Größenänderung von Bildern mühsam sein kann, aber mit der JavaScript-Funktion 'resizeBase64Image' ist es ein Kinderspiel. Diese Funktion nimmt einen einzelnen Parameter, das base64-codierte Bild, auf und gibt ein Versprechen zurück, das mit dem geänderten Bild in Form einer Daten-URL aufgelöst wird. Die Funktion legt auch eine maximale Bildgröße von 4 MB in Bytes fest, wodurch sichergestellt wird, dass das endgültige Bild von hoher Qualität und einfach zu bearbeiten ist.

Probieren Sie es aus und sehen Sie, wie es Ihren Bildbearbeitungsprozess verbessern kann. Viel Spaß beim Programmieren!