dropper: a jQuery plugin
This jQuery plugin uses the HTML5 canvas element to create an "eyedropper"-style color picker for any image.
Limitations
Internet Explorer Not Supported
Internet Explorer does not support the HTML5 canvas element natively. The popular VML hack for simulating canvas in IE will not work. VML does not give pixel-level access to images. See this thread
Images must be in same domain as the web page
In order to get pixel-level access to the image, the image must be hosted on the same domain as the web page. See the canvas security section of the HTML5 spec
TODO: Test redirect proxy as a possible workaround
Usage
Load jquery & the plug-in: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="jquery.dropper.js" type="text/javascript"></script>
Select the image or set of images you'd like to be enabled with a dropper: <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function() { jQuery('img.dropper').dropper(); }); </script>
This will replace all img elements with a 'class' of 'dropper' with a canvas element and dropper-style color picker.
Callbacks
The plugin offers three callback methods that can be passed to the .dropper() method:
- clickCallback
- mouseMoveCallback
- mouseOutCallback
Each callback is called with a single argument, a color object. The color object has has 5 attributes: r, g, b and alpha which are 0-255 integers for the "red", "green", "blue" and "alpha transparency" channel of the image. And "rgbhex" which is the 6 character hexadecimal representation of the color.
Example:
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
jQuery('img.dropper').dropper({
clickCallback: function(color) {
alert("You clicked on color: #"+ color.rgbhex);
};
});
});
</script>
See the included "demo" folder for a simple, more practical example.
TODO: pass more args back to callbacks; investigate callback naming conventions, event propagation
Author
Scott Trudeau (@sstrudeau) for Apartment Therapy
See Also
Favonius' fork: dropperredux
Demo Image Credits
The demo uses three image from Flickr. Each is licensed as Creative Commons, Attribution-Share Alike 2.0
- Colorful Glass by lexrex
- The only way to see the rainbow is to look through the rain! by somogyibarbara
- Colorful tulips by deapeajay
License
Dual licensed under the MIT License and the GPL license
Copyright (c) 2010, Scott Trudeau (scott.trudeau@gmail.com)