В этом посте я расскажу, как можно извлечь цветовой код пикселя в заданном изображении.

Мы будем использовать API элемента Canvas HTML 5 и некоторый ванильный код javascript.

Код для выполнения большей части тяжелой работы выглядит так:

Как вы можете, мы начинаем с создания пустого элемента холста, а затем рисуем это изображение следующим образом. Обратите внимание, что мы сохраняем координаты x и y на холсте равными 0,0, а также сохраняем размеры холста такими же, как у изображения.

canvas.width = img.width;
canvas.height = img.height;
let ctx: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
ctx.drawImage(img, 0, 0);

А затем мы используем API Canvas и вызываем getImageData функцию, которая вернет объект, представляющий базовые пиксельные данные для указанной части холста, которым в нашем случае является весь холст.

const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

Теперь у нас есть очень большой массив данных пикселей, поэтому все, что нам нужно сделать, это зафиксировать событие перемещения мыши и найти эти данные пикселей из массива данных изображения.

canvas.addEventListener("mousemove", (ev) => {
  //as the mouse moves around the image
  let cols = canvas.width;
  let { offsetX, offsetY } = ev;
  
   //call the method to get the r,g,b,a values for current pixel
   let c = extractPixelColor(cols, offsetY, offsetX);
   
   //build a colour string for 
   let colour = `rgb(${c.red}, ${c.green}, ${c.blue})`} ;
   let hexCode = `#${[c.red, c.green, c.blue].map((x) =>
    x.toString(16).padStart(2, "0")).join("")}`;
        
});

И, наконец, интересная часть получения значения пикселя из данных изображения.

Для этого нам нужно понять, как устроены пиксели. Например, если у нас есть изображение размером 5x5 пикселей, то массив будет выглядеть следующим образом.

Каждый элемент на изображении выше представляет пиксель, и каждый пиксель имеет 4 значения в порядке RGBA (красный, зеленый, синий и альфа). Следовательно, массив, содержащий эти пиксели, будет состоять из 5*5*4 = 100 элементов. Вы можете себе представить, что этот массив становится действительно большим, когда мы загружаем большее изображение.

Теперь, если вы хотите извлечь значение элемента (2,2), тогда математическая формула для этого индекса пикселя будет

PixelIndex = (Total number of columns * Row Number) + Column Number
// PixelIndex value for (2,2) will be (5*2)+3 = 28

Когда у вас есть индекс пикселя, получить значения для RGBA довольно просто.

red = imgData[PixelIndex * 4]
green = imgData[(PixelIndex * 4) + 1]
blue = imgData[(PixelIndex * 4) + 2]
alpha = imgData[(PixelIndex * 4) + 3]

И, наконец, функция extractPixelColour будет выглядеть так

После получения значения RGB в данных изображения вы можете преобразовать их в шестнадцатеричное значение цветового кода, как это

hexcolorcode = `#${[red, green, blue].map((x) => x.toString(16).padStart(2, "0")).join("")}`

Спасибо за чтение, и если вы хотите поддержать меня, то, пожалуйста, следуйте за мной и сохраните всех нас на этой платформе, став участником.



Присоединяйтесь к Medium по моей реферальной ссылке — Meta Collective
Как участник Medium, часть вашего членского взноса идет авторам, которых вы читаете, и вы получаете полный доступ к каждой истории… medium.com



Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу