jQuery Plugin To Get Color Of Each Pixel Of An Image - Broilerjs
File Size: | 41.9 KB |
---|---|
Views Total: | 3200 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Broilerjs is a jQuery plugin which utilizes Canvas getImageData() method to get the color of each pixel of an image and then you can apply the color to any DOM element(s).
Basic usage:
1. Include the latest version of jQuery library and the jQuery Broilerjs plugin's script on the webpage.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="dist/broiler.min.js"></script>
2. Get the color from a specified image by click and apply the hex color code to the background-color attribute of a specified container.
<img id="rainbow" src="demo.png"> <div id="target-container"></div>
$(function() { $("#rainbow").broiler(function(color) { var hex = "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1); $("#target-container").css("background-color", hex); }); });
Change log:
v1.0.2 (2016-04-16)
- update
This awesome jQuery plugin is developed by GordonLesti. For more Advanced Usages, please check the demo page or visit the official website.