如何用纯JS、HTML、CSS实现滑块调节canvas图片的灰度效果

核心前置优化：固定原始像素缓存 #

这是规避“越处理画面越灰”问题的核心基础

• 当图片首次成功绘制到canvas后，立刻抓取当前canvas的全量原始像素，单独存为全局变量，后续所有灰度计算都基于这份缓存执行，绝不从当前显示的canvas上读取像素做二次加工
• 实现代码：

// 全局存储未做任何修改的原始图像像素数据
let originalBaseImageData = null;
// 图片加载完成后、首次绘制到canvas时执行
function drawOriginalImage(img) {
  const ctx = canvas.getContext('2d');
  // 按图片实际尺寸设置canvas宽高
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  // 抓取原始像素做永久缓存
  originalBaseImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // 首次加载完成后，按照滑块的当前默认值初始化灰度效果，避免初始画面和滑块值不匹配
  const initGrayRate = document.querySelector('#grayRange').value / 100;
  applyGrayFilter(initGrayRate);
}

滑块事件的正确绑定方式 #

• 放弃滑块默认的change事件（仅松手触发），改用input事件，实现拖动滑块过程中画面实时更新
• 把滑块的0-100取值线性映射为0-1的灰度权重：值为0时完全显示原图彩色，值为100时完全切换为纯黑白，符合用户交互直觉

const grayRangeSlider = document.querySelector('#grayRange');
grayRangeSlider.addEventListener('input', (e) => {
  const currentGrayRate = e.target.value / 100;
  applyGrayFilter(currentGrayRate);
});

灰度动态混合的核心算法 #

• 人眼对不同颜色的感知权重不同，灰度计算不使用三通道平均值，采用标准亮度公式：灰度值 = 0.299*R + 0.587*G + 0.114*B，输出的灰度效果不会偏色
• 每个像素的最终显示值采用线性插值计算：按当前灰度权重，在原始彩色值和对应灰度值之间平滑过渡，不会出现生硬的跳变

function applyGrayFilter(grayRate) {
  // 原始图片未加载完成时直接中断执行
  if (!originalBaseImageData) return;
  const ctx = canvas.getContext('2d');
  // 基于原始像素创建独立副本，不直接修改缓存的原始数据
  const processTarget = new ImageData(
    new Uint8ClampedArray(originalBaseImageData.data),
    originalBaseImageData.width,
    originalBaseImageData.height
  );
  const pixelData = processTarget.data;

  // 逐像素计算灰度混合结果
  for (let i = 0; i < pixelData.length; i += 4) {
    const r = pixelData[i];
    const g = pixelData[i + 1];
    const b = pixelData[i + 2];
    // 计算当前像素对应的标准灰度亮度
    const grayValue = 0.299 * r + 0.587 * g + 0.114 * b;
    // 按权重线性插值计算最终显示的通道值
    pixelData[i] = r + (grayValue - r) * grayRate;
    pixelData[i + 1] = g + (grayValue - g) * grayRate;
    pixelData[i + 2] = b + (grayValue - b) * grayRate;
  }

  // 把处理完成的像素批量渲染回canvas
  ctx.putImageData(processTarget, 0, 0);
}

必须规避的常见实现问题 #

• 禁止直接修改缓存的originalBaseImageData像素值，每次处理都从缓存拷贝新的像素副本，否则原始数据会在多次处理中被逐步污染，最终出现滑块拖到中间值也显示全灰的问题
• 不要用每次读canvas当前像素再做灰度处理的逻辑，反复对已处理过的像素叠灰度系数，会出现滑块越拖越暗、最终趋近全黑的bug
• 首次图片加载完成后，必须主动执行一次和滑块当前值匹配的灰度渲染，否则会出现滑块默认停在50%位置，但刚上传的图还是全彩的交互错位问题

内容的提问来源于stack exchange，提问作者Sam