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 July 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 spezifiziert werden. Wenn das Dateiformat nicht angegeben wird oder das angegebene Format nicht unterstützt wird, werden 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 unterstützen zusätzliche Formate, einschließlich image/jpeg
und image/webp
.
Die erstellten Bilddaten haben eine Auflösung von 96dpi für Dateiformate, die das Kodieren von Auflösungsmetadaten unterstützen.
Warning:
toDataURL()
kodiert das gesamte Bild in einem im Speicher befindlichen String. Bei größeren Bildern kann dies Leistungseinbußen mit sich bringen und unter Umständen die URL-Längenbegrenzung in Browsern überschreiten, wenn esHTMLImageElement.src
zugewiesen wird. Sie sollten im AllgemeinentoBlob()
in Kombination mitURL.createObjectURL()
bevorzugen.
Syntax
toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)
Parameter
type
Optional-
Ein String, der das Bildformat angibt. Der Standardtyp ist
image/png
; dieses Format wird ebenfalls verwendet, wenn der angegebene Typ nicht unterstützt wird. encoderOptions
Optional-
Ein
Number
zwischen0
und1
, das die Bildqualität angibt, die beim Erstellen von Bildern in Dateiformaten verwendet werden soll, die verlustbehaftete Komprimierung unterstützen (wieimage/jpeg
oderimage/webp
). Ein User-Agent wird seinen Standardqualitätswert verwenden, wenn diese Option nicht angegeben wird oder 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 ein Teil seines Inhalts wurde oder könnte von einer anderen Website geladen worden sein als der, von der das Dokument selbst geladen wurde.
Beispiele
Angenommen, dieses <canvas>
-Element:
<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 bei JPEGs einstellen
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 (Grau- vs. Farbskala in diesem Beispiel):
HTML
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
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() {
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);
}
}
Spezifikationen
Specification |
---|
HTML Standard # dom-canvas-todataurl-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Daten-URLs in der HTTP-Referenz.