Kategorien
Design HTML/CSS

HTML5: Bildmaskierung mit dem Canvas-Element

Bilder sind von Haus aus immer rechteckig. Dementsprechend lassen sie sich auch nur rechteckig im Browser darstellen. Während es im Printdesign jedoch Möglichkeiten gibt, Bilder mit beliebigen Formen – zum Beispiel mit Ellipsen – zu maskieren, gibt es diese Möglichkeit im Webdesign trotz der aktuellen HTML5- und CSS3-Entwicklung derzeit nur für Webkit-Browser. Mit ein wenig JavaScript jedoch lassen sich Bilder für alle Canvas-unterstützenden Browser mit beliebigen Formen maskieren.


Bildmaskierung mit Canvas

Damit mittels einer JavaScript-Zeichenfunktion Bilder mit einer Form maskiert werden können, müssen alle Bilder, die maskiert werden sollen, mit einem CANVAS-Element umschlossen werden. Zusätzlich wird eine Klasse vergeben, falls CANVAS-Elemente auch für andere Einsätze im Dokument vorhanden sind:

<canvas class="bild_maske"><img src="bild.png" width="300" heigth="200" alt="" /></canvas>

Alles Weitere wird in einer JavaScript-Funktion geregelt. Diese muss entweder am Ende des Dokuments im Body aufgerufen werden oder im Kopf per „window.onload“.

JavaScript für Bildmaskierung

Damit bei mehreren Bildern jedes Bild entsprechend maskiert werden kann, wird per „for“-Schleife jedes CANVAS-Element mit der Klasse „bild_maske“ berücksichtigt:

window.onload = function() {

  for (i = 0; i < document.getElementsByTagName("canvas").length; i++) {

    if (document.getElementsByTagName("canvas")[i].className == "bild_maske") {

      var bild_maske = document.getElementsByTagName("canvas")[i];

In der Variablen „bild_maske“ wird das jeweilige CANVAS-Element referenziert. Auf diese Leinwand zeichnet man anschließend eine Ellipse oder einen Kreis – je nachdem, ob das Bild ein rechteckiges oder quadratisches Seitenverhältnis hat:

      if (bild_maske.getContext) {

        var maske = bild_maske.getContext("2d");

        var breite = bild_maske.firstChild.width;
        var hoehe = bild_maske.firstChild.height;

        var sv = breite / hoehe;
        var radius = hoehe / 2;

        bild_maske.width = breite;
        bild_maske.height = hoehe;

        maske.translate(breite / 2, hoehe / 2);

        maske.scale(sv, 1);
        maske.beginPath();
        maske.arc(0, 0, radius, 0, Math.PI * 2, false);
        maske.clip();

        maske.drawImage(bild_maske.firstChild, -bild_maske.firstChild.width / sv / 2, -bild_maske.firstChild.height / 2, bild_maske.firstChild.width / sv, bild_maske.firstChild.height);

      }

    }

  }

}

Zunächst setzen wir einige Variablen. Die Breite und Höhe des Bildes wird ermittelt und in Variablen gespeichert („breite“ und „hoehe“). Außerdem werden das Seitenverhältnis („sv“) sowie der Radius („radius“) berechnet.

Anschließend setzen wir die Leinwand auf die Größe des Bildes. Per „translate“ verschieben wir dann den Nullpunkt der Leinwand von oben links in die Mitte des Bildes und zeichnen von dort aus den Kreis beziehungsweise die Ellipse.

Da Canvas lediglich eine Funktion zum Zeichnen von Kreisen besitzt, muss zum Erstellen einer Ellipse etwas getrickst werden. Per „scale()“ wird die Breite der Leinwand auf das richtige Seitenverhältnis des Bildes hoch- beziehungsweise herunterskaliert.

Anschließend kann mit „beginPath()“ mit dem Zeichnen begonnen werden. Der Kreis oder die Ellipse werden mit „arc()“ in die Mitte der Leinwand gezeichnet. Das Radius ist so berechnet, dass der gezeichnete Kreis bis zum Rand der Leinwand reicht. Da die Leinwand bei einem rechteckigen Bild verzerrt dargestellt wird, erscheint der Kreis als Ellipse. Per „clip()“ wird festgelegt, dass nur das, was innerhalb der Ellipse liegt, angezeigt werden soll.

Zu guter Letzt wird per „drawImage()“ das Bild in die Ellipse gezeichnet. Da die Leinwand per „scale()“ in der Briete verzerrt wurde, muss das Bild wiederum in die andere Richtung verzerrt werden, indem es durch das Seitenverhältnis geteilt wird.

Nun werden alle entsprechend ausgezeichneten Bilder in einem Kreis oder einer Ellipse dargestellt. Alternativ lässt sich eine Ellipse auch mit Bézierkurven zeichnen. Das ist etwas aufwändiger, hat aber den Vorteil, dass die Leinwand nicht verzerrt werden muss. Statt einer Ellipse lassen sich natürlich auch andere Formen mit den JavaScript-Zeichenfunktionen erstellen.

Eine Demo gibt es bei jsFiddle.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.