Learning jQuery

Converting an image to black and white is no longer a manual event. As client side technologies becoming more powerful, conversion processes can be automated and be done in real-time. Read on to learn different ways of converting images to black and white using CSS3, HTML5 with jQuery and various other jQuery plugins.

There are jQuery plugins available which can do this job, but first we look at how to do it with simple CSS. Then we will move on to using jQuery code, and finally jQuery plugins. It is best to avoid jQuery plugins until they are absolutely necessary.

CSS

CSS3 supports various filters and filter properties providing graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. So we can apply the grayscale filter to convert images to black and white. Like this:

img {
    -webkit- filter: grayscale(100%);  /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

This filter also takes a parameter which defines the proportion of the conversion. The value 100% means “completely grayscale”. And the range is from 0% to 100%. If not specified, then 100% will be used.

The above CSS3 filter gets applied to all images upon loading of the page. If you wish to apply the filter on user action, a click for example, then define a CSS and then using jQuery addClass() apply the class. Like this:

.blackandwhite {
    -webkit - filter: grayscale(100 % ); /* Safari 6.0 - 9.0 */
    filter: grayscale(100 % );
}
$('#btnConvert').click(function() {
    $(‘img’).addClass(‘blackandwhite’);
});

jQuery

If you don’t wish to use CSS then HTML5 Canvas can be used to convert images to black and white. Canvas is an empty element on which you can write and sketch using jQuery/JavaScript. The advantage here is that things can be animated to a seemingly larger size (while keeping the canvas the same size) without having to cause the DOM to re-layout. However, CSS3 performance is faster compared to HTML5 Canvas. To convert using HTML5 Canvas and jQuery, the following HTML is required:

<input type="button" id="btnConvert" Value="Convert" />
<canvas id="canBoard"/>
<img id="imgTest" style="display:none;" height="200" width="300" /><br/>

Below the jQuery code, draw the image on the canvas using the drawImage() function. The click event attached on the button which will re-draw the black and white image on the canvas.

$(function() {
    var img = $('#imgTest');
    var canvas = $('#canBoard')[0];
    context = canvas.getContext('2d');
    img.load(function() {
        context.drawImage(this, 0, 0);
    });
    img.attr('src', 'img/2.jpg');
    var imgW = img.width();
    var imgH = img.height();
    canvas.width = imgW;
    canvas.height = imgH;
    $('#btnConvert').click(function() {
        var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        var pxls = imgData.data;
        var black = 0;
        for (var i = 0, n = pxls.length; i < n; i += 4) {
            black = (pxls[i] + pxls[i + 1] + pxls[i + 2]) / 3;
            pxls[i] = black;
            pxls[i + 1] = black;
            pxls[i + 2] = black;
        }
        context.putImageData(imgData, 0, 0);
    });
});

The canvas is made up of pixels. Pixels are represented from left to right, from top to bottom. Every pixel has 4 values: red, green, blue and alpha. So, loop through the pixel’s array and then change the color to get the black and white effect. Simple and easy.

jQuery Plugins

There are also a couple of jQuery plugins available which can convert the images to black and white if you would prefer not to use CSS or jQuery code:

1. Gray  - Gray is a jQuery plugin which allows you to convert images into greyscale images in all modern and legacy browsers. It does not require Html5 canvas.
2. GreyScale – This plugin also converts the images to greyscale, but it requires HTML5 canvas. https://github.com/zachwick/TableCSVExport
3. BlackAndWhite - This plugin can easily convert any colored image into a B&W greyscale image. It uses the HTML5 canvas tag and a fallback for older browsers. This plugin also offers various possible conversion events like hover and hover inverted.

These jQuery plugins are easy to use. Visit their website for documentation and find out how to use and integrate them in jQuery.

To sum it up, the functionality to convert images to black and white can be either achieved with CSS3 filters, jQuery with HTML5 canvas or with jQuery plugins. If you want flexibility and don’t wish to write your own implementation, then the jQuery plugins listed in the post are best!