如何获取HTML页面最上层元素中指定像素的颜色？

document和window对象并没有getImageData方法，这个方法是CanvasRenderingContext2D的专属API。要实现针对整个文档获取指定像素颜色的功能，核心思路是将页面内容渲染到Canvas中再调用getImageData，或者针对简单场景直接获取元素的计算样式。以下是几种可行方案：

方案一：使用原生drawWindow（Firefox支持，Chrome受限） #

该方法可直接将窗口内容绘制到Canvas，但Chrome普通网页环境因隐私限制无法使用，仅Firefox或Chrome扩展等特殊环境支持：

function getDocumentPixelColor(x, y) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 匹配当前窗口尺寸
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 绘制整个窗口可见区域
  ctx.drawWindow(window, 0, 0, canvas.width, canvas.height, '#ffffff');
  // 获取像素RGBA数据
  const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
  return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
}

// 调用示例
console.log(getDocumentPixelColor(1, 1));

方案二：元素定位+计算样式（简单场景适用） #

通过document.elementFromPoint获取指定坐标的最上层元素，再读取其计算样式的颜色。此方法无法处理图片、渐变、半透明叠加等复杂样式，仅适合纯色元素场景：

function getElementPixelColor(x, y) {
  const targetElement = document.elementFromPoint(x, y);
  if (!targetElement) return null;
  const computedStyle = getComputedStyle(targetElement);
  // 优先返回背景色，如需前景色可替换为color属性
  return computedStyle.backgroundColor;
}

// 调用示例
console.log(getElementPixelColor(1, 1));

方案三：使用html2canvas（兼容性好，无需jQuery） #

html2canvas是一个轻量库，不依赖jQuery，能将页面内容准确渲染到Canvas，支持绝大多数浏览器：

// 先引入html2canvas（可通过CDN加载）
async function getPagePixelColor(x, y) {
  const canvas = await html2canvas(document.body);
  const ctx = canvas.getContext('2d');
  const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
  return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
}

// 调用示例
getPagePixelColor(1, 1).then(color => console.log(color));

内容的提问来源于stack exchange，提问作者Ilis Abilify