jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js

jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js
File Size: 412 KB
Views Total: 4908
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Primarycolor.js is a super light jQuery plugin used to extract the dominant color (RGB) of an image by using HTML5 canvas.

Callback event is supported that allows you to apply the RGB color to any Html element (e.g. the parent element's background-color)

See also:

How to use it:

1. Load the JQuery library and the Primarycolor.js script at the bottom of your document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.primarycolor.js"></script>

2. Insert an image into a container.

<section>
  <img src="demo.jpg" class="demo">
</section>

3. The Javascript to grab the the dominant color of your demo.jpg and apply the color to its parent's background-color property.

  • color: Primary color
  • colors: Top 5 colors
$(function () {
  $('img').primaryColor(function (color, colors) {
    $(this)
      .parents('.wrapper')
      .css('background-color', 'rgb(' + color + ')')
  })
})

Changelog:

2020-10-15

  • v1.4.1

2020-10-14

  • Bugfix

2020-10-09

  • Rewritten in Typescript

This awesome jQuery plugin is developed by rythgs. For more Advanced Usages, please check the demo page or visit the official website.