Image Processing codes running too slow

Situation

I've written a simple black and white image filter application with JavaScript using html5 canvas. I have take two approaches, one with websockets and the other normally, the code is hosted on github

On my desktop browser and Firefox OS, for images of dimensions less than 1024X768 px, the application worked fine and so I posted it on the marketplace. But when I downloaded it on my Android with the Firefox browser, the application was running very very slow even for images 500x500 having size of 100kbs.

Implementation

Basically what I did was, I set the canvas display: hidden, get the image buffer data, take the individual pixel values and modify them (typical point operations), and then generate a .png image from the resulting operation and use an img tag to display it, because I could not control the canvas to fit the user screen without overflowing (for images with dimensions greater than screen dimensions).

Below are fragments of code from the original code

```
function $(tagname, classname){
if(!classname)
return document.getElementsByTagName(tagname);
if(!tagname || tagname == '')
return document.getElementsByClassName(classname);

return document.querySelectorAll(tagname + '.' + classname);

}

function init(imageObj){
var ctx, i, data,image,
len = $('canvas').length;
parentCanvas = $('canvas')[0];
parentContext = parentCanvas.getContext('2d');
if(!parentContext) alert("err");
w = (imageObj.naturalWidth);
h = (imageObj.naturalHeight);
parentCanvas.width = w;
parentCanvas.height = h;
parentContext.drawImage(imageObj, 0, 0, w, h);
parentBuffer = parentContext.getImageData(0, 0, w, h);
image = document.getElementById("canvas");
if(!image){
image = document.createElement('img');
image.id = "canvas";
}
image.src = parentCanvas.toDataURL("image/png");
$('','container')[0].appendChild(image);
//fit();
}
var Effects = {
'1' :

Interesting question, I wish you had posted more code.

Some observations:

-
Do not use parseInt, use the unary plus so instead of i = parseInt(s) do i = +s; This does not help with readability, but it does help with speed

-
You seem to sanitizing numbers with parseInt over and over again, do it once and then never again ( You should not have to do this in Utils.prototype.monochrome )

-
Read up on lookup tables, you are working on color values ( ranging from 0 - 255 ), it is generally much faster to look up a value in a lookup table than to re-calculate. Something like this ( untested )

//I assume you initialize Utils.contrastTable prior as { mag : -1 , charge : -1 };
Utils.prototype.adjustContrast = function (brgba, mag, charge) {

    var lookup = this.contrastTable, adjust, factor;
    if( lookup.mag != mag || lookup.charge != charge ){
      //Build the index, loose some time
      adjust = mag * charge;
      factor = (259 * (adjust + 255)) / (255 * (259 - adjust));
      for( var i = 0 ; i < 256 ; i++ )
        lookup[i] = (factor * (i   - 128) + 128);
      lookup.mag = mag;
      lookup.charge = charge;
    }

    return {
        r : lookup[brgba.r],
        g : lookup[brgba.g],
        b : lookup[brgba.b],
        a : brgba.a
    };
};

StackExchange Code Review Q#51501, answer score: 5