Image Processing

$author:   Ching-Wen (Ed) Lai           
$date:     Mar. 2018
$keywords: image, processing, rgb, colormap, b&w, black, white

Before: <img id="lena" src="../../lena.png" alt="The Lena" width="300" height="300">
After:  <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"> </canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lena");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);

var i;
for (i = 0; i < imgData.data.length; i += 4) {
  var avg = Math.round(imgData.data[i] * 0.299 + imgData.data[i+1] * 0.587 + imgData.data[i+2] * 0.114);
  if(avg >= 127){ 
    avg = 255; 
  }else{
    avg = 0;
  }
  imgData.data[i]   = avg;
  imgData.data[i+1] = avg;
  imgData.data[i+2] = avg;
  imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
</script>