Получение RGB цвета пикселя с canvas при mousemove

Быстрый ответ

Для определения цвета пикселя на холсте в момент происхождения события mousemove, вы можете воспользоваться следующим кодом на JavaScript. Он определяет текущее местоположение курсора мыши, применяет к контексту холста метод getImageData для получения информации о пикселе, и извлекает из нее RGB-значения:

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

canvas.addEventListener('mousemove', e => {
  const [r, g, b] = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
  console.log(`rgb(${r}, ${g}, ${b})`);
});

В данном примере e.offsetX и e.offsetY — это координаты мыши относительно осям X и Y соответственно, а метод getImageData возвращает массив с цветовыми данными в формате RGB.

Учет альфа-канала: прозрачность – хитрый друг

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

function getCompositeColor(r, g, b, a, br, bg, bb) {
  return [
    (1 – a) * br + a * r,
    (1 – a) * bg + a * g,
    (1 – a) * bb + a * b
  ].map(Math.round);
}

const bgColor = { r: 255, g: 255, b: 255 };
canvas.addEventListener('mousemove', e => {
  const [r, g, b, a] = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
  const [red, green, blue] = getCompositeColor(r, g, b, a / 255, bgColor.r, bgColor.g, bgColor.b );
  console.log(`rgb(${red}, ${green}, ${blue})`);
});

Производительность: оставайтесь быстрыми, как гепард

Чтобы избежать лишней нагрузки на программу вызовами getImageData при каждом событии mousemove, вы можете получить данные об изображении один раз, а затем использовать их при каждом движении курсора. Такой подход значительно ускоряет выполнение работы скрипта:

let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;

canvas.addEventListener('mousemove', e => {
  let index = (e.offsetY * imageData.width + e.offsetX) * 4;
  let r = data[index];
  let g = data[index + 1];
  let b = data[index + 2];
  console.log(`rgb(${r}, ${g}, ${b})`);
});

Использование requestAnimationFrame поможет сделать обновления экрана более плавными. Пример сочетания данного метода с событием mousemove вы можете видеть ниже:

const updateColor = (e) => {
  let index = (e.offsetY * imageData.width + e.offsetX) * 4;
  let r = data[index], g = data[index + 1], b = data[index + 2];
  console.log(`rgb(${r}, ${g}, ${b})`);
};

let lastEvent;
canvas.onmousemove = function(e) {
  lastEvent = e; 
};
function loop() {
  if (lastEvent) {
    updateColor(lastEvent);
    lastEvent = null;
  }
  requestAnimationFrame(loop);
}
loop();

Мощность библиотеки jQuery

Если вы цените jQuery за ее краткость и удобство, вы можете применить ее для обработки событий mousemove и упрощения вычисления координат:

const $canvas = $('#canvas');
const ctx = $canvas.get(0).getContext('2d');
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;

$canvas.on('mousemove', function(e) {
  let offset = $canvas.offset();
  let x = e.pageX – offset.left;
  let y = e.pageY – offset.top;
  let index = (y * imageData.width + x) * 4;
  let r = data[index], g = data[index + 1], b = data[index + 2];
  console.log(`rgb(${r}, ${g}, ${b})`);
});

Визуализация

Представленный ниже код будет рассматривать экран вашего компьютера как холст с яркими пикселями и курсор мыши как инструмент для определения цвета каждого такого пикселя.

Экран 🖼️: [🔴,🟢,🔵,🟡]

canvas.addEventListener('mousemove', (event) => {
   // Курсор, как детектор цветов
});

Позиция курсора: [x, y]
Цвет пикселя: 🔴

Так вы можете легко исследовать цветовые характеристики любого пикселя под вашим курсором.

Расширенные возможности применения: Мир за пределами холста

Этот подход имеет много применений:

1. Создание палитры цветов

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

Подробнее об этом расскажет наш спикер на видео

2. Интерактивное искусство и игровой дизайн

Этот прием позволяет создавать интерактивные графические элементы и вводит новые измерения в геймплей.

3. Визуализация данных

Вытягивание цветов пикселей помогает улучшить взаимодействие с графиками в визуализациях данных.

Дилемма плотности пикселей

Высокая плотность пикселей на некоторых дисплеях может создавать проблемы из-за несоответствия размеров. Используйте devicePixelRatio для корректировки:

const ratio = window.devicePixelRatio || 1;
canvas.addEventListener('mousemove', e => {
  const [r, g, b] = ctx.getImageData(e.offsetX * ratio, e.offsetY * ratio, 1, 1).data;
  console.log(`rgb(${r}, ${g}, ${b})`);
});

Кроссдоменные ограничения: Действуйте аккуратно с пикселями!

Работать с внешними изображениями на вашем холсте могут сопровождаться некоторыми ограничениями безопасности. Чтобы избежать их, используйте изображения с соответствующими CORS-заголовками или вставьте изображения напрямую через ссылки data URIs.

Полезные материалы

1. CanvasRenderingContext2D: метод getImageData() – Веб API | MDN
2. Определение цвета пикселя на холсте при движении мыши – Stack Overflow
3. Учебник: координаты мыши на HTML5 Canvas
4. Учебник: Метод getImageData() HTML-холста
5. Манипулирование пикселями с помощью Canvas | CSS-Tricks
6. Интерактивный пример на CodePen: Палитра цветов