How do you convert a color image to black/white using Javascript?

Question

How do you convert a color image to black/white using only Javascript?

AND, also make it cross compatible in most browsers because I hear Internet E

Answer 1

This jquery plugin seems to work cross browser. I haven't tested it thouroughly though.

https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

Answer 2

Canvas is indeed the best client-side solution to this problem, and I just wanted to point out that, for IE, you can actually use the google exCanvas project which translate canvas commands into the proprietary Microsoft XML-based vector language, VML.

http://excanvas.sourceforge.net/

Answer 3

I've found this (http://spyrestudios.com/html5-canvas-image-effects-black-white/) solution to work rather well outside of IE, which, as others have noted, you'll need to use filters for.

Answer 4

Using HTML5 Canvas and JavaScript

 ctx.drawImage(img, 0, 0, w, h);

    var imgPixels = ctx.getImageData(0, 0, w, h);
    for(var y = 0; y < imgPixels.height; y++){
     for(var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

Answer 5

Some image filters are available in CSS and supported by all major browsers, but you can have much more options using the HTML5 Canvas and Javascript.

However, when using Canvas based image filtering, you don't need implement the filters algorithm by yourself. Just use an image processing or Canvas manipulation library.

Examples:

• fabric.js
• processing.js
• MarvinJ

In the examples below I used MarvinJ.

Loading image:

image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

Gray Scale:

Marvin.grayScale(image.clone(), image);

Black and White:

Marvin.blackAndWhite(image.clone(), image, 5);

Black and White 2:

Marvin.blackAndWhite(image.clone(), image, 40);

Halftone:

Marvin.halftoneErrorDiffusion(image.clone(), image);

Runnable Example:

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

function imageLoaded(){
	// GrayScale
	//Marvin.grayScale(image.clone(), image);
	//image.draw(canvas);
	
	// Black and White
	Marvin.blackAndWhite(image.clone(), image, 5);
	image.draw(canvas);
	
	// Black and White 2
	//Marvin.blackAndWhite(image.clone(), image, 40);
	//image.draw(canvas);
	
	// Error Diffusion
	//Marvin.halftoneErrorDiffusion(image.clone(), image);
	//image.draw(canvas);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 6

i think this code will run perfect with you no need to nested loops or any additional libraries

var image = document.getElementById("image");

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

canvas.width= image.width;
canvas.height= image.height;

ctx.drawImage(image,0,0);

var imageData=ctx.getImageData(0,0, image.width, image.height);

for (var i=0;i<imageData.data.length;i+=4) {
    var avg = (imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3;

    imageData.data[i] = avg;
    imageData.data[i+1] = avg;
    imageData.data[i+2] = avg;

}

ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
document.getElementById("grayscale").appendChild(canvas);