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

jQuery Plugin For Colorize Content Based On Image - Chameleon.js
File Size: 20.3 KB
Views Total: 2095
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:

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

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.