Canvas-Bilder
Eine der Funktionen des <canvas>-Elements ist die Möglichkeit, Bilder zu verwenden. Diese können für verschiedene Zwecke eingesetzt werden. Sie können externe Bilder in jedem vom Browser unterstützten Format verwenden (z. B. PNG, GIF oder JPEG). Als Quelle können Sie auch das von anderen Canvas-Elementen erstellte Bild verwenden.
Das Importieren von Bildern in ein Canvas ist ein zweistufiger Prozess:
- Holen Sie sich eine Referenz auf ein anderes Canvas-Element oder ein HTMLImageElement-Objekt als Quelle.
- Zeichnen Sie ein Bild mit der Funktion drawImage() auf das Canvas.
Als Bildquelle kann die Canvas-API einen der folgenden Datentypen verwenden:
| Datentyp | Beschreibung |
|---|---|
| HTMLImageElement | Dies sind Bilder, die mit dem Konstruktor Image() oder einem beliebigen <img>-Element erstellt wurden. |
| SVGImageElement | Dies sind Bilder, die mit dem <image>-Element eingebettet wurden. |
| HTMLVideoElement | Ein HTML-<video>-Element als Bildquelle nimmt das aktuelle Bild aus dem Video und verwendet es als Bild. |
| HTMLCanvasElement | Als Bildquelle können Sie ein anderes <canvas>-Element verwenden. |
Diese Quellen werden zusammen als Typ CanvasImageSource bezeichnet.
Es gibt viele Möglichkeiten, Bilder für die Verwendung auf dem Canvas zu erhalten.
Bilder von derselben Seite verwenden
Sie können mit dem Canvas eine Referenz auf Bilder derselben Seite mit einer der folgenden Möglichkeiten erhalten:
- die document.images-Sammlung
- die Methode document.getElementsByTagName()
- die Methode document.getElementById(), wenn Sie die ID des Bildes kennen, das Sie verwenden möchten
Bilder aus anderen Domains verwenden
Mit dem <img>-Element und dem Attribut crossorigin="anonymous" können Sie die Berechtigung anfordern, ein Bild aus einer anderen Domain zu laden. Wenn die Host-Domain den domänenübergreifenden Zugriff über CORS-Header erlaubt, können Sie das Bild in Ihrem Canvas verwenden, ohne es zu verfälschen.
Hinweis Wenn Sie ein Cross-Origin-Bild ohne korrekte CORS-Konfiguration zeichnen, wird das Canvas „verfälscht“. Ein verfälschtes Canvas schränkt den Zugriff auf seine Daten ein (z. B. löst
toDataURL()einen Fehler aus).
Andere Canvas-Elemente verwenden
Auf andere Canvas-Elemente kann entweder mit der Methode document.getElementById() oder document.getElementsByTagName() zugegriffen werden.
Ein Bild über eine data:-URL einbetten
Data-URLs ermöglichen es, ein Bild direkt im Code als Base64-kodierte Zeichenfolge anzugeben. Der Vorteil der Data-URL ist, dass das resultierende Bild sofort verfügbar ist. Es ist auch möglich, all Ihre CSS, HTML, JavaScript und Bilder in einer Datei zu bündeln.
Es gibt jedoch auch einen Nachteil: Das Bild wird nicht zwischengespeichert, und die kodierte URL kann für größere Bilder zu lang sein.
Ein Bild von Grund auf neu erstellen
Sie können in Ihrem Skript auch ein neues HTMLImageElement-Objekt erstellen. Verwenden Sie dafür den Konstruktor Image():
Ein Bild von Grund auf neu erstellen
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'myImage.png';Das Bild beginnt zu laden, wenn src gesetzt wird. Um sicherzustellen, dass drawImage() erst aufgerufen wird, nachdem das Bild bereit ist, verwenden Sie den Ereignishandler onload.
Die Funktion drawImage()
Sobald eine Referenz auf das Quellbildobjekt verfügbar ist, können Sie die Methode drawImage() verwenden. Diese Methode hat die folgenden Varianten:
- drawImage(image, x, y),
- drawImage(image, x, y, width, height),
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight).
Die grundlegende Form ist drawImage(image, x, y).
Im folgenden Beispiel verwenden wir die Methode document.getElementById(), um eine Referenz auf das Bild zu erhalten, und verwenden dann die Funktion drawImage(), um das Bild zu zeichnen.
Beispiel für das Zeichnen eines Bildes mit der Funktion drawImage():
Beispiel für das Zeichnen eines Bildes mit der Funktion drawImage()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Image</h2>
<img id="photo" src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" />
<h2>Image with canvas:</h2>
<canvas id="exampleCanvas" width="240" height="225" style="border:2px solid #cccccc;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("photo");
ctx.drawImage(img, 20, 20);
};
</script>
</body>
</html>DANGER
SVG-Bilder müssen Breite und Höhe im Wurzel-Element <svg> definieren.
Frames aus einem Video verwenden
Es ist auch möglich, Frames aus einem Video zu verwenden, das von einem <video>-Element dargestellt wird, selbst wenn das Video nicht sichtbar ist. Wenn Sie z. B. ein <video>-Element mit der ID "videoCanvas" haben, gehen Sie wie folgt vor:
Beispiel für das Zeichnen eines Videos mit Canvas:
Canvas-Bilder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Video</h2>
<video controls id="videoCanvas" controls width="350" autoplay>
<source src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<h2>Canvas draws the current video:</h2>
<canvas id="exampleCanvas" width="310" height="190" style="border:1px solid #d3d3d3;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
var v = document.getElementById("videoCanvas");
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var animId;
function drawFrame() {
ctx.drawImage(v, 5, 5, 300, 180);
animId = requestAnimationFrame(drawFrame);
}
v.addEventListener("play", function() {
animId = requestAnimationFrame(drawFrame);
}, false);
v.addEventListener("pause", function() {
cancelAnimationFrame(animId);
}, false);
v.addEventListener("ended", function() {
cancelAnimationFrame(animId);
}, false);
</script>
</body>
</html>Practice
What are the essential steps for drawing an image onto the Canvas in HTML?