Подобрать цвета изображения
Существует вероятность (плагинов или) не поймать [основные] цвета цвета с преобладающим, похож с Adobe Kuler, изображения?
Например
у Меня есть этот образ:
И хотел взять основные цвета ее, что бы Синий
26
2 answers
Следующий код собирает объект, содержащий гистограммы и восстанавливает цвет, наиболее распространенным использованием элемента canvas невидимым:
//carrega uma imagem
var img = new Image();
img.src = ...
//cria um canvas invisível
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
//desenha a imagem no canvas
context.drawImage(img, 0, 0);
//recupera vetor de cores
var map = context.getImageData(0, 0, img.width, img.height).data;
//monta histograma
var hex, r,g,b; //,alpha;
var histograma = {};
for (var i = 0, len = map.length; i < len; i += 4) {
//recupera componentes de um ponto
r = arredonda(map[i]);
g = arredonda(map[i+1]);
b = arredonda(map[i+2]);
//alpha = map[i+2]; //ignora canal alpha
//valor em hexadecimal
hex = rgbToHex(r, g, b);
//adiciona no histograma ou incrementa se já existir
if (histograma[hex] === undefined) {
histograma[hex] = 1;
} else {
histograma[hex]++;
}
}
//recupera cor mais comum
var corMaisComum = null;
var frequenciaCorMaisComum = 0;
for (var cor in histograma) {
if (frequenciaCorMaisComum < histograma[cor]) {
corMaisComum = cor;
frequenciaCorMaisComum = histograma[cor];
}
}
console.log(corMaisComum);
Гистограмма не более чем своего рода карта, где ключ-это цвет в шестнадцатеричном формате, а значение-частоту, что же происходит на изображении.
В Этом алгоритме, я использовал функцию arredonda восстановления цвета для arredondá его до кратного 5. Таким образом, небольшие различия в цвете, не будут мешать результат окончательный.
Обратите Внимание, что с p гистограммы не только можем получить цвет более распространенные, но и ранние N цвета наиболее распространенных. Для этого мы бы просто создать вектор с цветами, упорядоченного по частоте.
Приведенный выше код может быть просмотрен executanto сайте jsdo.it, но postarei же полный, случае станет недоступным: "
//"arredonda" o número para o múltiplo de 5 mais próximo
//isso adiciona uma certa tolerância para os tons próximos
function arredonda(v) {
return 5 * (Math.round(v / 5));
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
//carrega uma imagem
var img = new Image();
img.src = 'http://jsrun.it/assets/8/O/3/U/8O3Ux.jpg';
img.onload = function() {
$(document.body).append(img);
//cria um canvas invisível
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
//desenha a imagem no canvas
context.drawImage(img, 0, 0);
//recupera vetor de cores
var map = context.getImageData(0, 0, img.width, img.height).data;
var hex, r,g,b; //,alpha;
var histograma = {};
for (var i = 0, len = map.length; i < len; i += 4) {
//recupera componentes de um ponto
r = arredonda(map[i]);
g = arredonda(map[i+1]);
b = arredonda(map[i+2]);
//alpha = map[i+2]; //ignora canal alpha
//valor em hexadecimal
hex = rgbToHex(r, g, b);
//adiciona no histograma ou incrementa se já existir
if (histograma[hex] === undefined) {
histograma[hex] = 1;
} else {
histograma[hex]++;
}
}
//recupera cor mais comum
var corMaisComum = null;
var frequenciaCorMaisComum = 0;
for (var cor in histograma) {
if (frequenciaCorMaisComum < histograma[cor]) {
corMaisComum = cor;
frequenciaCorMaisComum = histograma[cor];
}
}
console.log(corMaisComum);
//adiciona um div como exemplo
$(document.body).append(
$('<div>').css({
'background-color': corMaisComum,
'width': '200px',
'height': '200px',
'border': '1px solid #000'
})
);
};
Визуальный результат, как на изображении ниже:
21
Author: utluiz, 2017-02-14 18:11:51
Вы можете использовать технологию Canvas содержащийся в браузерах, которые поддерживают HTML5(в настоящее время большинство), и с ним вы можете сделать функцию JavaScript, которая получает в качестве параметра его изображение и проверяет 5 на 5 пикселей котором определяется цвет, и проверяет, на все изображение, а затем цвет преобладает установлен, via R,G,B(red,green,blue) в нижней части страницы.
HTML Экземпляр будет иметь вид:
<span> Background é setado para a cor predominante desta imagem: </span>
<img id="i" src="data:image/jpeg;base64,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
BhSLCA6lqWSpRuTC0Uho6Gto0j//2Q=="/>
Obs: Преобразовал свое изображение в base64, :)
И функции, что делает , волшебная будет так:
var rgb = getAverageRGB(document.getElementById('i'));
document.body.style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
function getAverageRGB(imgEl) {
var blockSize = 5, //checa a cor à cada 5 pixels
defaultRGB = {r:0,g:0,b:0}, // para browsers com incompatibilidade
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; //zera o contador
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); //desenha a imagem cria o canvas
try {
data = context.getImageData(0, 0, width, height);
} catch(e) {
/* gera um erro de segurança, se a imagem for de dominio diferente */alert('x');
return defaultRGB;//retorna a cor padrão
}
length = data.data.length; //tamanho do array dos dados da imagem
while ( (i += blockSize * 4) < length ) {
++count; //incrementa o contador previamente zerado
rgb.r += data.data[i];
rgb.g += data.data[i+1];
rgb.b += data.data[i+2];
}
// ~~ usado para arrendondar valores para baixo
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
return rgb;
}
Например, работает в JSFiddle с вашим изображением.
Важно:
Функция не является моей собственной, здесь Артикул ответ на SOEN.
6
Author: Paulo Roberto Rosa, 2017-05-23 12:37:35