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 mitdata: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 istimage/png
. encoderOptions
Optional- Ein Parameter vom Typ
Number
zwischen0
und1
gibt die Bildqualität an, wenn der Anfragetypimage/jpeg
oderimage/webp ist
.
Wenn das Argument irgend etwas anderes enthält, wird der Standardwert für die Bildqualität verwendet. Der Standardwert liegt bei0.92
. Andere Argumente werden ignoriert.
Rückgabewerte
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
- Das Interface definiert,
HTMLCanvasElement
. - Data URIs in der HTTP Referenz.