Bilder mit Canvas in Base64 konvertieren

Wenn Sie Bilddaten aus dem Browser exportieren müssen – sei es für clientseitige Vorschauen, das Einbetten kleiner Grafiken oder die Bildverarbeitung vor dem Upload – ist die HTML Canvas API das direkteste verfügbare Werkzeug. Dieser Artikel erklärt, wie die JavaScript-Canvas-zu-Base64-Konvertierung funktioniert, wann sie eingesetzt werden sollte und wo die häufigsten Fallstricke liegen.

Der grundlegende Ablauf

Die Konvertierung eines Bildes in Base64 mit Canvas erfolgt in drei Schritten: Laden Sie das Bild, zeichnen Sie es auf ein Canvas-Element und exportieren Sie dann die Canvas-Daten als kodierten String.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();

image.onload = function () {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);

  const dataURL = canvas.toDataURL('image/png');
  console.log(dataURL); // "data:image/png;base64,iVBORw0KGg..."
};

image.src = '/path/to/local-image.jpg';

Dies ist die Grundlage der Canvas-basierten Bildkodierung. Die Methode toDataURL() gibt einen vollständigen Data-URI zurück, keinen reinen Base64-String.

Data-URL vs. reiner Base64-String

Das Verständnis des Unterschieds ist wichtig. canvas.toDataURL() gibt einen String in diesem Format zurück:

data:image/png;base64,iVBORw0KGg...

Er enthält ein MIME-Type-Präfix, die Kodierungsbezeichnung und dann die eigentlichen Base64-Daten. Wenn Sie nur den reinen Base64-Teil benötigen – beispielsweise um ihn als JSON an einen Server zu senden – entfernen Sie das Präfix:

const base64String = canvas.toDataURL('image/jpeg').split(',')[1];

Dies teilt beim ersten Komma und nimmt alles danach. Das Präfix wird verworfen, und die reinen kodierten Daten bleiben übrig.

toDataURL vs. toBlob: Welche Methode sollten Sie verwenden?

Dies ist die Entscheidung, die die meisten Artikel überspringen. Hier ist ein direkter Vergleich:

toDataURL() ist synchron und praktisch, lädt aber den gesamten kodierten String auf einmal in den Speicher. Base64-Kodierung erhöht die Datengröße um etwa 33% im Vergleich zum ursprünglichen Binärformat. Bei großen Bildern ist das relevant.

toBlob() ist asynchron und erzeugt direkt ein binäres Blob, was für Uploads effizienter ist:

canvas.toBlob((blob) => {
  const formData = new FormData();
  formData.append('image', blob, 'export.jpg');
  fetch('/upload', { method: 'POST', body: formData });
}, 'image/jpeg', 0.85);

Verwenden Sie Base64 nur, wenn Sie ausdrücklich einen String benötigen – zum Einbetten in JSON, zum Speichern in einem Textfeld oder zum Generieren eines Data-URI für ein <img>-Tag. Für Datei-Uploads ist toBlob() die bessere Wahl.

Format-Unterstützung und der Qualitätsparameter

PNG ist das einzige Ausgabeformat, das in allen Browsern garantiert wird. Die Unterstützung für JPEG und WebP hängt von der Umgebung ab:

canvas.toDataURL('image/jpeg', 0.85); // Qualität: 0 bis 1, nur JPEG/WebP
canvas.toDataURL('image/webp', 0.9);  // nicht in allen Browsern unterstützt

Der Qualitätsparameter hat keine Auswirkung auf PNG, das immer verlustfrei ist. Für JPEG ist 0.85 ein vernünftiger Standardwert, der Dateigröße und visuelle Qualität ausbalanciert. Wenn Sie ein nicht unterstütztes Format übergeben, fällt der Browser stillschweigend auf PNG zurück.

Das Problem des „Tainted Canvas”

Wenn Sie ein Cross-Origin-Bild ohne entsprechende CORS-Konfiguration auf ein Canvas zeichnen, wird das Canvas als „tainted” (kontaminiert) markiert. Der Aufruf von toDataURL() oder toBlob() auf einem tainted Canvas löst einen SecurityError aus.

Um dies zu vermeiden, muss der Server, der das Bild hostet, entsprechende CORS-Header (Access-Control-Allow-Origin) senden, und Sie müssen crossOrigin auf dem Image-Element setzen, bevor Sie dessen src zuweisen:

const image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://other-origin.com/image.png';

Die Reihenfolge ist hier entscheidend. Wenn Sie crossOrigin nach src setzen, kann der Browser mit dem Abrufen beginnen, ohne das CORS-Flag zu verwenden, was das Canvas dennoch kontaminiert. Bilder, die vom selben Origin geladen werden, sind nie ein Problem. Cross-Origin-Bilder ohne CORS-Header können nicht exportiert werden – es gibt keine clientseitige Lösung.

Wann Canvas-basierte Kodierung sinnvoll ist

Verwenden Sie den Canvas-Ansatz, wenn Sie:

• Ein Bild clientseitig verkleinern oder zuschneiden müssen, bevor Sie es kodieren
• Filter oder Transformationen anwenden müssen, bevor Sie exportieren
• Kleine verarbeitete Bilder als Data-URIs einbetten möchten

Wenn Sie nur eine lokale Datei als Base64 lesen müssen, ohne Canvas-Manipulation, ist FileReader.readAsDataURL() einfacher und überspringt das Canvas vollständig.

Fazit

Die Canvas API gibt Ihnen präzise Kontrolle über die Bildkodierung im Browser. Verwenden Sie toDataURL() für kleine Bilder und String-basierte Anwendungsfälle, bevorzugen Sie toBlob() für Uploads und leistungskritische Arbeiten, und berücksichtigen Sie immer CORS bei der Arbeit mit externen Bildern. Wenn keine Pixelmanipulation erforderlich ist, überspringen Sie das Canvas ganz und greifen Sie stattdessen zu FileReader.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.