Вы можете пройтись по всем пикселям и проверить их цвет, как сказал Владислав Матвиенко.
- Покажите свою картинку
- Создать словарь
- Перебор всех ваших пикселей
- Получить цвет текущего пикселя
- Если ваш словарь уже содержит текущий цвет, добавьте его в массив (какой ключ является цветом)
- Если словарь не содержит текущий цвет, создайте экземпляр массива (ключ которого является цветом), а затем добавьте к нему цвет.
Пример:
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const pixels;
function draw(canvas, ctx) {
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 3, 3);
ctx.fillRect(0, 10, 3, 3);
ctx.fillStyle = '#00f';
ctx.fillRect(10, 0, 3, 3);
ctx.fillRect(10, 10, 3, 3);
}
function getPixelsByColors(canvas, ctx) {
let pixel;
let color;
let dict = {};
for (let i = 0; i < canvas.width; i++) {
for (let j = 0; j < canvas.height; j++) {
pixel = ctx.getImageData(i, j, 1, 1);
color = getColorFromPixel(pixel);
if (!dict[color]) {
dict[color] = [];
}
dict[color].push({ x: i, y: j });
}
}
return dict;
}
function getColorFromPixel(pixel) {
let red = pixel.data[0];
let green = pixel.data[1];
let blue = pixel.data[2];
let alpha = pixel.data[3];
let color = red + '-' + green + '-' + blue + '-' + alpha;
return color;
}
draw(canvas, ctx);
pixels = getPixelsByColors(canvas, ctx);
console.log('pixels', pixels);
Попробуйте (вот jsfiddle , который отображает содержимое словаря в консоли).