Color Thief

FAQ

All questions are about the usage of Color Thief in the browser, not Node.

Do I have to wait for the image to load?

Yes. If you see an error that reads: Cannot read property '0' of null, it is likely that the image had not finished loading when you passed it to getColor() or getPalette().

// RISKY 🙀
const colorThief = new ColorThief();
const img = document.querySelector('img');

colorThief.getColor(img);

// BETTER 👍
const colorThief = new ColorThief();
const img = document.querySelector('img');

if (img.complete) {
  colorThief.getColor(img);
} else {
  image.addEventListener('load', function() {
    colorThief.getColor(img);
  });
}

How do I test the script locally?

If you are testing the script locally in a web browser, you might see the following error: Access to script at 'file://...' from origin 'null' has been blocked by CORS policy. This is because the browser restricts direct access to the filesystem.

To get around this, you can set up a minimal server to host the files. One option is http-server. To run this on demand without installing it as a project dependency, you can use the npx command:

$ npx http-server

Now you can visit http://localhost:8080 to view your server.

Does it work if the image is hosted on another domain?

A) If you manage the server hosting the image...

Yes. If you are seeing an error that reads: The canvas has been tainted by cross-origin data., then you are running into a cross-origin resouce sharing (CORS) issue. Check the following two items:

1. CORS policy on the server. Is the server hosting the image properly configured? Make sure the requesting domain is whitelisted in the access-control-allow-origin header, or the server hosting the image has an open policy: access-control-allow-origin: *.
2. crossorigin attr. The HTML image element must be given a crossorigin attribute.

   <img src="https://aws.com/s3/image.jpg" crossorigin="anonymous" />

   If you're dynamically adding the image element, you can do the following:

   const colorThief = new ColorThief();
   const img = new Image();
   
   img.addEventListener('load', function() {
     colorThief.getColor(img);
   });
   
   img.crossOrigin = 'Anonymous';
   img.src = 'https://aws.com/s3/image.jpeg'

B) If you don't have access to the server hosting the image...

You can use a proxy server that pulls down the image and returns it with a more liberal CORS policy. Below you can see an example of this with an image that is proxied through a public Google server. If you don't own the proxy server, just know, that you are at their mercy. But this is handy in a pinch for testing.

const colorThief = new ColorThief();
const img = new Image();

img.addEventListener('load', function() {
  colorThief.getColor(img);
});

let imageURL = 'https://i.pinimg.com/564x/3b/b4/9b/3bb49bd2a7f86e29b5670da1fe03fee4.jpg';
let googleProxyURL = 'https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&refresh=2592000&url=';

img.crossOrigin = 'Anonymous';
img.src = googleProxyURL + encodeURIComponent(imageURL);

How do I get hex values?

The ColorThief methods return colors as an array of three integers representing red, green, and blue values. If you are looking to use the output in CSS, you can do that using the rgb format: color: rgb(102, 51, 153). If you do need to convert to hex, you can use the following function:

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
  const hex = x.toString(16)
  return hex.length === 1 ? '0' + hex : hex
}).join('')

rgbToHex(102, 51, 153); // #663399