Image Color Picker

Image Color Picker is an easy jQuery plugin which allows you to pick colors of an image, just like the color picker tool in Gimp, Adobe Photoshop or similar software.

Demo

Check out the demo.

Usage

Include required files

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="jquery.ImageColorPicker.min.js"></script>
<link rel="stylesheet" href="ImageColorPicker.css" type="text/css" media="screen" charset="utf-8"/>

Use the plugin:

$("#myImg").ImageColorPicker();

The selected element must be an image tag. Multiple instances are possible.

Get the selected color:

$("#myImg").ImageColorPicker("selectedColor")

Output is the color code in hex with a leading hash, e.g.: #00ff00 for green.

Instead of manually getting the color you can use the “afterColorSelected” callback:

 $("#myImg").ImageColorPicker({
  afterColorSelected: function(event, color){ alert(color); }
});

Download

• Image Color Picker Code on Github.com

Browser Compatibility

Image Color Picker currently works only in Firefox, Chrome and Safari. I’m working on supporting IE in one of the next versions. Turns out ExCanvas does not support all the Image function, including getImageData, which is quite essential for this project. So afaik there is currently no way to make this plugin work in IE.

Dependencies (included in download files)

• jQuery 1.4+
• Core and Widget Module of jQuery UI 1.8+

License

Image Color Picker is released under MIT-License.

Files

• dist/ImageColorPicker.css – some styles
• dist/jQuery-1.4.4.min.js – minified version of jQuery 1.4.4
• dist/jQuery-ui-1.8.9.custom.min.js – Core and Widget module of jQuery UI 1.8.9
• dist/jquery.ImageColorPicker.js – development version of Image Color Picker plugin
• dist/jquery.ImageColorPicker.min.js – minified version of Image Color Picker plugin (3.2kb)