首页 » 小工具 » 色彩采集工具，在线图片颜色吸取工具

色彩采集工具，在线图片颜色吸取工具

本色彩采集工具是一款简单易用的在线颜色提取器，允许用户上传图片并通过点击任意位置获取该区域的颜色值（RGB 和 Hex）。无需安装任何软件，即可快速采集颜色，适用于网页设计、UI 设计、产品配色等场景。

图片颜色吸管工具

上传图片并点击图片中的任何区域来采集颜色：

十六进制代码: #000000

RGB值: rgb(0, 0, 0)

通过该工具可以用来确定网站主色调、设计海报、设计网页等。

在线图片色彩采集工具的原理解析

色彩采集工具主要组成部分

本工具主要由以下几个部分组成：

HTML 结构：包括图片上传按钮、画布（Canvas）、颜色显示区域和复制按钮。
CSS 样式：用于布局、吸管光标效果、按钮样式等。
JavaScript 逻辑：处理图片上传、绘制、坐标计算、颜色提取和复制功能。

色彩采集工具主要技术实现

图片上传并绘制

用户通过 <input type="file"> 选择图片后，利用 JavaScript FileReader API 读取图片数据，并将其绘制到 <canvas> 画布上。

colorPickerImageUploader.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            img.onload = function() {
                // 计算图片缩放比例，最大宽度 800px，保持比例
                const maxWidth = 800;
                const scale = img.width > maxWidth ? maxWidth / img.width : 1;
                const newWidth = img.width * scale;
                const newHeight = img.height * scale;

                // 设置画布大小与图片一致
                colorPickerCanvas.width = newWidth;
                colorPickerCanvas.height = newHeight;

                // 在画布上绘制图片
                ctx.drawImage(img, 0, 0, newWidth, newHeight);
                imageUploaded = true;
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    }
});

核心逻辑：

读取图片数据后创建 Image 对象。
计算图片的缩放比例，使宽度最大不超过 800px，并保持比例缩放。
设置 canvas 画布的尺寸与调整后的图片一致。
使用 ctx.drawImage(img, 0, 0, newWidth, newHeight); 在 canvas 上绘制图片。

颜色采集

当用户在 canvas 上点击时，通过 getImageData() 方法获取该像素的颜色值。

colorPickerCanvas.addEventListener('click', function(e) {
    if (!imageUploaded) {
        alert('请先上传图片');
        return;
    }
    const x = e.offsetX;
    const y = e.offsetY;

    // 获取该像素的颜色数据
    const pixel = ctx.getImageData(x, y, 1, 1).data;
    const r = pixel[0];
    const g = pixel[1];
    const b = pixel[2];

    // 计算 Hex 颜色值
    const rgb = `rgb(${r}, ${g}, ${b})`;
    const hex = rgbToHex(r, g, b);

    // 更新 UI
    colorPickerBox.style.backgroundColor = hex;
    colorPickerHexCode.textContent = hex;
    colorPickerRgbValue.textContent = rgb;
});

核心逻辑：

监听 canvas 的 click 事件，获取鼠标点击的坐标 x, y（基于 canvas）。
使用 ctx.getImageData(x, y, 1, 1).data 获取该点的像素数据（RGBA）。
提取 RGB 值，并转换为 Hex 值。
更新页面上的色块和文本。

RGB 转 Hex 颜色值

为了兼容更多颜色格式，需要将 RGB 值转换成 Hex 格式：

function rgbToHex(r, g, b) {
    return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase()}`;
}

转换逻辑：

1 << 24 确保 24 位整数空间，r << 16 | g << 8 | b 将 RGB 组合为整数。
.toString(16) 转换为 16 进制字符串。
.slice(1).toUpperCase() 确保颜色值为标准 6 位大写格式。

复制颜色值

用户可以点击复制按钮，将颜色值复制到剪贴板，并在复制后修改按钮状态。

colorPickerCopyHexBtn.addEventListener('click', function() {
    if (!imageUploaded) return;
    const hex = colorPickerHexCode.textContent;
    navigator.clipboard.writeText(hex).then(function() {
        colorPickerCopyHexBtn.textContent = '已复制';
        colorPickerCopyHexBtn.classList.add('copied');
        setTimeout(() => {
            colorPickerCopyHexBtn.textContent = '复制';
            colorPickerCopyHexBtn.classList.remove('copied');
        }, 2000);
    });
});

核心逻辑：

监听复制按钮点击事件。
使用 navigator.clipboard.writeText(hex) 复制 Hex 颜色值到剪贴板。
修改按钮文字为“已复制”，2 秒后恢复原状态。

显示吸管图标

当用户在 canvas 上移动鼠标时，显示一个吸管样式的图标，并随着鼠标移动。

colorPickerCanvas.addEventListener('mousemove', function(e) {
    if (!imageUploaded) return;
    colorPickerIcon.style.left = `${e.pageX - 15}px`;
    colorPickerIcon.style.top = `${e.pageY - 15}px`;
    colorPickerIcon.style.display = 'block';
});

colorPickerCanvas.addEventListener('mouseleave', function() {
    colorPickerIcon.style.display = 'none';
});

核心逻辑：