HTML5: Video-Manipulation mit Canvas

Pixel in Canvas kopieren

Auf ein Canvas-Element kann man mit der drawImage() ganz einfach fertige Grafiken zeichnen - dazu gibt man einfach neben den Ziel-Koordinaten ein HTML-Element an, das als Datenquelle dienen soll. Als Quelle können neben <img>-Elementen auch Canvas- oder Video-Elemente fungieren, da man die Videoframes in die Zwischenablage kopieren kann.

Um in die Pixeldaten des Frames zu kopieren, muss man die Funktion getImageData() in der Zwischenablage aktivieren. Diese gibt ein so genanntes ImageData-Objekt zurück, das die Farbwerte jedes einzelnen Pixels enthält. Aktiviert man die gleiche Funktion für die Ziel-Canvas, ist die Bilder- bzw. Videokopie-Funktion komplett.

// Diese Funktion kopiert Pixel von "film" in "zwischenablage", dann in "ziel"

function copy(){

zwischenablage.drawImage(film, 0, 0);

var bilddaten = zwischenablage.getImageData(0, 0, 320, 180);

ziel.putImageData(bilddaten, 0, 0);

}

Dazu kommt noch der Aufruf der copy()-Funktion in dem Animationsloop:

// Die Kopier-Schleife

function loop(){

if(!film.paused){

copy(); // Frames kopieren

animate(loop);

}

}

Durch den Doppelschritt beim Kopieren hat man mit dem ImageData-Objekt den Zugriff auf die Farbwerte jedes einzelnen Pixels in jedem Videoframe, so dass es nicht schwer fällt, die Farben des Bildes zu verändern.