Get The Average Color Of An Image - psColor
File Size: | 4.99 KB |
---|---|
Views Total: | 1033 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

psColor is a tiny jQuery plugin that gets the average color of a given image by extracting and calculating the rgba data from the image using the Canvas drawImage() API.
It also provides 3 useful methods that convert the color data into Hex, RGB, and RGBa colors. Ideal for dynamically adjusting the background color of a container based on the average color of its child image.
See also:
- jQuery Plugin For Grabbing Image Color - imgcolr
- jQuery Plugin For Adaptive Image Background Color
- jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js
How to use it:
1. Load the psColor.js
library after the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/psColor.js"></script>
2. Get the average color of an image using the ps.color.getImageAverageColor
method.
<img src="1.jpg">
var color = ps.color.getImageAverageColor($('img')[0]);
3. Convert the color data into a Hex string.
// => 333 var hexColor = color.toStringHex();
4. Convert the color data into a RGB string.
// => 51, 51, 51 var rgbColor = color.toStringRgb();
5. Convert the color data into a RGBa string.
// => 51, 51, 51, 0.5 var rgbColor = color.toStringRgba();
6. Possible options.
- tooDark: How dark is too dark for a pixel
- tooLight: How light is too light for a pixel
- tooAlpha: How transparent is too transparent for a pixel
var color = ps.color.getImageAverageColor($('img')[0],{ tooDark: 0.03, tooLight: 0.97, tooAlpha: 0.1 });
This awesome jQuery plugin is developed by pseudosavant. For more Advanced Usages, please check the demo page or visit the official website.