Клиенту требовалась помощь с программой, которая извлекает доминирующий цвет изображения продукта.
Мне удалось быстро реализовать это на Javascript; Алгоритм, приведенный ниже, выбирает только центральный квадрат сетки 3x3 на изображении для быстрой оценки цвета футболки на изображении.
var image = new Image();
image.onload = function() {
try {
// get dominant color by sampling the central square of a 3x3 grid on image
var dominantColor = getDominantColor();
// output color
$("#output").html(dominantColor);
}
catch(e) {
$("#output").html(e);
}
};
image.src = "sample_image.jpg";
function getDominantColor() {
// Copy image to canvas
var canvas = $("<canvas/>")[0];
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
// get pixels from the central square of a 3x3 grid
var imageData = canvas.getContext("2d").getImageData(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3).data;
var colorOccurrences = {};
var dominantColor = "";
var dominantColorOccurrence = 0;
for(var i = 0; i < imageData.length; i += 4) {
var red = imageData[i];
var green = imageData[i+1];
var blue = imageData[i+2];
//var alpha = imageData[i+3]; // not required for this task
var color = RGBtoHEX({"red": red, "green": green, "blue": blue});
if(colorOccurrences[color] == undefined) {
colorOccurrences[color] = 1;
}
else {
colorOccurrences[color] ++;
if(colorOccurrences[color] > dominantColorOccurrence) {
dominantColorOccurrence = colorOccurrences[color];
dominantColor = color;
}
}
}
return dominantColor;
}
function RGBtoHEX(rgb) {
var hexChars = "0123456789ABCDEF";
return "#"
+ (hexChars[~~(rgb.red/16)] + hexChars[rgb.red%16])
+ (hexChars[~~(rgb.green/16)] + hexChars[rgb.green%16])
+ (hexChars[~~(rgb.blue/16)] + hexChars[rgb.blue%16]);
}
Это изображение этот (предварительный просмотр ниже).
Однако результаты, когда это изображение обрабатывается в приведенном выше коде, различаются на разных машинах/браузерах: #FF635E
— это то, что я вижу на своем компьютере, работающем под управлением Windows7 и использующего Firefox 32. Мой клиент, работающий под управлением Mac, получает результат из #FF474B
в Safari и #FF474C
в Firefox 33.
Хотя результаты близки, почему в идеале они не совпадают? Действительно ли getImageData
зависит от локальных настроек или данные JPG интерпретируются по-разному на разных компьютерах? ?
Изменить: это изображение не единичный случай. Такие цветовые вариации были замечены в диапазоне изображения, которое клиент запросил для обработки. Мой клиент и я получили разные результаты для одного и того же набора изображений.
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
перед загрузкой изображения. Затем вы должны рендерить его и считывать пиксели. Другой способ — использоватьImageBitmap
API. К сожалению, похоже, что только Chrome поддерживает полную спецификацию с возможностью игнорировать преобразования цветового пространства. - person gman   schedule 10.12.2018