Return to Question

For the time being I thought I had solution which was to first have preview of the image displayed upon which the users would apply the filter and when they save it the effect would be applied to the original image. But the algorithms I found http://stackoverflow.com/questions/18922880/ were slow, I mean the topmost rated algorithm takes nearly a minute on my pc.

For the time being I thought I had solution which was to first have preview of the image displayed upon which the users would apply the filter and when they save it the effect would be applied to the original image. But the algorithms I found https://stackoverflow.com/questions/18922880/ were slow, I mean the topmost rated algorithm takes nearly a minute on my pc.

I've written a simple black and white image filter application with JavaScript using html5 canvas. Here is an example of the app . (I don't know why it does not work in jsfiddle, so I gave the link to the source code).

Below are fragments of code from the original code

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

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' : function redfilterbw (brgba) {
 var utils = new Utils();
 var res = utils.monochrome(brgba, 1, 0, 0);
 rgba = {
 r : res,
 g : res,
 b : res,
 a : brgba.a
 };
 },
 '11' : function subcontrast(brgba) {
 var utils = new Utils();
 var res = utils.adjustContrast(brgba,5,-1);
 rgba = {
 r : res.r,
 g : res.g,
 b : res.b,
 a : brgba.a
 };
}, ...
'12' : function addcontrast(brgba) {
 var utils = new Utils();
 var res = utils.adjustContrast(brgba,5,1);
 rgba = {
 r : res.r,
 g : res.g,
 b : res.b,
 a : brgba.a
 };
 };
function Utils () {}
Utils.prototype.monochrome = function (brgba, rwt, gwt, bwt) {
 var opr, scale;
 scale = 1 / (rwt + gwt + bwt);
 rwt *= scale;
 gwt *= scale;
 bwt *= scale;
 opr = parseInt(brgba.r) * rwt + parseInt(brgba.g) * gwt + parseInt(brgba.b) * bwt ;

 return opr;
};
Utils.prototype.adjustContrast = function (brgba, mag, charge) {
 var opr, adjust = mag * charge,
 factor = (259 * (adjust + 255)) / (255 * (259 - adjust));
 opr = {
 r : (factor * (brgba.r - 128) + 128),
 g : (factor * (brgba.g - 128) + 128),
 b : (factor * (brgba.b - 128) + 128),
 a : brgba.a
 };
 return opr;
};
function fit(){
 document.getElementById("canvas").src = parentCanvas.toDataURL("image/png");
}
function process (index) {
 var i, j, len, data, layer, ctxn, buffer, utils;
 utils = new Utils();
 //the indexes 9 to 12 are for brightness adjustment hence i need the current context whereas rest are independent operations requiring parentContext.
 if (index != 9 && index != 10 && index != 11 && index !=12) {
 ctxn = utils.getParentContext();
 } else {
 ctxn = utils.getthisContext();
 }
 buffer = ctxn.getImageData(0, 0, w, h);
 data = buffer.data;
 for(i = 0; i < data.length; i += 4){
 rgba = {
 r : data[i],
 g : data[i+1],
 b : data[i+2],
 a : data[i+3]
 };
 window['Effects'][index](rgba);
 data[i] = parseInt(rgba.r);
 data[i+1] = parseInt(rgba.g);
 data[i+2] = parseInt(rgba.b);
 }
 ctxn.putImageData(buffer, 0, 0);
 fit();
}

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' : function redfilterbw (brgba) {
 var utils = new Utils();
 var res = utils.monochrome(brgba, 1, 0, 0);
 rgba = {
 r : res,
 g : res,
 b : res,
 a : brgba.a
 };
 },
 '11' : function subcontrast(brgba) {
 var utils = new Utils();
 var res = utils.adjustContrast(brgba,5,-1);
 rgba = {
 r : res.r,
 g : res.g,
 b : res.b,
 a : brgba.a
 };
}, ...
'12' : function addcontrast(brgba) {
 var utils = new Utils();
 var res = utils.adjustContrast(brgba,5,1);
 rgba = {
 r : res.r,
 g : res.g,
 b : res.b,
 a : brgba.a
 };
 };
function Utils () {}
Utils.prototype.monochrome = function (brgba, rwt, gwt, bwt) {
 var opr, scale;
 scale = 1 / (rwt + gwt + bwt);
 rwt *= scale;
 gwt *= scale;
 bwt *= scale;
 opr = parseInt(brgba.r) * rwt + parseInt(brgba.g) * gwt + parseInt(brgba.b) * bwt ;
 return opr;
};
Utils.prototype.adjustContrast = function (brgba, mag, charge) {
 var opr, adjust = mag * charge, //charge is whether image contrast will increase or decrease and mag is magniute, so its like +5 or -5
 factor = (259 * (adjust + 255)) / (255 * (259 - adjust));
 opr = {
 r : (factor * (brgba.r - 128) + 128),
 g : (factor * (brgba.g - 128) + 128),
 b : (factor * (brgba.b - 128) + 128),
 a : brgba.a
 };
 return opr;
};
function fit(){
 document.getElementById("canvas").src = parentCanvas.toDataURL("image/png");
}
function process (index) {
 var i, j, len, data, layer, ctxn, buffer, utils;
 utils = new Utils();
 //the indexes 9 to 12 are for brightness adjustment hence i need the current context whereas rest are independent operations requiring parentContext.
 if (index != 9 && index != 10 && index != 11 && index !=12) {
 ctxn = utils.getParentContext();
 } else {
 ctxn = utils.getthisContext();
 }
 buffer = ctxn.getImageData(0, 0, w, h);
 data = buffer.data;
 for(i = 0; i < data.length; i += 4){
 rgba = {
 r : data[i],
 g : data[i+1],
 b : data[i+2],
 a : data[i+3]
 };
 window['Effects'][index](rgba);
 data[i] = parseInt(rgba.r);
 data[i+1] = parseInt(rgba.g);
 data[i+2] = parseInt(rgba.b);
 }
 ctxn.putImageData(buffer, 0, 0);
 fit();
}