当前位置：首页 > JavaScript

js实现吸色

2026-01-15 14:04:06JavaScript

使用Canvas实现吸色功能

通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素，将目标图像绘制到Canvas上，通过鼠标事件获取坐标对应的颜色值。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = document.querySelector('img');

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
};

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixel = ctx.getImageData(x, y, 1, 1).data;
  const rgb = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
  console.log('Selected color:', rgb);
});

使用EyeDropper API实现吸色

现代浏览器支持EyeDropper API，提供更简单的吸色方式。调用window.EyeDropper接口打开拾色器，返回用户选择的颜色值。

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  eyeDropper.open()
    .then(result => {
      console.log('Selected color:', result.sRGBHex);
    })
    .catch(err => {
      console.error('EyeDropper error:', err);
    });
} else {
  console.log('EyeDropper API not supported');
}

获取DOM元素颜色值

对于页面上的DOM元素，可以通过getComputedStyle方法获取其计算后的样式颜色值。

const element = document.getElementById('target');
const styles = window.getComputedStyle(element);
const color = styles.getPropertyValue('color');
console.log('Element color:', color);

颜色格式转换

将获取的颜色值转换为不同格式，使用正则表达式或颜色转换库实现RGB、HEX、HSL等格式间的转换。

function rgbToHex(rgb) {
  const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  if (!match) return rgb;

  const r = parseInt(match[1]).toString(16).padStart(2, '0');
  const g = parseInt(match[2]).toString(16).padStart(2, '0');
  const b = parseInt(match[3]).toString(16).padStart(2, '0');

  return `#${r}${g}${b}`.toUpperCase();
}