canvas浮雕滤镜通过getimagedata读取像素、手动应用3×3卷积核（如[1 1 0; 1 0 -1; 0 -1 -1]）、加128偏移并截断至0–255，再用putimagedata写回实现，全程内存操作，支持实时处理。

Canvas像素卷积运算实现浮雕滤镜，核心是用getImageData读取像素，手动应用3×3浮雕卷积核，再用putImageData写回——整个过程在内存中完成，不依赖外部库，适合实时处理。

获取图像数据并准备Canvas上下文

先确保图像已加载完成（避免跨域问题），然后将图像绘制到<canvas></canvas>上，再获取原始像素数据：

• 创建足够大的canvas（宽高与图像一致），调用getContext('2d')
• 用ctx.drawImage(img, 0, 0)把图像画进去
• 立即执行ctx.getImageData(0, 0, width, height)，得到含data数组的ImageBuffer对象
• data是Uint8ClampedArray，每4个元素代表一个像素的RGBA值（R、G、B、A各占1字节）

应用浮雕卷积核（Emboss Kernel）

标准浮雕效果常用如下3×3卷积核：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

[ 1  0  0 ]
[ 0  0  0 ]
[ 0  0 -1 ]

实际更常用中心对称增强版（突出边缘明暗对比）：

[ 1  1  0 ]
[ 1  0 -1 ]
[ 0 -1 -1 ]

计算时注意：

• 遍历每个非边界像素（即x从1到width−2，y从1到height−2）
• 对每个像素(x,y)，取出其周围3×3区域共9个像素的RGBA值
• 仅对R、G、B通道分别做加权求和（A通道通常保持255不变）
• 结果加上128偏移（避免负值变黑，让灰度中心落在128附近），再用Math.max(0, Math.min(255, value))截断到0–255

写回像素并渲染

卷积计算完后，直接更新imageData.data数组对应位置的值，再写回Canvas：

• 修改imageData.data中每个像素的R/G/B分量（索引为(y * width + x) * 4 + 0/1/2）
• A分量（索引+3）建议设为255（保持不透明）
• 调用ctx.putImageData(imageData, 0, 0)一次性刷新画面
• 如需实时处理视频帧，可将上述流程放入requestAnimationFrame循环中，配合video元素的drawImage(video, ...)

性能优化与注意事项

纯JS逐像素操作在高分辨率图像上可能卡顿，可针对性优化：

• 限制处理区域：只处理可视区或缩略尺寸（例如先缩放到400px宽再滤镜）
• 跳过Alpha通道计算：若图像无透明需求，可只处理RGB，省去25%运算
• 使用Uint32Array视图批量读取RGBA（每项为一个32位整数），比四次单字节访问稍快
• 避免在循环中反复创建数组或对象，复用imageData和临时缓存数组
• 移动端注意关闭抗锯齿：ctx.imageSmoothingEnabled = false，防止drawImage引入模糊干扰卷积结果

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！