Get dominant color from base64 encoded string using ColorThief

#StandWithUkraine

Today, 20th March 2023, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

To install package use:

npm i color-thief --save

Here is a function you can use:

 async function getImageFromBase64str(b64str) {
    const img = document.createElement('img');
    await new Promise((r) => {
      img.src = b64str;
      img.onload = r;
    })
    const colorThief = new ColorThief();
    const rgba = colorThief.getColor(img, 5);
    if (!rgba) {
      return 'rgba(0,0,0,0)'; // seems to happen on white image
    } else {
      return rgbToHex(rgba[0], rgba[1], rgba[2]);
    }
}

If you need rgbToHex helper:

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

Nov 25, 2021

by Ivan Borshchov

Did it help you?

Yes !

Best related

How to generate a webfont [automated setup]

Changing color themes in CSS [Simple method]

CSS Basics – everything you need to know

	async function getImageFromBase64str(b64str) {
	const img = document.createElement('img');
	await new Promise((r) => {
	img.src = b64str;
	img.onload = r;
	})
	const colorThief = new ColorThief();
	const rgba = colorThief.getColor(img, 5);
	if (!rgba) {
	return 'rgba(0,0,0,0)'; // seems to happen on white image
	} else {
	return rgbToHex(rgba[0], rgba[1], rgba[2]);
	}
	}

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