0

I Just want to get pixel color on mouse move in jquery or javascript. Is there any possible way to get that as I don't want to use canvas or any third party plugin. I need color of that pixel on my cursor position.

Any one please help?

Rupinderpal Thind
  • 457
  • 5
  • 20
  • As I want to get that background area on my current mouse's position. Is it possible with any way? – Rupinderpal Thind May 09 '21 at 13:16
  • https://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor Is this your question? If yes check there – Prakash M May 09 '21 at 13:23

1 Answers1

1

If all you want is background color you can use document.elementFromPoint() and getComputedStyle().

For more advanced issues like pixel color in an image this will not work

window.addEventListener('click', e=>{
  const {clientX:x, clientY:y} = e,
      el = document.elementFromPoint(x, y),
      style = window.getComputedStyle(el);
      
  console.log(style.backgroundColor)
});

initDemo()

function initDemo(){
  const colors =['red','blue', 'purple','green','grey']

  document.querySelectorAll('.box').forEach((el,i)=>{
   el.style.backgroundColor = colors[i]
  });
}
.box{ border:2px solid #ccc; width:50px; margin:30px; height:50px; display:inline-block; color:yellow}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
charlietfl
  • 170,828
  • 13
  • 121
  • 150