info343/lib/courseweb/js/desaturate.js

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();
}