Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Overview

Color Thief

Grab the color palette from an image using just Javascript.Works in the browser and in Node.

View the demo page for examples, API docs, and more.


Contributing

Project structure

  • build/ - Simple script that copies and renames files into the /dist folder.
  • cypress/ - Browsers tests.
  • dist/ - Generated distribution files created by microbundle package and a couple of files copied via build script.
  • examples/ - CSS, JS, and Images for the index.html example page.
  • src/color-thief-node.js - Source for the Node (commonjs) compatible version of the script.
  • src/color-thief.js - Source for the browser (ES6, AMD, Global var) compatible version of the script.
  • src/core.js - Functions shared between the node and browser versions of the script.
  • test/ - Node integration tests. Uses Chai.
  • index.html - Example page.

Running tests

There are two sets of tests:

  1. Browser tests run with Cypress
  2. Node tests run with Karma and utilizing Mocha

To run both the browser and Node tests:

  • npm run dev to start local server.
  • npm run test

To run just the browser tests with the Cypress UI:

  • npm run dev to start local server
  • npm run test:browser

To run just the Node tests:

  • npm run test:node

Adding tests

  • Update cypress/test-pages/index.html as needed or create a new test page if you need new examples.
  • Add new tests in cypress/integration/apis_spec.js

Making a new release

  • Merge dev into master
  • Pull down master
  • Update version number in src/color-thief.js and package.json
  • Run npm run build
  • Commit and push built files back up to master
  • Create a new Github release along with tag. Naming convention for both v2.8.1
  • npm publish
