Get color from image html

Javascript get main color from image

Note, this will only work with images on the same domain and in browsers that support HTML5 canvas:

function getAverageRGB(imgEl) < var blockSize = 5, // only visit every 5 pixels defaultRGB = , // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = , count = 0; if (!context) < return defaultRGB; >height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try < data = context.getImageData(0, 0, width, height); >catch(e) < /* security error, img on diff domain */ return defaultRGB; >length = data.data.length; while ( (i += blockSize * 4) < length ) < ++count; rgb.r += data.data[i]; rgb.g += data.data[i+1]; rgb.b += data.data[i+2]; >// ~~ used to floor values rgb.r = ~~(rgb.r/count); rgb.g = ~~(rgb.g/count); rgb.b = ~~(rgb.b/count); return rgb; > 

Answer by Charlee Lowe

Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs. In summary, with Colorify.js, you can :,Enjoy our top of 5 from the best color extraction plugins written in Javascript.,Vibrant.js is an utility that extracts prominent colors from an image. Vibrant.js is a javascript port of the awesome Palette class in the Android support library.,If you know another useful JavaScript plugin to extract the colors of an image, don’t be shy and share it with the community in the comment box.

imgcolr is a jQuery plugin for grabbing the dominant color of a given image’s borders. You can programmably adapt the elements’ color on the webpage for the image after getting the color. Based on the idea, you can make the web more beautiful and interesting. Note that imgcolr can not handle images with colorful borders properly. Its usage is very simple:

