用纯 JS 创建惊人的拾色器：揭开网页上任何颜色的秘密

前端

2023-12-31 05:21:33

前言：颜色，网页设计的生命力

色彩在网页设计中扮演着至关重要的角色，影响着用户体验、品牌认知和整体美感。然而，有时你需要从现有网页或图像中提取特定的颜色值，而这时，一个好用的拾色器就派上用场了。

JavaScript 拾色器：网页色彩探索利器

使用纯 JavaScript 构建的拾色器提供了一种简单而高效的方式来获取网页上任何像素的颜色值。它的工作原理主要分三个步骤：

网页截图： 拾色器通过 JavaScript API 获取网页的屏幕截图，从而获取屏幕上每个像素的数据。
绘制并获取像素点颜色： 它使用 Canvas API 在屏幕截图上绘制一个像素大小的点，然后获取该点的颜色值。
显示颜色信息： 获取的颜色值以十六进制、RGB 和 HSL 格式显示，方便用户复制或使用。

完整源码：解锁拾色器的力量

以下是你可以在网页中实现拾色器的完整 JavaScript 代码：

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

// 获取屏幕截图
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.drawImage(document.documentElement, 0, 0);

// 在屏幕截图上绘制像素点
const x = event.clientX;
const y = event.clientY;
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
ctx.fillRect(x, y, 1, 1);

// 获取像素点颜色
const pixelData = ctx.getImageData(x, y, 1, 1).data;
const hex = '#' + ((1 << 24) + (pixelData[0] << 16) + (pixelData[1] << 8) + pixelData[2]).toString(16).slice(1);

// 显示颜色信息
console.log('十六进制：', hex);
console.log('RGB：', `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`);
console.log('HSL：', `hsl(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`);