HTMLCanvasElement: toDataURL() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die HTMLCanvasElement.toDataURL()-Methode gibt eine Data-URL zurück, die eine Darstellung des Bildes im Format enthält, das durch den type-Parameter angegeben wird.

Das gewünschte Dateiformat und die Bildqualität können angegeben werden. Wenn das Dateiformat nicht angegeben oder das angegebene Format nicht unterstützt wird, werden die Daten als image/png exportiert. Mit anderen Worten, wenn der zurückgegebene Wert mit data:image/png für einen anderen angeforderten type beginnt, wird dieses Format nicht unterstützt.

Browser sind verpflichtet, image/png zu unterstützen; viele unterstützen zusätzliche Formate, einschließlich image/jpeg und image/webp.

Die erstellten Bilddaten haben eine Auflösung von 96 dpi für Dateiformate, die die Kodierung von Auflösungsmetadaten unterstützen.

Warning: toDataURL() kodiert das gesamte Bild als In-Memory-String. Für größere Bilder kann dies Performance-Auswirkungen haben und möglicherweise die URL-Längenbegrenzung des Browsers überschreiten, wenn sie HTMLImageElement.src zugewiesen wird. Stattdessen sollten Sie in der Regel toBlob() in Kombination mit URL.createObjectURL() bevorzugen.

Syntax

js
toDataURL()
toDataURL(type)
toDataURL(type, quality)

Parameter

type Optional

Eine Zeichenfolge, die das Bildformat angibt. Der Standardtyp ist image/png; dieses Bildformat wird auch verwendet, wenn der angegebene Typ nicht unterstützt wird.

quality Optional

Eine Number zwischen 0 und 1, die die zu verwendende Bildqualität angibt, wenn Bilder mit Dateiformaten erstellt werden, die verlustbehaftete Komprimierung unterstützen (wie image/jpeg oder image/webp). Ein Benutzeragent verwendet seinen Standardqualitätswert, wenn diese Option nicht angegeben wurde oder wenn die Zahl außerhalb des zulässigen Bereichs liegt.

Rückgabewert

Eine Zeichenfolge, die die angeforderte Data-URL enthält.

Wenn die Höhe oder Breite der Leinwand 0 oder größer als die Maximale Canvas-Größe ist, wird die Zeichenfolge "data:," zurückgegeben.

Ausnahmen

SecurityError

Das Bitmap der Canvas ist nicht origin-clean; zumindest einige ihrer Inhalte wurden möglicherweise von einer anderen Website geladen als derjenigen, von der das Dokument selbst geladen wurde.

Beispiele

Gegeben ist dieses <canvas>-Element:

html
<canvas id="canvas" width="5" height="5"></canvas>

Sie können eine Data-URL der Canvas mit den folgenden Zeilen abrufen:

js
const canvas = document.getElementById("canvas");
const dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

Bildqualität für JPEGs einstellen

js
const fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…9oADAMBAAIRAxEAPwD/AD/6AP/Z"
const mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
const lowQuality = canvas.toDataURL("image/jpeg", 0.1);

Beispiel: Bilder dynamisch ändern

Sie können diese Technik in Verbindung mit Mausereignissen verwenden, um Bilder dynamisch zu ändern (Graustufen versus Farbe in diesem Beispiel):

HTML

html
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />

JavaScript

js
window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  const images = document.getElementsByClassName("grayscale");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  for (const colorImg of images) {
    const width = colorImg.offsetWidth;
    const height = colorImg.offsetHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(colorImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, width, height);
    const pix = imgData.data;
    const pixLen = pix.length;
    for (let pixel = 0; pixel < pixLen; pixel += 4) {
      pix[pixel + 2] =
        pix[pixel + 1] =
        pix[pixel] =
          (pix[pixel] + pix[pixel + 1] + pix[pixel + 2]) / 3;
    }
    ctx.putImageData(imgData, 0, 0);
    const grayImg = new Image();
    grayImg.src = canvas.toDataURL();
    grayImg.onmouseover = showColorImg;
    colorImg.onmouseout = showGrayImg;
    ctx.clearRect(0, 0, width, height);
    colorImg.style.display = "none";
    colorImg.parentNode.insertBefore(grayImg, colorImg);
  }
}

Spezifikationen

Specification
HTML
# dom-canvas-todataurl-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
toDataURL
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch