Как получть доминирующий цвет в изображении js

Вопрос-ответ JavaScript
1

нужуно получить доминирующий цвет из изображения в формате #FFFFFF, без использования сторонних библиотек анализа изображений.

вот мои тщетные попытки:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>

<img width="100" id="i" src="php-test-colors.jpg" />
 <script src="script.js"></script>
</body>
</html>

var rgb = getAverageRGB(document.getElementById('i'));

document.body.style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';

function getAverageRGB(imgEl) {

var blockSize = 5,  

    defaultRGB = {r:0,g:0,b:0}, 

    canvas = document.createElement('canvas'),

    context = canvas.getContext && canvas.getContext('2d'),

    data, width, height,

    i = -4,

    length,

    rgb = {r:0,g:0,b:0},

    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) {

    alert('x');

    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];

}

rgb.r = ~~(rgb.r/count);

rgb.g = ~~(rgb.g/count);

rgb.b = ~~(rgb.b/count);

return rgb;

}
2