то, что я хочу, - это среднее значение HEX или RGB от изображения к другому знаку div этого цвета.
Итак, если я загружаю изображение с красным, я получаю что-то вроде # FF0000 как пример.
Позвольте мне знать, если это возможно:)
Большое спасибо.
Сначала нарисуйте изображение на canvas
:
function draw(img) {
var canvas = document.createElement("canvas");
var c = canvas.getContext('2d');
c.width = canvas.width = img.width;
c.height = canvas.height = img.height;
c.clearRect(0, 0, c.width, c.height);
c.drawImage(img, 0, 0, img.width , img.height);
return c; // returns the context
}
Теперь вы можете перебирать пиксели изображения. Наивный подход для определения цвета - просто подсчитать частоту каждого цвета в изображении.
// returns a map counting the frequency of each color
// in the image on the canvas
function getColors(c) {
var col, colors = {};
var pixels, r, g, b, a;
r = g = b = a = 0;
pixels = c.getImageData(0, 0, c.width, c.height);
for (var i = 0, data = pixels.data; i < data.length; i += 4) {
r = data[i];
g = data[i + 1];
b = data[i + 2];
a = data[i + 3]; // alpha
// skip pixels >50% transparent
if (a < (255 / 2))
continue;
col = rgbToHex(r, g, b);
if (!colors[col])
colors[col] = 0;
colors[col]++;
}
return colors;
}
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
getColors
возвращает карту имен цветов и подсчетов. Прозрачные пиксели пропускаются. Это должно быть тривиально, чтобы получить наиболее часто просматриваемый цвет с этой карты.
Если вы буквально хотите получить среднее значение для каждого компонента цвета, вы можете легко получить это из результатов getColors
, но результаты вряд ли будут очень полезными. Этот ответ объясняет гораздо лучший подход.
Вы можете использовать все это:
// nicely formats hex values
function pad(hex) {
return ("000000" + hex).slice(-6);
}
// see this example working in the fiddle below
var info = document.getElementById("info");
var img = document.getElementById("squares");
var colors = getColors(draw(img));
for (var hex in colors) {
info.innerHTML += "<li>" + pad(hex) + "->" + colors[hex];
}
См. рабочий рабочий пример.
((r << 16) | (g << 8) | b)
Это возможно только с помощью тега canvas, как описано здесь:
http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation
Конечно, это доступно только в новых браузерах
Вы можете использовать фильтры свертки, которые css позволяет вам применять. Это может помочь получить эффект, который вы собираетесь использовать (если вы хотите представить его обратно в html). Таким образом, вы можете отображать изображение дважды, один свернутый.
Говоря это, на самом деле не работает, если вам нужна информация для какой-то цели.
Чтобы найти этот средний цвет: