Color where Mouse is in HTML file

Question

I've seen a few posts on this topic, but I haven't seen one that would help my cause. I have a topographical map image, with color from white to black, which is 0 meters to 1000 meters respectively. They have all the colors in between, like purple, blue, green, etc. How can I get the color of wherever the mouse is, and then show what the height is? Any suggestions help!

Here's a link to what I've tried. I have tried most of these on that post, but either they don't work for me, or I am doing them wrong. JavaScript eyedropper (tell color of pixel under mouse cursor)

"They don't work for me" isn't enough to go by. You can definitely draw an image onto a ` — AKX, Oct 21 '20 at 12:13
[How to create a Minimal, Reproducible Question](https://stackoverflow.com/help/minimal-reproducible-example) — Ron, Oct 21 '20 at 12:21
@AKX Then I'm doing something wrong. I don't know how to output getImageData. — Matt_Mack, Oct 21 '20 at 12:25

AKX · Accepted Answer · 2020-10-21T12:37:40.143

Here's a working example using a canvas.

var canvas = document.getElementById("c");
var textarea = document.getElementById("r");

var ctx = canvas.getContext("2d");
// You could use drawImage here, but since we can't use cross-origin images
// and get their pixels, i'll just draw some random blurry circles instead.
ctx.filter = 'blur(3px)';
for(var i = 0; i < 100; i++) {
  ctx.beginPath();
  var r = Math.random() * 30;
  var h = Math.random() * 360;
  ctx.ellipse(Math.random() * 200, Math.random() * 200, r, r, 0, 0, 6.283);
  ctx.fillStyle = `hsl(${h}deg,100%,50%)`;
  ctx.fill();
}
canvas.addEventListener("mousemove", (e) => {
  var x = e.offsetX;
  var y = e.offsetY;
  var data = ctx.getImageData(x, y, 1, 1);
  var [r, g, b, a] = data.data;
  textarea.value = `${r},${g},${b},${a}`;
  textarea.style.background = `rgb(${r},${g},${b})`;
});

<textarea id="r" placeholder="Mouse over the image below."></textarea><br>
<canvas style="border: 1px dotted black" width="200" height="200" id="c"></canvas>

What do you mean by not being able to use cross-origin images? — Matt_Mack, Oct 21 '20 at 12:41
@Matt_Mack https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — Liam, Oct 21 '20 at 12:47
In particular, using a cross-origin image with Canvas "taints" the canvas so you can't use getImageData on it — AKX, Oct 21 '20 at 14:52

Color where Mouse is in HTML file

1 Answers1