首頁 » 小工具 » 色彩擷取工具，線上圖片顏色吸取工具

色彩擷取工具，線上圖片顏色吸取工具

本色彩擷取工具是一款簡單易用的線上顏色擷取器，可讓使用者上傳圖片並透過點擊任意位置來取得該區域的顏色值（RGB 和Hex）。無需安裝任何軟體，即可快速擷取顏色，適用於網頁設計、UI 設計、產品配色等場景。

圖片顏色吸管工具

上傳圖片並點擊圖片中的任何區域來採集顏色：

十六進位代碼: #000000

RGB值: RGB（0，0，0）

透過該工具可以用來確定網站主色調、設計海報、設計網頁等。

線上圖片色彩擷取工具的原理解析

色彩擷取工具主要組成部分

本工具主要由以下幾個部分組成：

HTML 結構：包括圖片上傳按鈕、畫布（Canvas）、顏色顯示區域和複製按鈕。
CSS 樣式：用於佈局、吸管遊標效果、按鈕樣式等。
JavaScript 邏輯：處理圖片上傳、繪製、座標計算、顏色提取和複製功能。

色彩擷取工具主要技術實現

圖片上傳並繪製

用戶透過 <input type="file"> 選擇圖片後，利用JavaScript 文件讀取器 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);
    }
});

核心邏輯：

讀取圖片資料後創建 影像 對象。
計算圖片的縮放比例，使寬度最大不超過 800像素，並保持比例縮放。
設定 帆布 畫布的尺寸與調整後的圖片一致。
使用 ctx.繪製影像（img， 0， 0，新寬度，新高度）； 在 帆布 上繪製圖片。

顏色採集

當用戶在 帆布 上點擊時，透過 取得影像資料（） 方法取得該像素的顏色值。

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;
});

核心邏輯：

監聽 帆布 的 點選 事件，取得滑鼠點擊的座標 x, y（基於 帆布）。
使用 ctx.取得影像資料（x，y，1，1）.數據 取得該點的像素資料（RGBA）。
提取 RGB 值，並轉換為 十六進位 值。
更新頁面上的色塊和文字。

RGB 轉Hex 顏色值

為了相容於更多顏色格式，需要將 RGB 值轉換成十六進位格式：

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 顏色值到剪貼簿。
修改按鈕文字為“已複製”，2 秒後恢復原狀態。

顯示吸管圖標

當用戶在 帆布 上移動滑鼠時，顯示一個吸管樣式的圖標，並隨著滑鼠移動。

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';
});

核心邏輯：