Comments
  • Cross Domain Images

    Cross Domain Images

    When I try to use an image hosted outside my server:

    Unable to get image data from canvas because the canvas has been tainted by cross-origin data. color-thief.js:50 SecurityError: An attempt was made to break through the security policy of the user agent.

    Is it possible to use Cross Domain images?

    Thank you very much.

    resolution:resolved improve docs 
    opened by bernatfortet 15
  • I simply cannot get this to work, no matter the source of the image (The canvas has been tainted by cross-origin data)

    I simply cannot get this to work, no matter the source of the image (The canvas has been tainted by cross-origin data)

    No matter if the image is in the same place as the javascript and html - I get a an error

    color-thief.min.js:18 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    

    I am using this which seems to work for other people but does not work for me:

    var image = document.querySelector('#img');
    image.onload = function(){
        var colorThief = new ColorThief();
        var color = colorThief.getColor(image); 
       console.log(color);
    };
    

    What do I have to do to make this work at all?

    cross-origin 
    opened by teenangst 10
  • Add requirejs support

    Add requirejs support

    Hey, guys. It will be really nice if we add RequireJS support. I can make Pull Request if you need this (but it seems no maintainers who can accept Pull Request, yep?).

    opened by jmas 7
  • Simple example please

    Simple example please

    I would love to put this plugin to use on a project right now but I can't figure it out. I know a call for better documentation has been made in other requests but I would like to just ask for a simple example from someone who has made this work. I just want to extract the dominant rgb values from an image and use that to alter the background color of another element. I only need to use the first image on a page so I can target it like so: $('body > .target-image')

    I am a javascript novice and my attempts to decipher the demo.js have failed. Please and thank you for any help!

    p.s. And thank you for making this Lokesh! I have searched quite a bit and can find nothing else out there that does this (at least not using jQuery anyway). Help me figure it out so I can use it please!

    improve docs 
    opened by th3lonius 7
  • The canvas has been tainted by cross-origin data.

    The canvas has been tainted by cross-origin data.

    Hi there,

    I use color-thief.js on my website and app to generate personalized color skins. The source image used for this is a bannerimage. The url of this bannerimage is retrieved using the YouTube Data API V3 and externally stored. An example of one of this images is:

    https://yt3.ggpht.com/-gnl4NYqCQ7c/V01wwjwmNYI/AAAAAAAAAeQ/VFC8dO5UInompWUnQ8eZ250sjJ9MmBCFwCL8B/w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no/KickXGamesBANNERV3GROOT.jpg

    Using this externally stored image with color-thief.js gave me this error at first:

    "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

    I managed to fix this by adding the tag 'crossorigin="anonymous"' to my image element. Sadly the server where these images are stored no longer accepts this, so I was forced to remove the crossorigin tag from the image element, which means that the same error is back once again.

    Any advice on how to fix this? I'd like to keep using your library.

    Best regards,

    Peter ten Hoor

    opened by petertenhoor 6
  • Trying to get it work

    Trying to get it work

    I want to get color palette when i click a image. i don't know how to make it work, what should be the value of : sourceImage

    image src? all image tag?

    The documentation is too minimalist

    Nothing work

    improve docs 
    opened by onigetoc 6
  • Changed all var to using const or let except for ColorThief

    Changed all var to using const or let except for ColorThief

    I'm proposing this pull request because the use of var leads to strange problem as it shares the same variable even if we declare it multiple times.

    The problem was: when I created multiple instance of ColorThief for different images, running it asynchronously in the same time, all of the instances always resulted the same color.

    opened by ibnujakaria 5
  • error in strict mode

    error in strict mode

    opened by daniran 5
  • Security Issue on context.getImageData for IE 9 and 10

    Security Issue on context.getImageData for IE 9 and 10

    Hi,

    I am facing a security issue for the following error ( error post ), Specially on IE 9, 10. Everything works fine on IE 11, Chrome and Firefox. http://screencast.com/t/ZQ7STuK69 Please suggest a fix to this.

    Thanks

    opened by erhimanshusaxena 5
  • How to add

    How to add "Choose file for Image" and "print HEX value" in class="swatch" div

    Hi Lokesh, Your app is excellent.

    Can you help me out for adding a HEX values instead of RGB in class="swatch" . Also a Choose file instead of Drag and drop. I would like to credit & contribute u to using "color thief" for my site.

    Thanks & Regards.

    improve docs 
    opened by keshavnaidu 4
  • Need to reload page before take effects

    Need to reload page before take effects

    For some reason I need to reload the page before it get the dominated color when change image. why that?

    HTML

    <img src="images/6.jpg" id="myimg">
    <div id="mydiv"></div>
    

    JS

    $(function(){
        var image = $("#myimg").get(0);
        var colorThief = new ColorThief();
        var color = colorThief.getColor(image);
        $("#mydiv").css("background-color", "rgb(" + color + ")"); 
    });
    
    opened by BenjaminHoegh 4
  • microbundle

    microbundle

    Would it be possible to update to a newer version of microbundle the current one has a dependency on iltorb which is deprecated and it's build from source so it requires build tools python/G++ ?

    opened by oteoe 0
  • github.com/lokesh/quantize.git

    github.com/lokesh/quantize.git

    node version = v16.17.1 & npm version = 8.15.0..Don't want to downgrade the node & npm version

    19:22:28 npm ERR! command git --no-replace-objects ls-remote ssh://[email protected]/lokesh/quantize.git 19:22:28 npm ERR! ssh: connect to host github.com port 22: No route to host 19:22:28 npm ERR! fatal: Could not read from remote repository.

    @lokesh

    opened by hituraj 1
  • "Uncaught ReferenceError: i is not defined at n.onload" when calling getImageData

    There seems to be an error in the function getImageData.

    The line "i = uInt8Array.length;" is giving the error "Uncaught ReferenceError: i is not defined at n.onload". Since it does not really do anything the line should be deleted.

    https://github.com/lokesh/color-thief/blob/ef231c711309dc32be1efa83bd4da7c0ed21cd6e/src/color-thief.js#L120

    opened by jcgjunge 0
