image-pixel-border

A very lightweight and simple jQuery plug-in to extract the main color of an image's border. Just pass a callback as first parameter of the getPixelColor which takes one parameter. The parameter send to your callback will be the hexadecimal color code.

In few words:

1. Clone the image in a dynamically created HTML canvas element.
2. Read the pixels of the TOP, BOTTOM, LEFT, RIGHT borders of the image
3. Extract the most frequent color
4. Return the extracted color to your callback

Options:

• You can specify the border's size used to calculate the color:  getPixelBorder([callback], [padding-width], [padding-height]);
  
   [callback] (required): Function to receive the extracted color
   [padding-with]: LEFT and RIGHT border size (px) - default: 3
   [padding-height]: TOP and BOTTOM border size (px) - default: 3
  

Example :

$('#img1').getPixelColor(function(color) {
    $('body').css('background', color);
});

$('#img1').getPixelColor(function(color) {
    $('.divClass').css('background', color,  5,  3);
});

Live example