JS实现取色

2026-02-02 12:14:56JavaScript

使用 `input[type="color"]` 获取颜色值

HTML5 提供了原生颜色选择器，通过 <input type="color"> 可直接调用系统取色工具。用户选择的颜色会以十六进制格式返回。

<input type="color" id="colorPicker">
<script>
  const colorPicker = document.getElementById('colorPicker');
  colorPicker.addEventListener('input', (e) => {
    console.log('Selected color:', e.target.value); // 输出十六进制颜色值（如 #FF0000）
  });
</script>

通过 Canvas 获取图片像素颜色

若需从图片或画布中取色，可通过 CanvasRenderingContext2D.getImageData() 获取像素数据，提取 RGBA 值。

function getPixelColor(image, x, y) {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  return `rgba(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}, ${pixelData[3] / 255})`;
}

// 示例：从图片中取色
const img = new Image();
img.src = 'example.jpg';
img.onload = () => {
  const color = getPixelColor(img, 100, 50); // 获取坐标 (100,50) 的颜色
  console.log(color); // 输出 RGBA 值（如 rgba(255,0,0,1)）
};

监听鼠标位置实时取色

结合 Canvas 和鼠标事件，可实现实时取色功能。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200);

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
  document.body.style.backgroundColor = color; // 实时背景色变化
});

使用第三方库

若需更复杂功能（如调色板、颜色转换），可引入第三方库：

TinyColor：轻量级颜色处理库，支持格式转换。
EyeDropper API（实验性）：浏览器原生 API，允许用户从屏幕任意位置取色。

// EyeDropper API 示例（需浏览器支持）
if ('EyeDropper' in window) {
  const dropper = new EyeDropper();
  dropper.open()
    .then(result => console.log('Screen color:', result.sRGBHex))
    .catch(err => console.error('取色失败:', err));
}