jQuery Plugin To Get Color Of Each Pixel Of An Image - Broilerjs

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.