Obtener color de píxel del lienzo en Mousemove

Descripción general

Esta publicación explora cómo recuperar los valores RGB del píxel debajo del cursor del mouse mientras moviéndose sobre un elemento de lienzo. Proporcionaremos un enfoque integral con un ejemplo independiente.

Solución

Para lograr esto, primero cree un lienzo con las dimensiones deseadas:

Rellena el lienzo con elementos como cuadrados:

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);

Finalmente, agregue el controlador de eventos mousemove que captura los valores de píxeles en la posición del cursor:

$('#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);
});

Funciones de utilidad

Este código se basa en funciones de soporte para encontrar la posición del elemento y convertir valores RGB a hexadecimales. Defina estas funciones de la siguiente manera:

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)})`;
}

Ejemplo en vivo

Visite el siguiente enlace para ver el ejemplo completo en acción:

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