Получить средний цвет изображения с помощью Javascript

Question

Не уверен, что это возможно, но хочу написать скрипт, который бы возвращал среднее значение hex или rgb для изображения. Я знаю, что это можно сделать в AS, но хочу сделать это в JavaScript.

Answer 1

Менее точный, но самый быстрый способ получить средний цвет изображения с поддержкой datauri:

function get_average_rgb(img) {
    var context = document.createElement('canvas').getContext('2d');
    if (typeof img == 'string') {
        var src = img;
        img = new Image;
        img.setAttribute('crossOrigin', ''); 
        img.src = src;
    }
    context.imageSmoothingEnabled = true;
    context.drawImage(img, 0, 0, 1, 1);
    return context.getImageData(1, 1, 1, 1).data.slice(0,3);
}

Answer 2

Существует онлайн-инструмент pickimagecolor.com , который помогает вам определить средний или доминирующий цвет изображения. Вам просто нужно загрузить изображение с вашего компьютера и затем нажать на изображение. Это дает средний цвет в HEX, RGB и HSV. Он также находит цветовые оттенки, соответствующие этому цвету на выбор. Я использовал это несколько раз.