Convert color image into Black and White

black-and-white

Thanks to html5 canvas API now we are able to modify every image pixel by pixel!
I was thinking to make something useful and mostly crossbrowser with this and I had a great idea reading this post http://spyrestudios.com/html5-canvas-image-effects-black-white.
In that time I was working for a customer that just needed a portfolio web site using image thumbs that become black and white on mouseover and so I started making  jQuery.BlackAndWhite.

I developed jQuery.BlackAndWhite plug in that can convert every image into a greyscale image with a nice hover-fade effect.

This plug in is completely crossbrowser because I followed a progressive enhancement process forking my code checking if the browser running the script could support Html5 canvas.

It works on every modern browser,  smart phones and also on IE7 +.

You can find the project on github.

Demo

 

9 Comments

  • Great job! I really enjoy it!
    Thank you so much, It’s perfect for my own website ;-)

  • This is fantastic, although I have a question. It seems to be misplacing the image if the img is wrapper with an anchor.
    How do we apply it to images that are links?

    • Apologies, I found what the problem was.

      The limitations I found so far is that it doesn’t work with scaled images (if the actual size is larger than the size displayed, the black and white version will show the cropped version of the full size).
      Also having borders around the image seems to be causing some padding issues but that should be easily fixed.

      Still really good though

  • This is a perfect solution for responsive images – however I’m not happy with the quality of the greyscale version. Can you have a look at http://www.fibreking.com/ and let me know what I’m doing wrong?

    Also, would there be a way of replacing images rather than applying an effect?

    Thanks!

  • Gianluca, thanks for releasing a great plugin open-source for the world to use :)

    I have a query about images that are links. In Chrome and Safari on Mac (may be all other browsers too) the mouse cursor does not change to the hand on hover. If you leave the cursor there until the canvas has faded away then move it a pixel the cursor does then change as expected.

    Any idea how to stop the canvas from interfering with the change of cursor for image links?

    @Nick: The issue with images having borders is that this.injectTags() has hardcoded top and left values of 0. I resolved this by passing css: {top:’5px’,left:’5px’} in with the options array. I then passed the options array from this.init() into this.injectTags() and changed ‘top:0′ and ‘left:0′ to ‘top: options.css.top’ and ‘left: options.css.left’

  • It’s not just the change of cursor it effects, the link does not become visible until the canvas fades. Any pointers would be appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>