Bilder im Canvas

Das <canvas></canvas> Element bietet uns die Möglichkeit mit nur einer Funktion ein Bild einzubinden. Damit sind unserer Kreativität keine Grenzen gesetzt, denn wir können mehrere Bilder einfügen, sie schneiden, bearbeiten, Schriften drüber setzen und allerlei Arten der Bildmanipulation durchführen. Die Bildquelle an sich, kann jedoch sehr vielfältig sein:

  • Bereits bestehende Bilder aus dem HTML-DOM können eingebunden werden
  • Externe Bilder können geladen und anschließend eingebunden werden
  • Base64-kodierte Bilder können eingebunden werden
  • Bereits bestehende Canvas-Elemente können eingebunden werden
  • Video-Elemente können eingebunden werden

Wollen wir ein bereits bestehendes Bild aus dem HTML-DOM rendern, müssen wir uns einfach nur das Element in eine Variable packen und diese dann der drawImage() Methode übergeben:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <img id="image_id" style="display: none;" src="https://www.coding-lab.de/img/tutorials/web/canvas/img.png" /> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = document.getElementById( "image_id" ); var CheckLoad = setInterval( function() { if( Img.complete ) { Context.drawImage( Img, 10, 10 ); clearInterval( CheckLoad ); } }, 100 );

Das obige Beispiel sucht nach einem Element mit der id="image_id". Anschließend wird in einem Intervall von 100 Millisekunden geprüft, ob der Member complete auf true gesetzt wurde. Ist dies der Fall, so wurde das Bild geladen und kann gezeichnet werden.

Wenn wir ein externes Bild laden wollen, können wir entweder ein DOM-Element erstellen und dieses wie im obigen Beispiel rendern oder ein neues ImageObjekt erzeugen:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "https://www.coding-lab.de/img/tutorials/web/canvas/img.png"; Img.onload = function(){ Context.drawImage( Img, 10, 10 ); }

Zunächst wurde ein neues ImageObjekt mithilfe von new Image() erstellt. Dieses Objekt enthält unter anderem die Variable src, welche die Quelle des Bildes annimmt. Dabei können wir zum einen eine beliebige URL aus dem Internet nehmen, einen relativen Pfad oder einen base64-kodierten String. Nachdem die Quelle gesetzt ist, macht es uns das ImageObjekt einfach zu prüfen, wann der Browser das Bild geladen hat und wir es benutzen können. Dafür weisen wir dem Event onload, welches eintritt, sobald das Bild geladen wurde, eine anonyme Funktion zu, die unser Bild malt.

Ebenfalls können wir base64-kodierte Bilder rendern. Dafür benötigen wir lediglich die kodierte Zeichenfolge und können diese als URL angeben. Wichtig ist, dass wir dem Browser mitteilen, dass es sich um ein base64-kodiertes Bild handelt. Aus diesem Grund muss am Anfang der Zeichenkette folgendes Schema eingefügt werden:

data:[<media type>][;charset=<character set>][;base64],<data>

Als "Media Type" müssen wir einen Bildtyp angeben. Sämtliche Medientypen sind in dieser Referenz der IANA zu finden. Da unser Bild vom Typ PNG ist, müssen wir image/png wählen. Der Zeichensatz ist utf-8 und als letztes teilen wir noch mit, dass es sich um einen base64-kodierten Mediatypen handelt. Unser Informations-String sieht demnach wie folgt aus:

data:image/png;charset=utf-8;base64,

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "data:image/png;charset=utf-8;base64,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"; Img.onload = function(){ Context.drawImage( Img, 10, 10 ); }

Möchten wir ein anderes Canvas-Element rendern, müssen wir einfach nur unsere Referenz aus dem HTML-DOM angeben:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_img" width="600" height="200" style="display: none;"></canvas> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var CanvasImg = document.getElementById( "canvas_img" ); var ContextImg = CanvasImg.getContext( "2d" ); var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "https://www.coding-lab.de/img/tutorials/web/canvas/img.png"; Img.onload = function() { ContextImg.drawImage( Img, 10, 10 ); Context.drawImage( CanvasImg, 0, 0 ); }

Im obigen Beispiel haben wir zwei Canvas-Elemente. In dem einen rendern wir zunächst unser Bild und benutzen es anschließend für die drawImage() Methode des sichtbaren Canvas als Bildquelle.

Als letztes haben wir noch die Möglichkeit das Video-Element in unseren Canvas einzubinden:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <video id="video_id" src="https://www.coding-lab.de/res/tutorials/web/html5/big-buck-bunny.mp4" controls ></video> <canvas id="canvas_id" width="350" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Vid = document.getElementById ( "video_id" ); Vid.addEventListener( "play", function () { Context.drawImage( Vid, 0, 0 ); }, false );

