JS实现取色
使用 input[type="color"] 元素
通过 HTML5 提供的原生颜色选择器快速实现取色功能：
<input type="color" id="colorPicker">
<script>
document.getElementById('colorPicker').addEventListener('input', (e) => {
console.log('Selected color:', e.target.value); // 输出 HEX 格式颜色值（如 #RRGGBB）
});
</script>通过 Canvas 获取像素颜色
适用于从图像或画布中提取特定坐标的颜色：
function getPixelColor(imageElement, x, y) {
const canvas = document.createElement('canvas');
canvas.width = imageElement.width;
canvas.height = imageElement.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(imageElement, 0, 0);
const pixelData = ctx.getImageData(x, y, 1, 1).data;
return `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
}监听鼠标位置获取页面颜色
结合 document.elementFromPoint() 获取 DOM 元素颜色：
document.addEventListener('mousemove', (e) => {
const element = document.elementFromPoint(e.clientX, e.clientY);
if (element) {
const style = window.getComputedStyle(element);
console.log('Background color:', style.backgroundColor);
}
});第三方库实现高级取色
使用开源库（如 eyeDropper API 或 color-thief）扩展功能：
// 示例：eyeDropper API（需浏览器支持）
if ('EyeDropper' in window) {
const eyeDropper = new EyeDropper();
eyeDropper.open().then(result => {
console.log('Picked color:', result.sRGBHex);
});
}注意事项
- 跨域限制：通过 Canvas 获取图片颜色时，需确保图片具有 CORS 权限。
- 浏览器兼容性：
EyeDropperAPI 仅部分现代浏览器支持，需做兼容检测。 - 性能优化：高频监听鼠标移动时建议使用防抖（debounce）减少计算压力。
