Image Processing

$author:   Jin-Wen (Ed) Lai           
$date:     Mar. 2018
$keywords: image, processing, rgb, colormap, b&w, mirror, flip

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>

<script type="text/JavaScript">
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;
var imgLen = imgData.data.length;

for (i = 0; i < imgData.data.length / 2; i += 4) {

  var tmp = imgData.data[i+0];
  imgData.data[i+0] = imgData.data[imgLen - 1 - (i + 3)];
  imgData.data[imgLen - 1 - (i + 3)] = tmp;

  tmp = imgData.data[i+1];
  imgData.data[i+1] = imgData.data[imgLen - 1 - (i + 2)];
  imgData.data[imgLen - 1 - (i + 2)] = tmp;

  tmp = imgData.data[i+2];
  imgData.data[i+2] = imgData.data[imgLen - 1 - (i + 1)];
  imgData.data[imgLen - 1 - (i + 1)] = tmp;

  tmp = imgData.data[i+3];
  imgData.data[i+3] = imgData.data[imgLen - 1 - (i + 0)];
  imgData.data[imgLen - 1 - (i + 0)] = tmp;
}
ctx.putImageData(imgData, 0, 0);

</script>