Unser obiger Code sieht im Vergleich zu den anderen ein wenig verändert aus. Dafür sollten wir noch ein paar Kleinigkeiten wissen:

Wir könnten natürlich auch bei dem Video-Element prüfen, ob das Video geladen wurde, allerdings hängt dies vom preload Attribut des Elements ab. Aus diesem Grund behelfen wir uns mit einem kleinen Trick. Sobald das Video abgespielt wird, tritt das Event play ein. Die nötigen Videodaten müssten demnach gepuffert sein und können verwendet werden. Im obigen Beispiel erstellt unser Code einen Screenshot, sobald die Play-Taste gedrückt wurde.

Wenn wir diesen Vorgang in einer bestimmten Geschwindigkeit wiederholen, können wir uns einen eigenen Videoplayer basteln:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <video id="video_id" src="https://www.coding-lab.de/res/tutorials/web/html5/big-buck-bunny.mp4" controls ></video> <canvas id="canvas_id" width="350" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Vid = document.getElementById ( "video_id" ); Vid.addEventListener( "play", function () { DrawVid(); }, false ); function DrawVid() { if( Vid.paused || Vid.ended) return false; Context.drawImage( Vid, 0, 0 ); setTimeout( DrawVid, (1000/25) ); }

25 Bilder pro Sekunde benötigen wir Minimum, damit das menschliche Auge ein Video heraus simuliert. Deswegen haben wir die Funktion draw() mit setTimeout( DrawVid, (1000/25) ) genau 25 Mal in der Sekunde aufgerufen. Die Methode selbst prüft, ob das Video zu Ende (ended) oder im Pause-Modus (paused) ist und malt anschließend unsere Bilder. Zugegeben ist unser Video recht ruckelig, sodass wir die Anzahl der gemalten Bilder, die im übrigen FPS genannt werden, erhöhen können, indem wir die Timeout-Zeit heruntersetzen: setTimeout( DrawVid, 25 ).

DrawImage

Die Funktion drawImage() ist für das rendern von Bildern zuständig. Sie hat drei Funktions-Überladungen:

ÜberladungBeschreibung
drawImage( img, x, y )img : Referenz zum Bild.

x : Gibt die X-Koordinate des Startpunktes an.

y : Gibt die Y-Koordinate des Startpunktes an.
drawImage( img, x, y, w, h )img : Referenz zum Bild.

x : Gibt die X-Koordinate des Startpunktes an.

y : Gibt die Y-Koordinate des Startpunktes an.

w : Gibt die Breite des Bildes an.

h : Gibt die Höhe des Bildes an.
drawImage( img, sx, sy, sw, sh, x, y, w, h )img : Referenz zum Bild.

sx : Gibt die X-Koordinate an, ab der das Bild ausgeschnitten werden soll.

sy : Gibt die Y-Koordinate an, ab der das Bild ausgeschnitten werden soll.

sw : Gibt die Breite des Bildausschnitts an.

sh : Gibt die Höhe des Bildausschnitts an.

x : Gibt die X-Koordinate des Startpunktes an.

y : Gibt die Y-Koordinate des Startpunktes an.

w : Gibt die Breite des Bildes an.

h : Gibt die Höhe des Bildes an.

Die erste Überladung nimmt drei Parameter an: Die Referenz zum Bild, sowie die X- und Y-Koordinaten der Stelle, an der das Bild gerendert werden soll:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "https://www.coding-lab.de/img/tutorials/web/canvas/img.png"; Img.onload = function(){ Context.drawImage( Img, 10, 10 ); }

Bei der zweiten Überladung können wir zwei zusätzliche Parameter angeben: Die Breite und Höhe des Bildes. Auf diese Weise können wir also unser Bild skaliert anzeigen:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "https://www.coding-lab.de/img/tutorials/web/canvas/img.png"; Img.onload = function(){ Context.drawImage( Img, 10, 10, 50, 50 ); }

Mit der letzten Überladung können wir einen Teilbereich des Bildes ausschneiden und diesen in einer gewünschten Größe anzeigen. Hierbei wurde die Reihenfolge der Parameter abgeändert. Zunächst wird das Bild angenommen, anschließend folgt der Startpunkt ( X- und Y-Koordinate ), sowie die Breite und Höhe des Ausschnitts. Als letztes folgen unsere bereits bekannten Parameter des Anzeige-Startpunktes, Breite und Höhe:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "https://www.coding-lab.de/img/tutorials/web/canvas/img.png"; Img.onload = function(){ Context.drawImage( Img, 60, 0, 80, 100, 10, 10, 180, 180 ); }

