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.

canvas.toDataURL(type, encoderOptions);

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.

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

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"

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

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

• Das Interface definiert, HTMLCanvasElement.
• Data URIs in der HTTP Referenz.