JS Image Processing

HTML

<input type="file" id="file-input" accept="image/*" />
<div><img id="image" /></div>
<div><img id="other-image" /></div>

JavaScript

function processImage(e) {
debugger;
    var img = this;
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var dest = ctx.createImageData(canvas.width, canvas.height);
    var a = src.data;
    var b = dest.data;
    var len = 4 * canvas.width * canvas.height;

    var tmp = new Uint8Array(3*3);
    for (var i = 0; i < len; i += 4) {
        var dx = (i/6|0) % 4;
        b[i+dx] = a[i+dx];
        b[i+3] = a[i+3];
    }

    ctx.putImageData(dest, 0, 0);
    document.querySelector("#other-image").src = canvas.toDataURL();
};

document.querySelector("#image").onload = processImage;

function handleFileChange(e) {
  var file = e.target.files[0];
  if (!file || !/image\/.*/.test(file.type)) return;

  var fileReader = new FileReader();
  fileReader.onload = function(e) { document.querySelector("#image").src = e.target.result; };
  fileReader.readAsDataURL(file);
}

document.querySelector("#file-input").onchange = handleFileChange;

//*

function loadExternalImage(url) {
  var img = document.querySelector("#image");
  img.crossOrigin = "anonymous";
  img.src = url;
}

loadExternalImage("http://s3.amazonaws.com/maggo_dev/items/custom_images/000/000/057/square/pinkie-grin.png");

// */