dropper: a jQuery plugin
This jQuery plugin uses the HTML5 canvas element to create an "eyedropper"-style color picker for any image.
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
Load jquery & the plug-in:
Select the image or set of images you'd like to be enabled with a dropper:
This will replace all img elements with a 'class' of 'dropper' with a canvas element and dropper-style color picker.
The plugin offers three callback methods that can be passed to the .dropper() method:
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.
See the included "demo" folder for a simple, more practical example.
TODO: pass more args back to callbacks; investigate callback naming conventions, event propagation
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
Copyright (c) 2010, Scott Trudeau (email@example.com)