Comment obtenir la couleur des pixels d’une toile sur Mousemove ?

Obtenir la couleur des pixels à partir de Canvas 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 globale avec un exemple autonome.

Solution

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

<code class="html"><canvas id="example" width="200" height="60"></canvas></code>

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

<code class="js">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);</code>

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

<code class="js">$('#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 + "<br>" + hex);
});</code>

Fonctions utilitaires

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

<code class="js">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)})`;
}</code>

Exemple en direct

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!