Für ein kleines Fun Projekt wollte ich auf einer Internetseite die Bilder von Personen invertieren und habe dafür ein wenig mit dem Canvas Element rumgebastelt.
Bei einem Click auf einen Link wird eine zufällige Person aus dieser Liste ausgewählt, die Pixel des Bildes werden invertiert und dann wieder als dataUri zurückgegeben.
Raus gekommen ist dabei folgendes:
var person = all.eq(Math.floor(Math.random() * 5));
// bei der Erstellung des Canvas Elementes mit
// jQuery wurde die Größe nicht korrekt übernommen,
// daher auf dem "klassichem" Wege
var $canvas = document.createElement("canvas");
$canvas.width = 210;
$canvas.height = 98;
var ctx = $canvas.getContext('2d');
var img = person.get(0);
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, $canvas.width, $canvas.height);
var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height);
var pixels = imageData.data;
var numPixels = imageData.width * imageData.height;
for (var i = 0; i < numPixels; i++) {
pixels[i * 4] = 255 - pixels[i * 4];
pixels[i * 4 + 1] = 255 - pixels[i * 4 + 1];
pixels[i * 4 + 2] = 255 - pixels[i * 4 + 2];
};
ctx.putImageData(imageData, 0, 0);
// Daten wieder zurückschreiben
person.attr('src', $canvas.toDataURL('image/jpeg'));
Als Grundlage habe ich mich auf diese fantastischen Tutorials gestütz:
http://css.dzone.com/articles/html5-image-effects-sepia
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/