Bildbearbeitung mit HTML5

Mit dem Canvas-Element von HTML5 kann man vieles machen. Man kann zum Beispiel aus Bildbearbeitungsprogrammen bekannte Filter-Funktionen, wie zum Beispiel das Negieren eines Bildes nachbauen. Und genau das werde ich heute mit euch machen.

Bild in das Canvas laden

Als erstes müssen wir ein Bild in das Canvas-Element laden. Dieses muss aus Sicherheitsgründen auf der gleichen Domain liegen. Fangen wir mal an mit der HTML-Datei:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 5 Bildbearbeitung</title>
    <script src="imageeditor.js" type="text/javascript"></script>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Hier wird einfach nur ein Canvas-Element platziert und das Script imageeditor.js geladen. Dieses Script müssen wir jetzt erstellen:

function ImageEditor(imageUrl,canvasId)
{
  //Den Context brauchen wir um mit den Canvas zu interagieren
  var context = document.getElementById(canvasId).getContext('2d');

  //Ein neues Image-Objekt erstellen
  var image = new Image();

  //Die im Parameter angegebene Url laden
  image.src = imageUrl;

  //Wenn das Bild fertig geladen hat, können wir weiter machen
  image.onload = function(){
    //Das Canvas soll die gleiche Größe haben, 
    //wie das Bild
    document.getElementById(canvasId).width = image.width;
    document.getElementById(canvasId).height = image.height;

    //Bild in das Canvas zeichnen
    context.drawImage(image,0,0);
  }

}

Diese Funktion soll später als Klasse interagieren. Wir benötigen ein context-Objekt, mit welchen gezeichnet werden kann. Dieses Objekt wird über die, als Parameter übergebene, ID des Canvas-Elements erstellt. Hauptverantwortlich für die Bilder ist das Image-Objekt. Dies bietet die Funktion onLoad, die aufgerufen wird, wenn das Bild vollständig heruntergeladen wurde.

Jetzt müssen wir das ganze nur Noch in der HTML-Datei aufrufen:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 5 Bildbearbeitung</title>
    <script src="imageeditor.js" type="text/javascript"></script>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
      var editor = new ImageEditor('avatar.jpg','canvas');
    </script>
  </body>
</html>

Wenn jetzt die Datei avatar.jpg im Ordner liegt und der Browser das Canvas schon unterstützt, sollte nun das Bild angezeigt werden. Beispiel anzeigen

Bild negieren

Ist das Bild geladen, können wir mit dem Bearbeiten anfangen. Als Beispiel habe ich mir das Negieren des Bildes überlegt. Dafür erweitere ich den ImageEditor um die Funktion invert:

function ImageEditor(imageUrl,canvasId)
{
  //Den Context brauchen wir um mit den Canvas zu interagieren
  var context = document.getElementById(canvasId).getContext('2d');

  //Ein neues Image-Objekt erstellen
  var image = new Image();
  
  //Bild noch nicht geladen
  var ready = false;
  
  //Die im Parameter angegebene Url laden
  image.src = imageUrl;

  //Wenn das Bild fertig geladen hat, können wir weiter machen
  image.onload = function(){
    //Das Canvas soll die gleiche Größe haben, 
    //wie das Bild
    document.getElementById(canvasId).width = image.width;
    document.getElementById(canvasId).height = image.height;
    
    //Bild in das Canvas zeichnen
    context.drawImage(image,0,0);
	
	//Bild geladen
	ready = true;
  }
  
  //Neue Funktion zum Farben-Umdrehen
  this.invert = function ()
  {
    //wenn das Bild noch nicht geladen hat, können
    //wir dies noch nicht bearbeiten.
    if(!ready)
    {
      //Deswegen warten wir einfach 100ms und versuchen es dann erneut.
      setTimeout(this.invert,100);
    }
    else
    {
      //Aus dem Context das Bild laden.
      var image_data = context.getImageData(0, 0, image.width, image.height);
  
      //Aus den Bilddaten ein Array von Pixeln holen
      var pixel = image_data.data;

      for (var i = 0, n = pixel.length; i < n; i += 4)
      {
        //Zum negieren vom max. Farbwert den aktuellen Farbwert
        //abziehen
        pixel[i]   = 255 - pixel[i]; //Rot
        pixel[i+1] = 255 - pixel[i+1]; //Grün
        pixel[i+2] = 255 - pixel[i+2]; //Blau
    
        //Der vierte Eintrag, ist der Wert für die Transparenz
      }

      //Das Bild neu zeichnen.
      context.putImageData(image_data, 0, 0);
	}
  }
  
}

Mit der Funktion getImageData bekommt man ein Array mit den Farbwerten des Bildes. Dabei stehen 4 Werte für je ein Pixel. Die Reihenfolge ist dort folgendermaßen:

Rot-Wert
Grün-Wert
Blau-Wert
Alpha-Wert

Diese Werte können wir nach Belieben ändern und somit das Bild bearbeiten. In unserem Beispiel werden alle Pixel durchlaufen und negiert. Das geht, wenn man den maximalen Wert(255) minus den aktuellen Farbwert nimmt.

Ich habe mit der Variable ready eine Überprüfung eingebaut, ob das Bild geladen wurde. Ist das nicht der Fall, wird noch 100ms gewartet. Ohne ein geladenes Bild wird es nämlich einen Fehler geben.

Jetzt muss die Funktion nur noch in der index.html aufgerufen werden und unser Bild wird negiert:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 5 Bildbearbeitung</title>
    <script src="imageeditor.js" type="text/javascript"></script>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
      var editor = new ImageEditor('avatar.jpg','canvas');
      editor.invert();
    </script>
  </body>
</html>

Beispiel online ansehen

Aufgabe für dich

Den ImageEditor kannst du nun durch eigene Funktionen erweitern. Eine leichte Übungsaufgabe ist es, das Bild in ein Schwarz-Weiß Bild umzuwandeln. Ich habe dies schon gemacht, wenn du nicht weiterkommst schick ich dir mein Ergebnis 😉

Ansonsten kannst du aber auch einfach mal ein Bildbearbeitungsprogramm deiner Wahl öffnen und versuchen andere Filter und Funktionen einzubauen. Beispiele:

Comic-Filter
Farbfilter
Bilderrahmen erstellen

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Henning schrieb am 19.03.2012:

Aber ist das nicht eigentlich ein Beispiel wie man mit js ein Bild bearbeitet weil mit HTML bearbeite ich das Bild ja nicht sondern mit JavaScript

Stefan Wienströer schrieb am 19.03.2012:

Streng genommen ist es HTML und JavaScript. Ich spreche jedoch hier von HTML5, da das Canvas beim HTML5 dazu gekommen ist.

Dirk Müller schrieb am 05.04.2012:

Sieht sehr kompliziert aus, aber trotzdem danke, dass du dir so viel Mühe gemacht hast. Vielleicht verstehe ich es ja, wenn ich es nochmal durchlese ;) Gruß Dirk

Lisa Siebel schrieb am 28.05.2014:

Danke für das Tutorial, konnte heute deswegen auch ohne stabile Netzverbindung an meinem Projekt arbeiten <3

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project