Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Juli 2015.
DieHTMLCanvasElement.toDataURL() Methode gibt eineDaten-URL zurück, die eine Darstellung des Bildes im durch dentype Parameter angegebenen Format enthält.
Das gewünschte Dateiformat und die Bildqualität können angegeben werden.Wenn das Dateiformat nicht angegeben ist oder das angegebene Format nicht unterstützt wird, wird die Daten alsimage/png exportiert.Mit anderen Worten, wenn der zurückgegebene Wert mitdata:image/png für jeden anderen angefordertentype beginnt, wird dieses Format nicht unterstützt.
Browser sind verpflichtet,image/png zu unterstützen; viele werden zusätzlich Formate wieimage/jpeg undimage/webp unterstützen.
Die erzeugten Bilddaten werden für Dateiformate, die das Encodieren von Auflösungsmetadaten unterstützen, eine Auflösung von 96dpi haben.
Warnung:toDataURL() codiert das gesamte Bild in einem In-Memory-String. Bei größeren Bildern kann dies Leistungsauswirkungen haben und sogar das Längenlimit für URLs im Browser überschreiten, wenn es zuHTMLImageElement.src zugewiesen wird. Im Allgemeinen sollten Sie ehertoBlob() bevorzugen, in Kombination mitURL.createObjectURL().
Syntax
toDataURL()toDataURL(type)toDataURL(type, quality)Parameter
typeOptionalEin String, der das Bildformat angibt.Der Standardtyp ist
image/png; dieses Bildformat wird auch verwendet, wenn der angegebene Typ nicht unterstützt wird.qualityOptionalEine
Numberzwischen0und1, die die Bildqualität angibt, die verwendet werden soll, wenn Bilder mit Dateiformaten erstellt werden, die verlustbehaftete Komprimierung unterstützen (wieimage/jpegoderimage/webp).Ein User-Agent verwendet seinen Standardqualitätswert, wenn diese Option nicht angegeben ist, oder wenn die Zahl außerhalb des erlaubten Bereichs liegt.
Rückgabewert
Ein String, der die angeforderteDaten-URL enthält.
Wenn die Höhe oder Breite der Leinwand0 ist oder größer als diemaximale Leinwandgröße ist, wird der String"data:," zurückgegeben.
Ausnahmen
SecurityErrorDas Bitmap der Leinwand ist nicht "origin clean";mindestens einige ihrer Inhalte wurden oder könnten von einer anderen Seite als derjenigen geladen worden sein, von der das Dokument selbst geladen wurde.
Beispiele
Angenommen, dieses<canvas> Element:
<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 mit JPEGs festlegen
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 (Graustufen vs. Farbe in diesem Beispiel):
HTML
<img src="myPicture.png" alt="Description of my picture" />JavaScript
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); }}removeColors();Spezifikationen
| Specification |
|---|
| HTML # dom-canvas-todataurl-dev |
Browser-Kompatibilität
Siehe auch
- Daten-URLs in derHTTP Referenz.