Obtenir la couleur des pixels à partir du canevas sur Mousemove

Présentation

Cet article explore comment vous pouvez récupérer les valeurs RVB du pixel sous le curseur de la souris tout en se déplacer sur un élément de canevas. Nous fournirons une approche complète avec un exemple autonome.

Solution

Pour y parvenir, créez d'abord un canevas avec les dimensions souhaitées :

Remplissez le canevas avec des éléments tels que des carrés :

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

Enfin, ajoutez le gestionnaire d'événements mousemove qui capture les valeurs de pixels à la position du curseur :

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

Fonctions utilitaires

Ce code s'appuie sur des fonctions de prise en charge pour trouver la position de l'élément et convertir les valeurs RVB en hexadécimal. Définissez ces fonctions comme suit :

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

Exemple en direct

Visitez le lien suivant pour voir l'exemple complet en action :

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