Get dominant color from base64 encoded string using ColorThief
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}`; | |
} |