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

A very lightweight and simple jQuery plugin 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:Clone the image in a dynamically created HTML canvas element.Read the pixels of the TOP, BOTTOM, LEFT, RIGHT borders of the imageExtract the most frequent colorReturn the extracted color to your callback

Image Effects Plugins

Documentation

image-pixel-border

Extract the main colour of an image's borders

Example:

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

Live example:

http://madtrax.github.io/image-pixel-border/

<div style="padding:20px;"> 	<img src="img.jpg" id="targetImg0" /> </div>  <div style="padding:20px;"> 	<img src="img1.jpg" id="targetImg1" /> </div>
$(document).on('ready', function() {     $('#targetImg0').getPixelColor(function(color) { $('#targetImg0').closest('div').css('background', color); });     $('#targetImg1').getPixelColor(function(color) { $('#targetImg1').closest('div').css('background', color); }); });

You May Also Like