如何用JavaScript获取页面特定像素颜色？Chrome扩展适配网站配色

嘿，这个需求我太懂了！做适配网站配色的Chrome回到顶部扩展，用截图确实有点笨重，我给你几个更精巧的轻量方案，完全不用折腾Canvas截图那套，性能还好得多～

很多网站的左上角背景其实就是页面根元素（html/body）的背景色，我们可以直接通过getComputedStyle拿到计算后的样式，不用碰任何截图逻辑：

function getPageBaseColor() {
  // 先拿body的计算后背景色
  const bodyStyle = window.getComputedStyle(document.body);
  let bgColor = bodyStyle.backgroundColor;

  // 如果body背景是透明的，就往上取html元素的背景
  if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
    const htmlStyle = window.getComputedStyle(document.documentElement);
    bgColor = htmlStyle.backgroundColor;
  }

  // 兜底处理，防止全透明的情况
  if (!bgColor || bgColor === 'transparent') {
    bgColor = '#ffffff';
  }

  return bgColor;
}

优点：零性能开销，代码极简，适合大多数以根元素背景为主的网站；
缺点：如果左上角有浮动/定位元素（比如logo、导航按钮）覆盖了根背景，拿到的颜色就不是用户实际看到的了。

如果想拿到用户实际看到的左上角(0,0)位置的颜色，可以用document.elementFromPoint定位到该坐标的元素，再递归获取它（或父元素）的不透明背景色：

function getTopLeftActualColor() {
  let element = document.elementFromPoint(0, 0);
  if (!element) return '#ffffff';

  let bgColor = window.getComputedStyle(element).backgroundColor;

  // 如果当前元素背景透明，就递归找父元素的背景
  while ((bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') && element.parentElement) {
    element = element.parentElement;
    bgColor = window.getComputedStyle(element).backgroundColor;
  }

  return bgColor || '#ffffff';
}

优点：完全贴合用户视觉上的左上角颜色，不管是根背景还是被元素覆盖的情况都能准确获取；
缺点：比方案一多了几次DOM查询，但相比截图来说还是可以忽略不计的性能开销。

上面的方法返回的是RGB/RGBA格式，如果你需要十六进制颜色来写CSS，可以加个转换函数：

function rgbToHex(rgbColor) {
  // 如果已经是十六进制，直接返回
  if (rgbColor.startsWith('#')) return rgbColor;
  // 提取RGB数值
  const colorValues = rgbColor.match(/\d+/g).map(Number);
  // 转成十六进制并补零
  const hexString = colorValues.slice(0, 3)
    .map(val => val.toString(16).padStart(2, '0'))
    .join('');
  return `#${hexString}`;
}

// 使用示例
const topLeftHex = rgbToHex(getTopLeftActualColor());
// 然后就可以把这个颜色应用到你的回到顶部按钮上啦
document.getElementById('back-to-top-btn').style.backgroundColor = topLeftHex;

截图需要用Canvas渲染整个页面的像素数据，对于长页面来说会有明显的性能损耗，而且还要处理跨域问题（如果页面包含跨域图片，Canvas会被污染无法读取像素），相比之下上面的DOM方案既高效又安全。

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