BlackAndWhite - Convert Colored Image Into A B&W Greyscale Image

File Size: 821 KB
Views Total: 3000
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
BlackAndWhite - Convert Colored Image Into A B&W Greyscale Image

BlackAndWhite is a amazing jQuery plugin using HTML5 canvas element to convert Colored Image Into A B&W Greyscale Image. This plugin comes with 3 effect : Hover effect, Hover effect Inverted and Ajax content.

How to use it:

1. Include the latest jQuery Library and BlackAndWhite.js into your <head> section

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jQuery.BlackAndWhite.js"></script>

2. The CSS.

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

3. Call the plugin with options.

$(window).load(function(){
  $('.bwWrapper').BlackAndWhite({

  // default true
  hoverEffect : true, 

  // set the path to BnWWorker.js for a superfast implementation
  webworkerPath : false,

  // this option works only on the modern browsers
  intensity:1,

  // to invert the hover effect
  invertHoverEffect: false,

  // this property could also be just speed: value for both fadeIn and fadeOut
  speed: { 
    fadeIn: 200, // 200ms for fadeIn animations
    fadeOut: 800 // 800ms for fadeOut animations
  },
  
  // this callback gets executed anytime an image is converted
  onImageReady:function(img) {},

  // allow cross origin?
  crossOrigin: true
  
  });
});

Change logs:

v0.3.8 (2016-09-05)

  • bugfix: fadeSpeedIn does not work

v0.3.6 (2015-01-16)

  • bugfix: fadeSpeedIn does not work

v0.3.6 (2015-01-07)

  • small bugfix

v0.3.4 (2014-08-01)

  • small bugfix

v0.3.2 (2014-06-23)

v0.3.0 (2014-06-19)

  • update.

v0.2.9 (2014-03-09)

  • update.

This awesome jQuery plugin is developed by GianlucaGuarini. For more Advanced Usages, please check the demo page or visit the official website.