Comment obtenir la valeur RVB d'un pixel sous la souris sur une toile ?

Récupération de la couleur des pixels sous la souris sur le canevas à l'aide de Mousemove

Dans les applications Web, il est souvent utile d'obtenir directement la valeur RVB du pixel sous le curseur de la souris lorsqu'il interagit avec un élément du canevas. Voici comment y parvenir en JavaScript :

Exemple :

Considérez ce code HTML :

<code class="html"><canvas id="canvas" width="200" height="200"></canvas>
<div id="color-value"></div></code>

Et le code JavaScript suivant :

<code class="js">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Set up an image on the canvas
const img = new Image();
img.src = "path/to/image.jpg";

img.onload = function() {
  context.drawImage(img, 0, 0);
};

// Add event listener for mouse movement
canvas.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const pixelData = context.getImageData(x, y, 1, 1).data;
  const r = pixelData[0];
  const g = pixelData[1];
  const b = pixelData[2];
  
  document.getElementById("color-value").innerHTML = `RGB: ${r}, ${g}, ${b}`;
});</code>

Dans cet exemple, la méthode drawImage est utilisée pour afficher une image sur le canevas. Lorsque la souris se déplace sur le canevas, l'écouteur d'événement mousemove capture la position actuelle de la souris et calcule les coordonnées des pixels dans le canevas à l'aide de la fonction getBoundingClientRect. Il récupère ensuite les données de pixels à l'aide de la méthode getImageData et affiche les valeurs RVB dans le div de valeur de couleur.

Notes supplémentaires :

• Le tableau pixelData renvoyé by getImageData contient quatre valeurs : rouge, vert, bleu et alpha (transparence).
• L'écouteur d'événement peut être modifié pour effectuer d'autres actions, comme le rendu d'une info-bulle ou la mise à jour d'un élément de l'interface utilisateur.
• Cette technique peut être étendue pour travailler avec du contenu dynamique sur le canevas, tel que des formes dessinées ou des objets en mouvement.

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!