Das untere Schaubild sollte das obige Beispiel ein wenig besser Durchleuchten:

Teilbereiche von Bildern rendern - CodingLab

Das ImageData Objekt

Mit unserem Canvas haben wir die Möglichkeit einzelne Pixel zu manipulieren. Dafür gibt es das ImageData Objekt, welches drei read-only Member hält:

MemberBeschreibung
widthGibt die Breite des Bildes an.
heightGibt die Höhe des Bildes an.
dataEin eindimensionales Array, welches die einzelnen Pixelwerte von 0 bis 255 hält.

Mithilfe dieses Objekts können wir jedes einzelne Pixel manipulieren. Dafür müssen wir wissen, wie der Member data aufgebaut ist:

ImageDataArray - CodingLab

Ein Irrtum ist, dass ein ImageData Objekt immer das gesamte Bild repräsentiert. Wir können ImageData Objekte mit beliebiger Größe erstellen und auf unserem Canvas rendern. Stellen wir uns ein Bild mit 3x3 Pixeln vor. Jeder Pixel hat einen Rot, Grün, Blau und Alpha (RGBA) Anteil, wobei letzterer die Transparenz angibt. Die Werte der einzelnen Array-Indexe sind von 0 bis 255 festgelegt. Standardmäßig sind alle Farbanteile mit dem Wert 0 initialisiert. Das wir keine schwarze Farbe sehen, liegt einfach nur daran, dass der Alpha-Anteil ebenfalls mit 0 initialisiert wurde und dies komplette Transparenz bedeutet.

Da wir ein eindimensionales Array haben, werden alle Werte nacheinander in dem Array weggeschrieben. Wollten wir also den Grün-Anteil des aller ersten Pixels verändern, müssten wir auf den zweiten Index unseres Arrays zugreifen

ImageData.data[1] = 100;

Bei Arrays gibt es zwei wichtige Merkmale zu beachten:

  1. Die Indexe werden bei 0 angefangen zu zählen
  2. Auf einen Index können wir mithilfe des Index-Operators zugreifen: []

Um den blauen Farbanteil des 6. Pixel zu verändern, müssen wir jeden Pixel mal 4 rechnen, da jeder Pixel vier Farbanteile hat. Doch hier ist Vorsicht geboten, denn wie bereits erwähnt, fängt der Array-Index ab 0 an. Somit müssen wir einen Pixel abziehen, also: 5 * 4 = 20.

ImageData.data[20 + 2] = 255;

Im obigen Beispiel haben wir 2 dazu gezählt, da der Index 20 den roten Farbanteil hat und zwei weitere der blaue zu finden ist. Das gibt uns die Konstanten:

  • Rot = 0
  • Grün = 1
  • Blau = 2
  • Alpha = 3

Für die Berechnung von Pixeln der zweiten Zeile, müssen wir natürlich die erste Zeil hinzuaddieren. Die erste Zeile ist unsere Breite. Das gibt uns die Formel:

( Breite * (Höhe-1) * 4 ) + ( (Pixel-1) * 4 ) + KONSTANTE

Auch hier ist daran zu denken, dass wir, wegen des Array-Indexes, von der Höhe eine Zeile abziehen. Für den Alpha-Anteil des zweiten Pixels der 3. Zeile, bekommen wir also:

( 3 * (3-1) * 4 ) + ( 1 * 4 ) + 3 = 31

ImageData Objekt erstellen

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Width = Height = 3; var Zeile = 3, Pixel = 2; var Red = 0, Green = 1, Blue = 2, Alpha = 3; var ImgData = Context.createImageData( Width, Height ); var Index = ( Width * (Height-1) * 4 ) + ( (Pixel-1) * 4 ); ImgData.data[Index + Red ] = 0; ImgData.data[Index + Green] = 255; ImgData.data[Index + Blue ] = 0; ImgData.data[Index + Alpha] = 255; Context.putImageData( ImgData, 20, 20 );

Im obigen Beispiel haben wir mit der Methode createImageData() ein DataImage Objekt erzeugt. Diese Funktion hat zwei Überladungen und nimmt folgende Parameter an:

ÜberladungBeschreibung
createImageData
( w, h )
w : Breite des ImageData Objekts.

h : Höhe des ImageData Objekts.
createImageData
( imgdata )
imgdata : Ein bestehendes ImageData Objekt, wovon die Breite und Höhe übernommen werden soll. Das DataArray selbst wird nicht übernommen.

Nun können wir auf das DataArray selbst zugreifen. Dafür gibt es den Member data. Für die Berechnung des 2. Pixels der 3. Zeile haben wir den Index errechnet und anschließend alle Farbanteile gesetzt. Wer den grünen Punkt nicht sieht, muss unser Canvas vergrößern, denn mit der Methode putImageData() haben wir unser Objekt an der Stelle 20/20 gerendert.