Releases(v2.3.2)
  • v2.3.2(Jul 6, 2020)

  • v2.3.1(Jul 6, 2020)

    • #191 fix: quality option validation. Thanks to @Aaron-hanson Issue
    • chore: Fix npm script command syntax. Thanks again to @Aaron-hanson
    • tests: Add test for CORS
    • docs: Move contributing info inline in README. Add proj structure and more info around testing.
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Aug 4, 2019)

    • feat: Node support. Use color-thief-node.js file in dist folder
    • test: Added simple tests for node env with Mocha and Chai to go alongside the Cypress browser tests
    • build: Discontinue outputting sourcemaps

    Example node usage:

    const { resolve } = require('path');
    const ColorThief = require('colorthief');
    const img = resolve(process.cwd(), 'night.jpg');
    
    ColorThief.getColor(img)
    	.then((color) => {
    		console.log(color);
    	})
    
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Jul 15, 2019)

    Highlights

    • feat: Add CommonJS, AMD, and ES6 module support #161 (Note: Does not work in Node env because of <canvas> tag req in browser, but this is first step towards adding support.)

    Other changes

    • Replace uglify with microbundle for build step
    • Add test for es6 module loading
    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Jul 22, 2019)

    • fix: Remove node version requirement
    • refactor: Create sep repo for quantize lib and import
    • refactor: Use a shared core lib
    • test: Enable other palette count tests post-quantize func updates
    • test: Remove bad test case, colorcount(1)
    • wip: node support. see src/color-thief-node.js
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Jul 14, 2019)

    Highlights

    • Add Cypress for browser testing
    • Removes grunt and bower

    Changelog

    • chore: Remove Grunt. Use npm tasks. PR #145
    • chore: Discontinue Bower support. PR #146
    • chore: Add eslint. PR #151
    • test: Add Cypress for browser testing PR #146
    • test: Add browsertests: getColor on black, red, and multi-color image. PR #146
    • refactor: Don't append canvas tag to DOM #150
    • docs: Strip included example page to essentials. PR #146
    • style: tabs to spaces. PR #146
    • feat: Add demo page. PR #158
    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Oct 5, 2015)

    • [Fix] Remove left-over references to Creative Commons License. MIT all-around.
    • [Fix] MMCQ lib issues #16 by @nobodypb
    • [Fix] Incorrect bower.json main property path. #37 by @chellem, @joscha, @dkushner
    • [Fix] Quality less than 1 causes infinite loop #33 by @nteike
    • [Fix] MMCQ.quantize(...) can return false or undefined thus breaking the application #55 by @mhahmadi
    • [Remove] Drop version number from bower.json #70 by @kkirsche
    Source code(tar.gz)
    Source code(zip)
  • v2.0(Jul 29, 2013)

    Script changes

    • Remove jQuery requirement
    • Embed quantize methods directly in color-thief.js
    • Speed improvements to algorithm including the addition of an optional 'quality' parameter in the getPalette method

    Demo page changes

    • Examples now interactive; click to run
    • Added drag'n'drop demo
    Source code(tar.gz)
    Source code(zip)
Barcode generation library written in JavaScript that works in both the browser and on Node.js

Introduction JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It h

Johan Lindell 4.7k Dec 30, 2022
An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

Joseph Huckaby 8 Dec 1, 2022
Predefined color schemes for Chart.js

chartjs-plugin-colorschemes Predefined color schemes for Chart.js You can pick the perfect color combination for your charts from the predefined color

Akihiko Kusanagi 247 Dec 13, 2022
Automatic color generation for Chart.js

chartjs-plugin-autocolors Automatic color generation for Chart.js The generation is based on Janus Troelsen's answer at Stack Overflow. This plugin re

Jukka Kurkela 28 Dec 17, 2022
🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Packages toast-ui.image-editor - Plain JavaScript compo

NHN 5.7k Jan 6, 2023
πŸ“Έ Generate image using HTML5 canvas and SVG

egami β†’ image README | δΈ­ζ–‡ζ–‡ζ‘£ Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Dec 25, 2022
πŸ” Image recognition for nextcloud

Nextcloud Recognize Image recognition for Nextcloud This app goes through your photo collection and adds fitting tags, automatically categorizing your

Marcel Klehr 244 Jan 2, 2023
Generate an image of all your Github contributions

GitHub Contribution Chart Generator Generates an image of all your GitHub contributions since you have signed up, so you can use it in social media. T

Sallar 4.3k Jan 2, 2023
Github action generates dynamic image URL for contributor list to display it!

github-action-contributors Github action generates dynamic image URL for contributor list to display it! Contributors Usage - run: mkdir -p build - na

ε°εΌŸθ°ƒθ°ƒβ„’ 10 Dec 31, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Plug is a browser extension for users of the Internet Computer that allows you to access your ICP, Cycles, and other tokens as well as log into IC apps with one click.

Plug Introduction Welcome to Plug! An Internet Computer crypto wallet and authentication provider as a browser extension. Find our latest version in t

Psychedelic 150 Dec 23, 2022
Renders HTML into the browser's canvas

rasterizeHTML.js Renders HTML into the browser's canvas. See the API. Install $ npm install rasterizehtml Then include a script tag with node_modules

Christoph Burgmer 2.3k Dec 30, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023