Получить цвет пикселя из холста при перемещении мыши

Обзор

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

Решение

Чтобы добиться этого, сначала создайте холст нужных размеров:

Заполните холст такими элементами, как квадраты:

const example = document.getElementById('example');
const ctx = example.getContext('2d');

ctx.fillStyle = randomColor();
ctx.fillRect(0, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(55, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(110, 0, 50, 50);

Наконец, добавьте обработчик событий mousemove, который фиксирует значения пикселей в позиции курсора:

$('#example').mousemove(function(e) {
  // Calculate the position relative to the canvas
  const pos = findPos(this);
  const x = e.pageX - pos.x;
  const y = e.pageY - pos.y;
  const coord = `x=${x}, y=${y}`;

  // Get the pixel value
  const c = this.getContext('2d');
  const p = c.getImageData(x, y, 1, 1).data;

  // Convert to hex format
  const hex = "#"   ("000000"   rgbToHex(p[0], p[1], p[2])).slice(-6);

  // Display the color information
  $('#status').html(coord   "
"   hex);
});

Вспомогательные функции

Этот код использует вспомогательные функции для определения положения элемента и преобразования значений RGB в шестнадцатеричный формат. Определите эти функции следующим образом:

function findPos(obj) {
  let curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft  = obj.offsetLeft;
      curtop  = obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255) throw "Invalid color component";

  return ((r << 16) | (g << 8) | b).toString(16);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
  return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`;
}

Реальный пример

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

https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203