var imgs = $('img'); imgs.imgcolr(function (img, color) < // `img` refers to the current img element console.log(img); // `color` is the grabbed color, a string like "#ededed" console.log(color); >);

RGBaster is a very simple javascript library for extracting the dominant color(s) from an image. The colors method expects either a DOM element of an image or a URL to the image:

var img = document.getElementById('image'); // or an URL (of your own server) var img = 'http://example.com/path-to-image.jpg' RGBaster.colors(img, < success: function (payload) < console.log('Dominant color:', payload.dominant); console.log('Secondary color:', payload.secondary); console.log('Palette:', payload.palette); >>);

Color Thief is a very useful and easy to use script for grabbing the color palette from an image. It the canvas tag to make it happen. If you use an image that’s already loaded in the DOM, you can retrieve synchronously the palette of colors:

var colorThief = new ColorThief(); var sourceImage = document.getElementById("image"); // Display main color // e.g [125, 189, 193] console.log( colorThief.getColor(sourceImage) ); // Display palette of colors // e.g [[55,37,29],[213,193,136],[110,204,223]] console.log( colorThief.getPalette(sourceImage) );

Vibrant.js is an utility that e xtracts prominent colors from an image. Vibrant.js is a javascript port of the awesome Palette class in the Android support library.

var img = document.createElement('img'); img.setAttribute('src', 'examples/octocat.png') img.addEventListener('load', function () < var vibrant = new Vibrant(img); var swatches = vibrant.swatches(); for (var swatch in swatches)< if (swatches.hasOwnProperty(swatch) && swatches[swatch])< console.log(swatch, swatches[swatch].getHex()) >> /* * Results into: * Vibrant #7a4426 * Muted #7b9eae * DarkVibrant #348945 * DarkMuted #141414 * LightVibrant #f3ccb4 */ >);

Answer by Penny Nichols

Extract prominent colors from an image.Vibrant.js is a javascript port of the awesome Palette class in the Android support library.,As you can see, Vibrant’s first argument is an image. Make sure it’s loaded before passing it off to Vibrant.Vibrant has 3 constructor parameters:,Use of Vibrant is pretty straight forward, but because code works better than explanation, here’s an example:,Vibrant.swatch() returns a object with Swatch objects. Note that some Swatches might be set to ‘undefined’ when Vibrant fails to find a matching color for the profile! A Swatch can be used to get the swatch’s color (in RGB and hex), what text color works best with this color, and more.

Use of Vibrant is pretty straight forward, but because code works better than explanation, here’s an example:

var img = document.createElement('img'); img.setAttribute('src', 'examples/octocat.png') img.addEventListener('load', function() < var vibrant = new Vibrant(img); var swatches = vibrant.swatches() for (var swatch in swatches) if (swatches.hasOwnProperty(swatch) && swatches[swatch]) console.log(swatch, swatches[swatch].getHex()) /* * Results into: * Vibrant #7a4426 * Muted #7b9eae * DarkVibrant #348945 * DarkMuted #141414 * LightVibrant #f3ccb4 */ >); 

As you can see, Vibrant’s first argument is an image. Make sure it’s loaded before passing it off to Vibrant.
Vibrant has 3 constructor parameters:

new Vibrant( img, 64, /* amount of colors in initial palette from which the swatches will be generated, defaults to 64 */ 5 /* quality. 0 is highest, but takes way more processing. defaults to 5. */ ) 

Answer by Zoya Kirby

Grab the color palette from an image using just Javascript. Works in the browser and in Node. ,Gets a palette from the image by clustering similar colors. The palette is returned as an array containing colors, each color itself an array of three integers.,Gets the dominant color from the image. Color is returned as an array of three integers representing red, green, and blue values.,Note: Both `getColor` and `getPalette` return a `Promise` when used in Node.

const ColorThief = require('colorthief');

Answer by Julien Bryan

Extract colors from images. Supports GIF, JPG, PNG, and even SVG!,npm i get-image-colors,get-svg-colors: Extract stroke and fill colors from SVG files,Gitgithub.com/colorjs/get-image-colors

npm install get-image-colors --save

Answer by Madilynn Phillips

The average color of an image can be found with JavaScript by drawing the image on a canvas element. The following steps have to be performed to get the average color of an image:,3. The average red, green and blue colors are then calculated with this image data by adding all the color values separately and finding the average value of that color.,1. The image is first drawn on the canvas using the method context.drawImage() of the Canvas 2D API. This method takes in the image and the dimensions as parameters and draws it to the canvas.,2. The image data of the canvas is returned using the context.getImageData() method. It returns an ImageData object representing the pixel data for a specified section of the canvas.

context.drawImage( img, width, height ); 

context.getImageData( x, y, width, height )

Answer by Rex Stewart

You know how Dribbble shows a color palette for each shot users upload? They always look perfect right? Here’s a tool that can give you the same quality results using pure JavaScript.,It’s amazing that JavaScript can do all these great things, but if you’re running PHP on the backend then you’re out of luck. In that case, there’s a PHP port of Color Thief that you can use for similar results.,I played with Color Thief a few months ago but surprisingly never posted about it. For me, something that’s easy to use and has consistently great results is pure gold. Here’s how it works.,Learn more about how Color Thief works and try it out with your own photo. The project was created by Lokesh Dhakar and licensed under the MIT license.

Getting the dominant color of an image #

var colorThief = new ColorThief(); colorThief.getColor(sourceImage); //

Generating a color palette from an image #

var colorThief = new ColorThief(); colorThief.getPalette(sourceImage, 8); // [[num, num, num], [num, num, num], . ] 

Источник

Top 5: Best Image Color Extraction JavaScript and jQuery Plugins

See our review of 5 from the best JavaScript plugins to extract all the colors or the dominant color from an image.

The task of extract the color from an image with Javascript, is surely not an everyday task (usually). However, Some developers have taken the time to write useful plugins that make the implementation of this feature really easy and straightforward as every plugin for Javascript. You can use such a feature to implement for example a color adapting UI according to the profile picture of the user or other crazy things.

Enjoy our top of 5 from the best color extraction plugins written in Javascript.

5. imgcolr

imgcolr is a jQuery plugin for grabbing the dominant color of a given image’s borders. You can programmably adapt the elements’ color on the webpage for the image after getting the color. Based on the idea, you can make the web more beautiful and interesting. Note that imgcolr can not handle images with colorful borders properly. Its usage is very simple:

var imgs = $('img'); imgs.imgcolr(function (img, color) < // `img` refers to the current img element console.log(img); // `color` is the grabbed color, a string like "#ededed" console.log(color); >);

Imgcolor is unique in the sense that it supports HTML5 and Flash, as with third party images you will get the CORS Exception in HTML5 by browser vendors. So imgcolr based on HTML5 just supports latest modern browsers like Google Chrome and Firefox. Anyway, it’s really faster than the Flash version. You only need to make sure that jQuery and imgcolr.html5.min.js are included in your web page.

4. Rgbaster.js

RGBaster is a very simple javascript library for extracting the dominant color(s) from an image. The colors method expects either a DOM element of an image or a URL to the image:

var img = document.getElementById('image'); // or an URL (of your own server) var img = 'http://example.com/path-to-image.jpg' RGBaster.colors(img, < success: function (payload) < console.log('Dominant color:', payload.dominant); console.log('Secondary color:', payload.secondary); console.log('Palette:', payload.palette); >>);

It is highly customizable and depends on the following browser functionalities:

3. Colorify.js

Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs. In summary, with Colorify.js, you can :

• Extract the dominant color from an image
• Generate gradients based on the images colors
• Isolate colors and manipulates them everywhere in the page
• Create a Lazy-revealer system for your images
• Load image dynamically
• Create any colorify(<>); instances you want

2. Color Thief

Color Thief is a very useful and easy to use script for grabbing the color palette from an image. It the canvas tag to make it happen. If you use an image that’s already loaded in the DOM, you can retrieve synchronously the palette of colors:

var colorThief = new ColorThief(); var sourceImage = document.getElementById("image"); // Display main color // e.g [125, 189, 193] console.log( colorThief.getColor(sourceImage) ); // Display palette of colors // e.g [[55,37,29],[213,193,136],[110,204,223]] console.log( colorThief.getPalette(sourceImage) );

1. Vibrant.js

Vibrant.js is an utility that e xtracts prominent colors from an image. Vibrant.js is a javascript port of the awesome Palette class in the Android support library.

var img = document.createElement('img'); img.setAttribute('src', 'examples/octocat.png') img.addEventListener('load', function () < var vibrant = new Vibrant(img); var swatches = vibrant.swatches(); for (var swatch in swatches)< if (swatches.hasOwnProperty(swatch) && swatches[swatch])< console.log(swatch, swatches[swatch].getHex()) >> /* * Results into: * Vibrant #7a4426 * Muted #7b9eae * DarkVibrant #348945 * DarkMuted #141414 * LightVibrant #f3ccb4 */ >);

If you know another useful JavaScript plugin to extract the colors of an image, don’t be shy and share it with the community in the comment box.

Carlos Delgado

Senior Software Engineer at EPAM Anywhere. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Источник