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 ⁨Juli 2015⁩.

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

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

Browser sind verpflichtet, image/png zu unterstützen; viele werden zusätzlich Formate wie image/jpeg und image/webp unterstützen.

Die erzeugten Bilddaten werden für Dateiformate, die das Encodieren von Auflösungsmetadaten unterstützen, eine Auflösung von 96dpi haben.

Warnung: toDataURL() codiert das gesamte Bild in einem In-Memory-String. Bei größeren Bildern kann dies Leistungsauswirkungen haben und sogar das Längenlimit für URLs im Browser überschreiten, wenn es zu HTMLImageElement.src zugewiesen wird. Im Allgemeinen sollten Sie eher toBlob() bevorzugen, in Kombination mit URL.createObjectURL().

Syntax

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

Parameter

type Optional: Ein String, der 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 Bildqualität angibt, die verwendet werden soll, wenn Bilder mit Dateiformaten erstellt werden, die verlustbehaftete Komprimierung unterstützen (wie image/jpeg oder image/webp). Ein User-Agent verwendet seinen Standardqualitätswert, wenn diese Option nicht angegeben ist, oder wenn die Zahl außerhalb des erlaubten Bereichs liegt.

Rückgabewert

Ein String, der die angeforderte Daten-URL enthält.

Wenn die Höhe oder Breite der Leinwand 0 ist oder größer als die maximale Leinwandgröße ist, wird der String "data:," zurückgegeben.

Ausnahmen

SecurityError: Das Bitmap der Leinwand ist nicht "origin clean"; mindestens einige ihrer Inhalte wurden oder könnten von einer anderen Seite als derjenigen geladen worden sein, von der das Dokument selbst geladen wurde.

Beispiele

Angenommen, dieses <canvas> Element:

html

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

Sie können eine Daten-URL der Leinwand mit den folgenden Zeilen erhalten:

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

Bildqualität mit JPEGs festlegen

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 vs. Farbe in diesem Beispiel):

HTML

html

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

JavaScript

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);
  }
}

removeColors();

Spezifikationen

Specification
HTML # dom-canvas-todataurl-dev

Browser-Kompatibilität

Siehe auch

Daten-URLs in der HTTP Referenz.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden