HTML5 Canvas浮雕效果需用ImageData对像素做卷积运算，采用中心对称、和为0的3×3核（如[[1,1,0],[1,-4,1],[0,1,1]]），逐通道计算后加128偏移并截断至[0,255]。
在 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]，即可获得自然浮雕灰度感。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
获取并操作 ImageData 实现卷积
需先用 ctx.drawImage() 将图片绘制到 canvas，再调用 ctx.getImageData(0, 0, width, height) 获取原始像素数据。注意：跨域图片需设置 img.crossOrigin = "anonymous"，否则读取会报错。
关键步骤：
- 遍历每个非边缘像素（跳过第 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 < height - 1; y++) {
for (let x = 1; x < width - 1; x++) {
let r = g = b = 0;
for (let ky = -1; ky <= 1; ky++) {
for (let kx = -1; kx <= 1; kx++) {
const offset = ((y + ky) <em> width + (x + kx)) </em> 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';
优化与注意事项
原始实现适合学习理解，但性能一般。生产中可考虑：
- 用
OffscreenCanvas在 Worker 中处理，避免阻塞主线程 - 对灰度图处理（先转 luminance：0.299*R + 0.587*G + 0.114*B），再单通道卷积，速度更快、效果更统一
- 避免直接修改原图数据——始终用临时数组写入，防止边计算边覆盖影响邻域值
- Chrome/Firefox 支持
ctx.filter = "url(#emboss)"配合 SVG 滤镜，但兼容性弱、控制粒度粗，不推荐用于精确浮雕
不复杂但容易忽略：浮雕不是简单锐化，关键在梯度近似 + 中心偏移，少了 +128 这一步，图像会整体发暗甚至全黑。
