Zwei Bilder in <canvas> überblenden

Das Beispiel wurde getestet in FF 3.6, Opera 10.6, Konqueror 4.5 und Chromium 7.

Das überblenden löse ich durch Pixelmanipulation. Es gibt ein <canvas>-Element mit id="canvas" und folgenden Code, der hinter dem Canvas im <script>-Tag steht:

//Context des Canvas holen
var canvas = document.getElementById( "canvas");
var context = canvas.getContext( "2d");

//Bilder Laden
var img1 = new Image();
img1.src = 'data/tutorials/webdev/uebergang_mit_canvas/images/image0.jpg';//Bilddaatei 1

var img2 = new Image();
img2.src = 'data/tutorials/webdev/uebergang_mit_canvas/images/image1.jpg';//Bilddaatei 2

var blend = new Image();
blend.src = 'data/tutorials/webdev/uebergang_mit_canvas/images/blend0.jpg';//Überblendungsdatei: Schwarz: Volle Überblendung, Weiß: keine Überblendung

//Für jedes Bild eine ImageData-Variable anlegen
context.drawImage(blend, 0, 0);
var imgd_blend = context.getImageData(0, 0, blend.width, blend.height);
var pix_blend = imgd_blend.data;

context.drawImage(img1, 0, 0);
var imgd1 = context.getImageData(0, 0, blend.width, blend.height);
var pix1 = imgd1.data;

context.drawImage(img2, 0, 0);
var imgd2 = context.getImageData(0, 0, blend.width, blend.height);
var pix2 = imgd2.data;

//Jedes Pixel neu berechnen:
//Pixel sind immer: rot, grün, blau, alpha, rot, grün, blau, ...

for (var i = 0, n = pix1.length; i<n; i ++) {
  //Gib dem Pixel seinen Farbwert*Wert des Verlaufbildes + den Farbwert des 2ten Bildes*Wert des Verlaufbildes
  pix1[i] = parseInt(pix1[i]*pix_blend[i]/255+pix2[i]*(255-pix_blend[i])/255);
}

//Schreibe die Bddaten wieder auf den Context;
context.putImageData(imgd1, 0, 0);

HINWEIS: Bei FF ist es wichtig, dass die Bilder vor dem überblenden vollständig geladen sind, da er sonst eine Exception ausgiebt.

Beispiel:

Bild1: Bild2: Überblendungsdatei:

Bild 1Bild 2Bild 3
bild1bild2blend

Kommentare

Noch keine Kommentare.