Color Image to black and white conversion using javascript

Question

This is the code I am using for color to grey scale image conversion.

 function grayScaleEffect() { var imageData = contextSrc.getImageData(0, 0, width, height); var data = imageData.data; var p1 = 0.99; var p2 = 0.99; var p3 = 0.99; var er = 0; // extra red var eg = 0; // extra green var eb = 0; // extra blue for (var i = 0, n = data.length; i < n; i += 4) { var grayscale = data[i] * p1 + data[i + 1] * p2 + data[i + 2] * p3; data[i] = grayscale + er; // red data[i + 1] = grayscale + eg; // green data[i + 2] = grayscale + eb; // blue } context.putImageData(imageData, 0, 0); base64 = canvas.toDataURL("image/png"); }

On changing the slider value, image must change from color to black and white and vice versa.

It must be compatible for all browsers.

Is there some other way I could achieve this?

Thanks in advance.

cbertelegni · Accepted Answer · 2014-07-17 20:17:39Z

yes, you can add from css this effect and if you want to remove it, remove the css class to the image with javascript.

.black_and_white { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }

DEMO

Change class with jquery

Change class with native javascript

I think I can change the value for chrome and safari. How to do it in IE?
only you remove the class of the img. see this example: jsfiddle.net/cbertelegni/vSu67/2
if you prefer native javascript see this example: jsfiddle.net/cbertelegni/vSu67/3
Not working in ie. More over that i don't want to do this on a single click. Color should change on changing the slider value.
i have used this css filters and are native from IE and works in IE. How implement this for your task is other thing.

Collectives™ on Stack Overflow

Color Image to black and white conversion using javascript

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related