Canvas getImageData 跨域需设 crossOrigin="anonymous"并配CORS头；素描效果需灰度化+边缘检测（如Sobel）+反色叠加；CSS filter可快速近似但不可控细节；性能优化需降采样、Uint8ClampedArray及WebWorker。
Canvas getImageData 读取像素前必须处理跨域
直接用 img.src 加载网络图片后调用 ctx.getImageData()，十有八九会报 SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.。这不是滤镜逻辑的问题，而是浏览器安全限制。
解决方法只有两个：
- 把图片放在同源服务器下（开发时可用
python3 -m http.server启一个本地服务） - 服务端配好
Access-Control-Allow-Origin，且在Image对象上显式设置crossOrigin = "anonymous"
漏掉 crossOrigin 属性，哪怕响应头正确，Canvas 依然会标记为“污染”，后续所有像素操作都会被拒。
素描效果本质是边缘检测 + 反色叠加
HTML5 里没有现成的 “sketch” 滤镜，得手动算。主流做法是：先转灰度，再用卷积核（如 Sobel 或 Laplacian）提取边缘强度，最后把边缘图反色后和原灰度图叠加——这样亮部保留、暗部变白线，才像手绘素描。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 别直接对彩色图做卷积，先用加权平均转灰度：
0.299 * r + 0.587 * g + 0.114 * b - Sobel 水平核
[-1,0,1; -2,0,2; -1,0,1]和垂直核[-1,-2,-1; 0,0,0; 1,2,1]要分别计算，再合成梯度幅值：Math.sqrt(sx*sx + sy*sy) - 边缘图通常很暗，需做归一化并反色：
255 - Math.min(255, Math.floor(gradient * 255 / maxGradient))
用 CSS filter 实现简易素描感（仅限视觉近似）
如果只要快速出效果、不苛求算法还原度，filter 链可以省掉 Canvas 编程：
img {
filter: grayscale(100%) contrast(200%) brightness(120%) invert(100%);
}这串组合实际是：去色 → 拉高对比 → 微提亮度 → 全反色。它模拟的是“铅笔画在浅黄纸上的负片感”，适合头像、海报等场景。但注意：
- 无法控制边缘粗细或方向，对纹理少的图容易糊成一片
-
filter作用于整个元素，不能只对 ROI（感兴趣区域）生效 - 部分旧版 Safari 对多层
filter计算有偏色，建议加will-change: filter提前提示渲染引擎
性能瓶颈在 getImageData + putImageData 循环
对一张 1000×1000 的图做完整卷积，JavaScript 在主线程遍历百万级像素，很容易卡住 UI。实测发现：
- 用
Uint8ClampedArray直接操作data数组比反复读写imageData.data[i]快 3–5 倍 - 边缘检测可降采样处理：先缩到 50%，算完再双线性放大回原尺寸，主观质量损失小，耗时降 70%+
- 真要实时处理视频帧，请务必迁移到
WebWorker，否则getImageData一卡，整个页面就冻结
真正难的不是公式，是让每个像素都按时吐出来——尤其在低端 Android 设备上，少一次 putImageData 调用，就少一次强制重绘开销。
