如何使用JavaScript Canvas API将图片转换为素描风格图像

问题根因 #

• CSS素描效果的核心是双层叠加逻辑：底层放灰度处理后的原图，上层放反相+模糊处理后的原图，上层设置mix-blend-mode: color-dodge和底层混合，最终得到线稿清晰的素描效果
• 现有代码把灰度、反相、模糊滤镜全部堆在单次绘制流程中，仅生成了单层画布内容。globalCompositeOperation是控制多层绘制内容混合规则的属性，仅存在单层内容时该配置不会生效，自然无法得到预期效果。

原生Canvas正确实现方案 #

按照双层叠加逻辑拆分绘制流程即可，步骤如下：

1. 初始化画布，尺寸和待处理原图保持一致
2. 绘制第一层基底：仅对原图做灰度处理后绘制到画布
3. 配置画布混合模式为color-dodge
4. 绘制第二层层级：对原图做反相+模糊处理后绘制到同一画布，两层会自动按照颜色减淡规则混合
5. 从画布导出Blob/Base64数据，直接走现有上传逻辑即可

完整实现代码：

const img = document.createElement('img');
// 注意需等待图片加载完成后再执行处理逻辑
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 画布尺寸匹配原图
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

  // 第一步：绘制灰度基底图层
  ctx.filter = 'grayscale(100%)';
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 第二步：设置颜色减淡混合模式
  ctx.globalCompositeOperation = 'color-dodge';

  // 第三步：绘制反相模糊的上层图层，自动和基底混合得到素描效果
  ctx.filter = 'invert(100%) blur(5px)';
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 导出可直接上传的图片文件
  canvas.toBlob((blob) => {
    // 此处接入现有上传逻辑即可
    console.log('处理完成的素描图Blob', blob);
  }, 'image/jpeg', 0.92);
}
// 赋值图片地址触发加载
img.src = '待处理图片的访问地址';

如果需要兼容不支持ctx.filter的低版本浏览器，可以手动读取ImageData逐像素计算：灰度、反相、高斯模糊处理后，按照颜色减淡公式最终像素值 = 基底值 >= 255 ? 255 : Math.min(255, (上层值 * 基底值) / (255 - 上层值) + 基底值)计算混合结果即可。

可直接使用的JS类库 #

如果不想手动维护像素处理逻辑，可以使用以下纯JS实现的图片处理库：

• image-filters：轻量无依赖的前端图片滤镜库，内置现成的素描滤镜，传入图片元素即可直接输出处理后的结果
• pica：高性能大尺寸图片处理库，支持自定义滤镜链，可自由组合灰度、反相、模糊、混合模式参数，调整素描效果的线条强度
• fabric.js：封装完善的Canvas图形库，内置全套混合模式和基础滤镜支持，仅需几行配置即可生成素描效果，适合本身就有画布交互需求的场景

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