当前位置：首页 > 行业动态 > 正文

html图片取色器

admin
行业动态
2025-05-13
1

利用Canvas API监听点击事件，获取坐标像素颜色，转换为RGB

实现原理

图片加载：通过<input>上传图片，利用FileReader读取为DataURL，并通过<canvas>渲染。
像素拾取：监听鼠标在<canvas>上的移动或点击事件，通过getImageData获取对应坐标的像素颜色。
颜色转换：将RGB值转换为HEX、HSL等格式，并动态显示结果。

代码结构

HTML部分

<input type="file" id="upload" accept="image/">
<canvas id="imageCanvas"></canvas>
<div>
  <span>RGB: <span id="rgb"></span></span>
  <span>HEX: <span id="hex"></span></span>
  <span>HSL: <span id="hsl"></span></span>
</div>

CSS部分

#imageCanvas {
  border: 1px solid #ccc;
  max-width: 100%;
  cursor: crosshair;
}

JavaScript部分

const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
const rgbDisplay = document.getElementById('rgb');
const hexDisplay = document.getElementById('hex');
const hslDisplay = document.getElementById('hsl');
// 上传图片并绘制到Canvas
document.getElementById('upload').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (event) => {
    const img = new Image();
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});
// 监听鼠标移动取色
canvas.addEventListener('mousemove', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;
  const pixel = ctx.getImageData(x, y, 1, 1).data; // RGBA格式
  const rgba = `rgba(${pixel[0]}, ${pixel[1]}, ${pixel[2]}, ${pixel[3]})`;
  const rgb = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
  const hex = rgbToHex(pixel[0], pixel[1], pixel[2]);
  const hsl = rgbToHsl(pixel[0], pixel[1], pixel[2]);
  rgbDisplay.textContent = rgb;
  hexDisplay.textContent = hex;
  hslDisplay.textContent = hsl;
});
// 颜色格式转换函数
function rgbToHex(r, g, b) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) {
    h = s = 0; // 无色相
  } else {
    const d = max min;
    s = l > 0.5 ? d / (2 max min) : d / (max + min);
    switch (max) {
      case r: h = (g b) / d + (g < b ? 6 : 0); break;
      case g: h = (b r) / d + 2; break;
      case b: h = (r g) / d + 4; break;
    }
    h /= 6;
  }
  return `hsl(${Math.round(h  360)}, ${Math.round(s  100)}%, ${Math.round(l  100)}%)`;
}

关键步骤说明

步骤	描述	代码片段
图片上传与渲染	通过`<input>`选择图片，用`FileReader`读取为`DataURL`，加载到`<canvas>`中。	`new FileReader().readAsDataURL(file)`
像素数据获取	使用`getImageData(x, y, 1, 1)`获取鼠标位置的像素RGBA值。	`ctx.getImageData(x, y, 1, 1).data`
颜色格式转换	将RGB值转换为HEX（`rgbToHex`）和HSL（`rgbToHsl`）。	`#' + ((1 << 24) + (r << 16)...`