jQuery Plugin For Colorize Content Based On Image - Chameleon.js

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.