如何通过jQuery或JavaScript在鼠标移动时获取光标位置的屏幕像素颜色（无需使用Canvas或第三方插件）

嘿，首先得明确一个浏览器安全层面的硬限制：你没办法直接获取屏幕上任意位置的像素颜色，这是出于隐私保护的考虑（毕竟浏览器不能随便读取用户其他窗口的内容对吧）。不过如果你的需求是获取当前页面内某个元素（比如图片、带背景图的元素）上鼠标落点的像素颜色，还是有可行方案的——虽然得用到Canvas，但可以把它藏得严严实实的，完全不影响页面，而且不需要任何第三方插件，纯原生JS/jQuery就能搞定。

核心思路（针对页面内元素） #

• 监听目标元素的鼠标移动事件，计算鼠标相对于元素的精确坐标；
• 创建一个隐藏的Canvas，把目标元素的内容（比如图片、背景图）绘制到Canvas上；
• 利用Canvas的getImageData()方法提取对应坐标的像素RGB/A值。

原生JS示例（以页面图片为例） #

假设你的页面里有一张ID为target-img的图片，代码如下：

const img = document.getElementById('target-img');
// 创建隐藏的Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 让Canvas尺寸和图片完全匹配
canvas.width = img.width;
canvas.height = img.height;
// 把Canvas藏起来，不占页面空间
canvas.style.position = 'absolute';
canvas.style.top = '-9999px';
canvas.style.left = '-9999px';
document.body.appendChild(canvas);

// 把图片绘制到Canvas上
ctx.drawImage(img, 0, 0);

// 监听图片上的鼠标移动
img.addEventListener('mousemove', (e) => {
  // 计算鼠标相对于图片左上角的坐标
  const elementRect = img.getBoundingClientRect();
  const mouseX = e.clientX - elementRect.left;
  const mouseY = e.clientY - elementRect.top;

  // 获取对应点的像素数据
  const pixel = ctx.getImageData(mouseX, mouseY, 1, 1).data;
  const [red, green, blue, alpha] = pixel;

  // 这里可以根据需求处理颜色值，比如打印到控制台
  console.log(`当前像素颜色：RGB(${red}, ${green}, ${blue})，透明度：${alpha}`);
});

关键注意事项 #

• 跨域限制：如果你的图片来自其他域名，必须确保服务器配置了CORS允许跨域访问，否则浏览器会阻止你获取ImageData（安全机制）；
• 背景图处理：如果要获取的是元素背景图的像素，需要先把背景图地址提取出来，创建一个Image对象加载它，再绘制到Canvas上；
• 全屏/跨元素需求：如果想获取整个页面任意位置的像素，需要把整个页面内容绘制到Canvas上，但同样受限于跨域（比如页面里有跨域图片的话就会失败）；
• 纯屏幕像素不可行：如果你的需求是获取浏览器窗口外的屏幕像素，那真的没办法——浏览器没有提供这样的API，这是隐私安全红线。

内容的提问来源于stack exchange，提问作者Rupinderpal Thind