HTMLCanvasElement.toDataURL()

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die HTMLCanvasElement.toDataURL() Methode gibt eine data URI zurück welche eine Representation des Bildes zurück gibt. Diese wird von den angegebenen Parametern vorgegeben (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
WHATWG HTML Living Standard
Die Definition von 'HTMLCanvasElement.toDataURL' in dieser Spezifikation.
Lebender Standard Keine Änderungen seit letztem Schnappschuss, HTML5
HTML5.1
Die Definition von 'HTMLCanvasElement.toDataURL' in dieser Spezifikation.
Arbeitsentwurf  
HTML5
Die Definition von 'HTMLCanvasElement.toDataURL' in dieser Spezifikation.
Empfehlung Schnappschuss von WHATWG HTML Living Standard beinhaltet ursprüngliche Definition.

Browser Kompatiblität

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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: rkeller1
 Zuletzt aktualisiert von: rkeller1,