jQuery Plugin For Colorize Content Based On Image - Chameleon.js
File Size: | 20.3 KB |
---|---|
Views Total: | 2234 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Chameleon.js is a fancy jQuery plugin used for extracting colors from a given image and applying them to any elements you specify.
See also:
- jQuery Plugin For Grabbing Image Color - imgcolr
- jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js
- Image Color Palette Generating Plugin - Color Thief
- jQuery Plugin For Adaptive Image Background Color
How to use it:
1. Download and insert the main JavaScript Chameleon.js
after jQuery library.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.chameleon.js"></script>
2. Extract colors from a given image and then apply them to "chmln{n}" elements.
$(".chmln").chameleon({ // settings here });
3. Extract colors from a given image and output the color codes.
$("img").chameleon("getImageColors", { // settings here });
4. All default settings for the 'colorizeContent' method:
$(".chmln").chameleon({ // the color used if the background color is missing dummy_back: 'aaaaaa', // the color used if the "chmln{n}" elements are missing dummy_front: '555555', // default color format color_format: 'hex', // the alpha channel of color color_alpha: _s.color.alpha, // the minimum allowed difference in colors color_difference: _s.color.difference, // the number of iterations of color adaptation to background color_adapt_limit: _s.color.adapt_limit, // debug mode debug: false, // enable async color mode async_colorize: true, // apply the colors to elements apply_colors: true, // adapt the colors "chmln{n}" elements adapt_colors: true, // return all colors all_colors: false, // insert the colors insert_colors: false, // store the colors in the data-color attribute data_colors: false, // custom rules rules: {}, // callback functions afterColorized: function() {}, beforeAsyncColorized: function() {}, afterAsyncColorized: function() {} });
5. All default settings for the 'getImageColors' method:
$("img").chameleon("getImageColors", { // sorting colors sort_colors: 'primary', // default color format color_format: 'hex', // the alpha channel of color color_alpha: _s.color.alpha, // the minimum allowed difference in colors color_difference: _s.color.difference, // debug mode debug: false, // callback functions onGetColorsSuccess: function(colors, $container, s) { logger(['getImageColors - onGetColorsSuccess is not given!', colors, $container, s], 'warn'); }, onGetColorsError: function(colors, $container, s) { logger(['getImageColors - error on img load!', colors, $container, s], 'error'); } });
Changelog:
2018-08-15
- v1.5.5
2017-08-27
- v1.3.11
- parseImageColors: $img.off();
2017-07-14
- v1.3.10
- colorize_mode array;
2017-07-05
- v1.3.9
- chameleonBlur refactor; chameleonGroove remove; decolorize refactor;
2017-07-03
- chameleonBlur.js: refactor; colors_skip;
2017-06-30
- v1.3.4: colorize_mode refactor;
2017-06-21
- colorize_mode refactor; registerColorizeMode;
2017-06-18
- sort primary -> disabled
- colorize_mode blur refactor;
2017-06-16
- colorize_mode beta; remove .min files;
2017-06-15
- whiteOrBlackHex -> whiteOrBlack; rules improvements; decolorize;
2017-06-13
- wrap_color_mode tile rgba fix
2017-06-10
- alpha-bg: lighter; sortColors: slice colors;
2017-06-09
- sortColors, getImageColros: img_src; arrayValidation: isSettingsArrayValid, fixSettingsArray;
2017-06-08
- contrast -> readable; has_extra_s fix
2017-06-05
- isSettingEmpty: number case; isSettingCanBeIgnored: can_be_ignored alpha; getAlpha;
2017-06-04
- limitRGBAValue parseFloat fix
2017-06-02
- colorObjectFromStr -> colorObjectFromStr; COLORIZECONTENT -> COLORIZE; color.lum;
2017-05-31
- Chameleon.js: limitRGBAValue fix;
2017-05-25
- JS update
2017-05-21
- validation: afterValidation, beforeFix, is_valid fix; renderItem chmln_index fix; no_colorize -> ignore; elem main_img; extendSettings remove;
2017-05-19
- crossOrigin, try catch parseImageColors
2017-05-18
- content root_sel -> root
2017-05-17
- colorObjectFromStr - color is missing, wrapColor obj color, wrapColor if s.color is missing - do noting, data-colors color_format
2017-05-16
- async_colorize false, empty default functions onGetColorsSuccess/onGetColorsError
2017-05-13
- $wrapColor -> wrapColor
2017-05-12
- rgb/rgba improvements
2017-05-09
- rgb/rgba improvements
2017-05-08
- extra_s fix
- colors functions refactoring, isSettingAllowed, isSettingEmpty, isSettingCanBeIgnored, colorObjectFromHex -> colorObjectFromStr, colorStrToHex -> colorStrToHexAlpha, isRGBAValueValid, isColorHex/isColorRGBA/isColorRGB, getColorFormat, version
- dist fixValCase, isColorRGBA/isColorRGB c.toLowerCase()
This awesome jQuery plugin is developed by bhoodream. For more Advanced Usages, please check the demo page or visit the official website.