HTMLCanvasElement: toBlob() Methode

callback

Eine Callback-Funktion mit dem resultierenden Blob-Objekt als einzigem Argument. null kann übergeben werden, wenn das Bild aus irgendeinem Grund nicht erstellt werden kann.

type Optional

Ein String, der das Bildformat angibt. Der Standardtyp ist image/png; dieser Typ wird auch verwendet, wenn der angegebene Typ nicht unterstützt wird.

quality Optional

Eine Number zwischen 0 und 1, die die Bildqualität angibt, die bei der Erstellung von Bildern mit Dateiformaten verwendet wird, die verlustbehaftete Komprimierung unterstützen (wie image/jpeg oder image/webp). Ein Benutzeragent wird seinen Standard-Qualitätswert verwenden, wenn diese Option nicht angegeben ist oder die Zahl außerhalb des zulässigen Bereichs liegt.

Keiner (undefined).

SecurityError

Das Bitmap des Canvas ist nicht origin-clean; mindestens ein Teil seines Inhalts wurde oder könnte von einer anderen Website als der geladen worden sein, von der das Dokument selbst stammt.

Sobald Sie Inhalte in ein Canvas gezeichnet haben, können Sie es in eine Datei eines unterstützten Bildformats konvertieren. Der unten stehende Codeausschnitt nimmt zum Beispiel das Bild im <canvas>-Element mit der ID "canvas", erhält eine Kopie davon als PNG-Bild und fügt dann ein neues <img>-Element zum Dokument hinzu, dessen Quellbild das mit dem Canvas erstellte Bild ist.

const canvas = document.getElementById("canvas");

canvas.toBlob((blob) => {
  const newImg = document.createElement("img");
  const url = URL.createObjectURL(blob);

  newImg.src = url;
  document.body.appendChild(newImg);
});

Beachten Sie, dass wir hier ein PNG-Bild erstellen; wenn Sie einen zweiten Parameter beim toBlob()-Aufruf hinzufügen, können Sie einen anderen vom Benutzeragenten unterstützten Bildtyp angeben. Zum Beispiel, um das Bild im JPEG-Format zu erhalten:

canvas.toBlob(
  (blob) => {
    /* … */
  },
  "image/jpeg",
  0.95,
); // JPEG at 95% quality

Beachten Sie, dass wir die Objekt-URL nicht sofort widerrufen, nachdem das Bild geladen wurde, da dies das Bild für Benutzerinteraktionen (wie Rechtsklick zum Speichern des Bildes oder Öffnen in einem neuen Tab) unbrauchbar machen würde. Für langlebige Anwendungen sollten Sie Objekt-URLs widerrufen, wenn sie nicht mehr benötigt werden (z. B. wenn das Bild aus dem DOM entfernt wird), um Speicherplatz freizugeben. Dazu rufen Sie die Methode URL.revokeObjectURL() auf und übergeben den Objekt-URL-String.

Dies verwendet -moz-parse, um das Canvas in ico zu konvertieren, und funktioniert daher nur in Firefox. Windows XP unterstützt nicht die Konvertierung von PNG in ico, daher wird stattdessen bmp verwendet. Ein Download-Link wird durch das Setzen des Download-Attributs erstellt. Der Wert des Download-Attributs ist der Name, der als Dateiname verwendet wird.

const canvas = document.getElementById("canvas");
const d = canvas.width;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return (b) => {
    const a = document.createElement("a");
    a.textContent = "Download";
    document.body.appendChild(a);
    a.style.display = "block";
    a.download = `${iconName}.ico`;
    a.href = window.URL.createObjectURL(b);
  };
}
canvas.toBlob(
  blobCallback("passThisString"),
  "image/vnd.microsoft.icon",
  "-moz-parse-options:format=bmp;bpp=32",
);

• Blob