Canvas imagData

by MICHI CHEN

HTML

<img src="https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg" width="200" crossOrigin="anonymous">
<br/>
<canvas id="myCanvas" width="200" height="133"></canvas>

JavaScript

$(function() {
  function drawImg(imgObj) {
    var ctx = $('#myCanvas')[0].getContext('2d');
    var _iow = imgObj.width;
    var _ioh = imgObj.height;
    var _iox = 0;
    var _ioy = 0;
    ctx.drawImage(imgObj, _iox, _ioy, _iow, _ioh);
    var cImg = ctx.getImageData(_iox, _ioy, _iow, _ioh);
    for (var i = 0; i <= cImg.data.length; i += 4) {
      cImg.data[i] = 255 - cImg.data[i];
      cImg.data[i + 1] = 255 - cImg.data[i + 1];
      cImg.data[i + 2] = 255 - cImg.data[i + 2];
      cImg.data[i + 3] = 255;
    }
    ctx.putImageData(cImg, 0, 0);
  }
  $('img').load(function() {
    drawImg(this);
  }).each(function() {
    if (this.complete) $(this).load();
  });
});