Die Methode putImageData()

Um unser ImageData Objekt auf die Leinwand bringen zu können, benötigen wir die Methode putImageData() welche zwei Überladungen mit sich bringt:

ÜberladungBeschreibung
putImageData( imgdata, x, y )imgdata : Referenz zum ImageData Objekt.

x : Gibt die X-Koordinate des Startpunkts, an der die Daten gerendert werden sollen.

y : Gibt die Y-Koordinate des Startpunkts, an der die Daten gerendert werden sollen.
putImageData( imgdata, x, y, dx, dy, dw, dh )imgdata : Referenz zum ImageData Objekt.

x : Gibt die X-Koordinate des Startpunkts, an der die Daten gerendert werden sollen.

y : Gibt die Y-Koordinate des Startpunkts, an der die Daten gerendert werden sollen.

dx : Gibt die X-Koordinate des Rechtecks, welcher vom DataArray benutzt werden soll.

dy : Gibt die Y-Koordinate des Rechtecks, welcher vom DataArray benutzt werden soll.

dw : Gibt die Breite der zu zeichnenden Fläche des DataArrays an.

dy : Gibt die Höhe der zu zeichnenden Fläche des DataArrays an.

Die am meisten genutzte und einfachste Form dieser Methode nimmt drei Parameter an und zeichnet unser ImageData Objekt an der Stelle x/y:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Width = 50; var Height = 50; var ImgData = Context.createImageData( Width, Height ); for( var i = 0; i < ImgData.data.length; i += 4 ) { ImgData.data[i ] = 255; //Rot ImgData.data[i + 1] = 0; //Grün ImgData.data[i + 2] = 0; //Blau ImgData.data[i + 3] = 255; //Alpha } Context.putImageData( ImgData, (Canvas.width>>1)-(Width>>1), (Canvas.height>>1)-(Height>>1) );

Der obige Code setzt jeden Rot-Anteil und Alpha-Anteil auf den Maximalwert und zeichnet das rote Quadrat mittig im Canvas. Das nächste Beispiel zeigt die Verwendung der zweiten Überladung:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.fillStyle = "#F00"; //Rot Context.fillRect( 0, 0, 50, 50 ); Context.fillStyle = "#00F"; //Blau Context.fillRect( 10, 10, 30, 30 ); var ImgData = Context.getImageData( 0, 0, 50, 50 ); Context.putImageData( ImgData, 50, 50, 10, 10, 30, 30 );

Mit den letzten vier Parametern der Methode geben wir lediglich an, welchen Bereich des DataArrays wir tatsächlich rendern wollen. Dabei ist zu beachten, dass die Breite und Höhe gleich bleibt. Aus diesem Grund wird das blaue Rechteck nicht direkt beim Punkt 50/50 gezeichnet.

Die Methode getImageData()

Wir können uns natürlich auch ein ImageData Objekt von unserem Canvas generieren lassen. Dafür gibt es die Methode getImageData() mit den Parametern:

MethodeBeschreibung
getImageData( x, y, w, h )x : Gibt die X-Koordinate des Startpunkts an, von dem aus kopiert werden soll.

x : Gibt die Y-Koordinate des Startpunkts an, von dem aus kopiert werden soll.

w : Gibt die Breite der zu kopierenden Fläche an.

h : Gibt die Höhe der zu kopierenden Fläche an.
  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Img = new Image(); Img.src = "https://www.coding-lab.de/img/tutorials/web/canvas/img.png"; Img.onload = function() { Context.drawImage( Img, 10, 10 ); var ImgData = Context.getImageData( 10, 10, 180, 180 ); //Daten invertieren = Auf Maximum setzen und vorherigen Wert abziehen for( var i = 0; i < ImgData.data.length; i += 4 ) { ImgData.data[i ] = 255 - ImgData.data[i ]; // Rot ImgData.data[i + 1] = 255 - ImgData.data[i + 1]; // Grün ImgData.data[i + 2] = 255 - ImgData.data[i + 2]; // Blau } Context.putImageData( ImgData, 200, 10 ); }

Das obige Beispiel zeigt als Erstes die Verwendung von getImageData(). Wir zeichnen zunächst das CodingLab-Logo mit den Dimensionen 180px/180px an der Stelle 10/10 und holen uns von diesem Punkt aus auch die Bilddaten. Nun haben wir jeden einzelnen Farbanteil jedes Pixels in unserem Objekt und können einfachste bis hin zu komplexen Bild-Manipulationen durchführen. Hier wurde der Einfachheit halber ein Algorithmus zum Invertieren angewendet.