Der Inhalt dieser Seite wurde von der Community übersetzt, jedoch wird er nicht mehr aktiv gepflegt und kann daher veraltet sein. Wenn du mithelfen möchtest, kannst du hier herausfinden wie deaktivierte Übersetzungen reaktiviert werden können.

HTMLCanvasElement.toDataURL()

Die HTMLCanvasElement.toDataURL()-Methode gibt eine Repräsentation des Bildes als data URI zurück. Das gewünschte Format wird mit den angegebenen Parametern definiert (standardmäßig PNG). Das zurückgegebene Bild besitzt eine Auflösung von 96 dpi.

  • Wenn die Höhe oder die Breite des Canvas 0 ist, wird der String "data:," zurückgegeben.
  • Wenn die Art der Anfrage nicht image/png ist, aber der zurückgegebene Wert mit data:image/png beginnt, dann wird die Anfrage nicht unterstützt.
  • Chrome unterstützt außerdem den Typ image/webp.

Syntax

canvas.toDataURL(type, encoderOptions);

Parameter

type Optional
Ein Parameter vom Typ DOMString bestimmt das Bild-Format. Der Standard type ist image/png.
encoderOptions Optional
Ein Parameter vom Typ Number zwischen 0 und 1 gibt die Bildqualität an, wenn der Anfragetyp image/jpeg oder image/webp ist.
Wenn das Argument irgend etwas anderes enthält, wird der Standardwert für die Bildqualität verwendet. Der Standardwert liegt bei 0.92. Andere Argumente werden ignoriert.

Rückgabewerte

Ein Rückgabewert vom Typ DOMString beinhaltet die angefragte data URI.

Beispiele

Es ist folgendes <canvas> Element gegeben:

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

Mit den folgenden Zeilen erhalten Sie die data-URL des Canvas:

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

Die Bildqualität für jpegs einstellen

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

Beispiel: Dynamisches Ändern von Bildern

Sie können diese Technik in Verbindung mit Maus-Events nutzen, um dynamisch Bilder abzuändern (in diesem Beispiel schwarz-weiß und farbig):

HTML

<img class="schwarz-weiss" src="myPicture.png" alt="Beschreibung meines Bildes" />

JavaScript

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() {
  var aImages = document.getElementsByClassName("schwarz-weiss"),
      nImgsLen = aImages.length,
      oCanvas = document.createElement("canvas"),
      oCtx = oCanvas.getContext("2d");
  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}

Spezifikationen

Spezifikation Status Kommentare
HTML Living Standard
Die Definition von 'HTMLCanvasElement.toDataURL' in dieser Spezifikation.		 Lebender Standard Keine Änderungen seit letztem Schnappschuss, HTML5
HTML 5.1
Die Definition von 'HTMLCanvasElement.toDataURL' in dieser Spezifikation.		 Empfehlung  
HTML5
Die Definition von 'HTMLCanvasElement.toDataURL' in dieser Spezifikation.		 Empfehlung Schnappschuss von HTML Living Standard beinhaltet ursprüngliche Definition.

Browser-Kompatiblität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4 3.6 (1.9.2) 9 9 4.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.2 18 1.0 (1.9.2) (Ja) 19 3.0

Schauen Sie auch unter