Pixelfarbe von der Leinwand bei Mausbewegung abrufen

Übersicht

In diesem Beitrag wird untersucht, wie Sie die RGB-Werte des Pixels unter dem Mauszeiger abrufen können, während Bewegen über ein Leinwandelement. Wir liefern einen umfassenden Ansatz mit einem eigenständigen Beispiel.

Lösung

Um dies zu erreichen, erstellen Sie zunächst eine Leinwand mit den gewünschten Abmessungen:

Füllen Sie die Leinwand mit Elementen wie Quadraten:

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

Fügen Sie schließlich den Mousemove-Ereignishandler hinzu, der die Pixelwerte an der Position des Cursors erfasst:

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

Hilfsfunktionen

Dieser Code basiert auf unterstützenden Funktionen zum Ermitteln der Position des Elements und zum Konvertieren von RGB-Werten in Hex. Definieren Sie diese Funktionen wie folgt:

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

Live-Beispiel

Besuchen Sie den folgenden Link, um das vollständige Beispiel in Aktion zu sehen:

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