Canvas漫画线稿需用getImageData逐像素处理：先灰度转换，再差分边缘检测，最后二值化；SVG滤镜可加速但兼容性差；ctx.filter不支持自定义逻辑，大图需降采样或WebAssembly优化。
Canvas 里用 getImageData + 阈值处理模拟漫画线稿
纯 HTML5 实现漫画风格，核心不是调滤镜 API（filter CSS 属性不支持自定义漫画逻辑），而是操作 Canvas 像素。先用 getContext('2d') 获取图像数据，再对每个像素做灰度+边缘检测+二值化。
关键步骤：
-
ctx.drawImage()把图片画到离屏 canvas 上 - 用
ctx.getImageData(0, 0, width, height)拿到data数组（RGBA 四字节一组） - 遍历像素，转灰度：
gray = 0.299*r + 0.587*g + 0.114*b - 简单边缘检测可用 Sobel 算子，或更轻量的「相邻像素差值」：取上下左右四个方向灰度差绝对值之和，超过阈值就设为黑（描边），否则白（留白）
- 写回 canvas 用
ctx.putImageData()
用 filter: url(#sketch) 配合 SVG 滤镜快速出效果
如果只要近似漫画感（非精确线稿），SVG 滤镜比纯 JS 快得多，且可硬件加速。把 SVG <filter> 定义在页面内，再通过 CSS 的 filter 属性引用。
典型组合：
立即学习“前端免费学习笔记（深入）”；
- 先用
<feColorMatrix type="matrix">转灰度（避免 CSSgrayscale()过于平滑） - 接
<feConvolveMatrix>做简单边缘增强（order="3"，kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"） - 最后用
<feComponentTransfer>+<feFuncA type="threshold" tableValues="0.5">强制二值化
注意：Safari 对 feConvolveMatrix 支持不稳定，iOS 16+ 才较可靠；Chrome 和 Firefox 表现一致。
ctx.filter 不是万能的——它不支持自定义卷积或条件像素判断
Canvas 2D 上下文的 filter 属性（如 ctx.filter = 'blur(2px)'）只接受 CSS filter 函数列表，底层映射到 GPU 滤镜管线，无法写 if/else 或访问单个像素。想实现「只有轮廓变黑、内部填白」这类逻辑，必须绕过 ctx.filter，老实用 getImageData。
常见误判点：
- 以为
ctx.filter = 'contrast(2) brightness(0.5)'就能漫画化 → 实际只是全局增反差，细节全糊 - 在高 DPI 屏幕上忘了缩放 canvas 的
width/height属性 → 导致getImageData读错尺寸，结果拉伸或偏移 - 没做 CORS 处理：跨域图片调
getImageData会触发安全错误Unable to get image data from canvas
性能敏感时优先用 WebAssembly 或 OffscreenCanvas
对 1000×1000 以上图片做逐像素计算，主线程 JS 很容易卡顿。可行方案：
- 降采样预处理：先用
drawImage缩小到 500px 宽再处理，视觉损失小，速度提升 4 倍+ - 把核心循环（灰度+边缘+二值）编译成 WebAssembly（如用 Rust +
wasm-pack），比纯 JS 快 3–5 倍 - 用
OffscreenCanvas在 Worker 里跑图像处理，完全不阻塞 UI（注意：Safari 目前不支持 OffscreenCanvas in Worker）
真正难的不是写出第一个漫画效果，而是让 3MB 的手机拍照在低端安卓机上 200ms 内完成处理——这时候参数微调（比如把 Sobel 替换为更轻的差分）比算法炫技重要得多。
