function desaturate(img) {
var canvas = document.createElement('canvas');
var cx = canvas.getContext('2d');
var w = img.width;
var h = img.height;
canvas.width = w;
canvas.height = h;
canvas.id = 'foo';
cx.drawImage(img, 0, 0);
var pixels = cx.getImageData(0, 0, w, h);
for (var y = 0; y < pixels.height; y++) {
for (var x = 0; x < pixels.width; x++) {
var i = (y * 4) * pixels.width + x * 4;
var avg = (pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 3;
// console.log("i: " + avg);
pixels.data[i] = avg;
pixels.data[i + 1] = avg;
pixels.data[i + 2] = avg;
}
}
cx.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
return canvas.toDataURL();
}