šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image.It uses the the HTML5 canvas tag and a fallback for the old browsers

HTML5 Image Effects Plugins

Documentation

Build Status devDependency Status license

This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image. Read the plugin API on here http://gianlucaguarini.github.io/jQuery.BlackAndWhite/.

Usage

1 Include the plug into the page:

<script src="js/jQuery.BlackAndWhite.js"></script>

2 Set the image wrappers using the css:

.bwWrapper {     position:relative;     display:block; }

3 Initialize the plug in:

$('.bwWrapper').BlackAndWhite({     hoverEffect : true, // default true     // set the path to BnWWorker.js for a superfast implementation     webworkerPath : false,     // to invert the hover effect     invertHoverEffect: false,     // this option works only on the modern browsers ( on IE lower than 9 it remains always 1)     intensity:1,     // this option enables/disables the attribute crossorigin=anonymous on image tags. Default true.     // please refer to https://github.com/GianlucaGuarini/jQuery.BlackAndWhite#important     crossOrigin: true,     speed: { //this property could also be just speed: value for both fadeIn and fadeOut         fadeIn: 200, // 200ms for fadeIn animations         fadeOut: 800 // 800ms for fadeOut animations     },     onImageReady:function(img) {     	// this callback gets executed anytime an image is converted     } });

IMPORTANT

the script works only for the images hosted on the same server in which the page is loaded!

Lightweight solution

If you are looking for a lightweight solution, you can use the following css instead, but it's not 100% crossbrowser:

img {     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 */     transition: 0.3s ease-in; }  img:hover {     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");     -webkit-filter: grayscale(0%); } 

Plugin Showcase


You May Also Like