X

LATEST #JQUERY NEWS

Convert Images to Black and White using 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. GreyScaleThis 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!

Recently Published

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...

article image
»

jQuery Snippets: Using jQuery to Check All Boxes

When you’ve given your users a ton of checkbox input fields ...

article image
»

Useful jQuery Code Snippets for Working with Images

Images are an essential part of any website and sometimes working ...

article image
»

How to Use jQuery to Check if Cookies are Enabled

A cookie (not the kind with chocolate chips) is a small piece of data ...

article image
»

A Beginner’s Guide to jQuery’s Selectors

We talk a lot about event methods on this site, but not so much about ...

article image
»

Add Keyboard Shortcut to Anchor Tag Using jQuery

Making a user friendly website can be quite a challenging task. There ...

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...