Random Image
VisitorDate: 07/02/2008 Views: 14277 |
|
|||||||||||||||||||||
function grayscale(canvas){
var channels = {r: 0, g: 1, b: 2, a: 3};
var context = canvas.getContext('2d');
// You'll get security error if the image is not from the same domain.
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;
// This loop gets every pixels on the image and sets to grayscale.
for (var i = 0; i < pixels.length; i += 4) {
var r = pixels[i];
var g = pixels[i + 1];
var b = pixels[i + 2];
var brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;
pixels[i + channels.r] = brightness;
pixels[i + channels.g] = brightness;
pixels[i + channels.b] = brightness;
}
context.putImageData(imageData, 0, 0);
}