HTML5 中怎么用卷积矩阵在 canvas 中实现图片的浮雕立体艺术滤镜-H5教程-PHP中文网

HTML5 Canvas浮雕效果需用ImageData对像素做卷积运算，采用中心对称、和为0的3×3核（如[[1,1,0],[1,-4,1],[0,1,1]]），逐通道计算后加128偏移并截断至[0,255]。

html5 中怎么用卷积矩阵在 canvas 中实现图片的浮雕立体艺术滤镜

在 HTML5 Canvas 中实现浮雕（Emboss）效果，核心是使用 ImageData 手动对像素进行卷积运算，应用一个典型的浮雕卷积核（如 3×3 矩阵），突出图像边缘的明暗对比，营造出类似雕刻的立体感。

浮雕卷积核原理与选择

浮雕效果本质是检测像素邻域的梯度方向并增强对比。常用 3×3 卷积核如下：

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

更常见且对称的版本是：

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

但最经典、效果稳定的浮雕核是：

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

实际中推荐使用中心对称、总和为 0 的核，例如：

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

该核强调水平/垂直方向差异，计算后加 128 偏移（避免负值变黑），再截断到 [0, 255]，即可获得自然浮雕灰度感。

获取并操作 ImageData 实现卷积

需先用 ctx.drawImage() 将图片绘制到 canvas，再调用 ctx.getImageData(0, 0, width, height) 获取原始像素数据。注意：跨域图片需设置 img.crossOrigin = "anonymous"，否则读取会报错。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

关键步骤：

遍历每个非边缘像素（跳过第 0 行/列和最后 1 行/列）
对每个通道（R、G、B）分别应用卷积核：取周围 9 个像素对应权重相乘再求和
结果 + 128 偏移（提升亮度基准，让阴影浮现）
用 Math.max(0, Math.min(255, Math.round(value))) 截断到有效范围
Alpha 通道保持不变（或设为 255）

完整可运行代码示例

以下是一个轻量、无依赖的实现：

function applyEmboss(ctx, width, height) {
  const data = ctx.getImageData(0, 0, width, height);
  const {data: pixels} = data;
  const temp = new Uint8ClampedArray(pixels.length);
<p>// 浮雕卷积核（3x3）
const kernel = [
[ 1,  1,  0],
[ 1, -4,  1],
[ 0,  1,  1]
];</p><p>for (let y = 1; y  width + (x + kx))  4;
const weight = kernel[ky + 1][kx + 1];
r += pixels[offset + 0] <em> weight;
g += pixels[offset + 1] </em> weight;
b += pixels[offset + 2] <em> weight;
}
}
// 偏移 +128 并截断
const idx = (y </em> width + x) * 4;
temp[idx + 0] = Math.max(0, Math.min(255, Math.round(r) + 128));
temp[idx + 1] = Math.max(0, Math.min(255, Math.round(g) + 128));
temp[idx + 2] = Math.max(0, Math.min(255, Math.round(b) + 128));
temp[idx + 3] = 255; // alpha 不变
}
}</p><p>// 写回 ImageData 并渲染
data.data.set(temp);
ctx.putImageData(data, 0, 0);
}</p>

调用方式：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  applyEmboss(ctx, img.width, img.height);
};
img.src = 'photo.jpg';