html5实现图片浮雕效果的核心是利用Canvas的2D上下文接口操作图像的像素数据，通过特定的卷积算法调整每个像素的亮度与对比度，模拟出浮雕的立体视觉效果。
实现浮雕效果的核心原理
浮雕效果的本质是对图像中相邻像素的亮度差进行计算，让边缘位置产生明暗对比，从而形成凹凸的视觉感受。常用的实现方式是使用3x3的卷积核，对当前像素和周围像素的RGB值做加权计算，得到新的像素值。
常见的浮雕卷积核如下：
| -2 | -1 | 0 |
| -1 | 1 | 1 |
| 0 | 1 | 2 |
这个卷积核会让图像中左上方向的像素变暗，右下方向的像素变亮，最终形成从左上到右下方向的浮雕效果。如果需要调整浮雕的方向，只需要修改卷积核的权重分布即可。
完整实现步骤
1. 初始化Canvas画布
首先在HTML中创建<canvas>元素，然后通过JavaScript获取该元素并获取2D绘图上下文，设置画布的尺寸和需要处理的图片尺寸一致。
<canvas id="embossCanvas" width="800" height="400"></canvas>
2. 加载待处理的图片
需要先将图片加载到内存中，确保图片加载完成后再进行像素处理，避免出现图片未加载导致的错误。
// 获取canvas元素和上下文
const canvas = document.getElementById('embossCanvas');
const ctx = canvas.getContext('2d');
// 创建图片对象
const img = new Image();
img.src = 'test.jpg'; // 替换为你的图片路径
img.onload = function() {
// 图片加载完成后执行处理逻辑
processEmboss(img);
};
3. 实现浮雕滤镜处理函数
核心处理函数需要完成读取图片像素、应用卷积核计算、更新画布像素三个步骤。
function processEmboss(image) {
// 将图片绘制到画布上
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// 获取画布所有像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 定义浮雕卷积核
const kernel = [
[-2, -1, 0],
[-1, 1, 1],
[0, 1, 2]
];
// 定义偏移量，避免计算结果出现负数
const offset = 128;
// 存储新的像素数据
const newData = new Uint8ClampedArray(data.length);
// 遍历每个像素，跳过边缘像素避免越界
for (let y = 1; y < canvas.height - 1; y++) {
for (let x = 1; x < canvas.width - 1; x++) {
let r = 0, g = 0, b = 0;
// 应用3x3卷积核计算
for (let ky = -1; ky <= 1; ky++) {
for (let kx = -1; kx <= 1; kx++) {
const px = x + kx;
const py = y + ky;
const index = (py * canvas.width + px) * 4;
const kernelValue = kernel[ky + 1][kx + 1];
r += data[index] * kernelValue;
g += data[index + 1] * kernelValue;
b += data[index + 2] * kernelValue;
}
}
// 计算当前像素索引
const currentIndex = (y * canvas.width + x) * 4;
// 加上偏移量并限制取值范围在0-255之间
newData[currentIndex] = Math.min(255, Math.max(0, r + offset));
newData[currentIndex + 1] = Math.min(255, Math.max(0, g + offset));
newData[currentIndex + 2] = Math.min(255, Math.max(0, b + offset));
newData[currentIndex + 3] = data[currentIndex + 3]; // 透明度保持不变
}
}
// 将处理后的像素数据写回ImageData
for (let i = 0; i < data.length; i++) {
data[i] = newData[i];
}
// 将处理后的图像数据绘制到画布上
ctx.putImageData(imageData, 0, 0);
}
效果调整技巧
如果想要调整浮雕效果的强度，可以修改卷积核的权重值，权重差值越大，浮雕的立体感越强。另外偏移量offset的值也会影响整体亮度，offset值越大，画面整体越亮，默认128是比较适中的取值。
如果需要处理其他方向的浮雕效果，可以调整卷积核的权重分布，比如将权重集中在右上和左下方向，就可以得到对应方向的浮雕效果。
注意事项
- 处理跨域图片时，需要服务器配置对应的CORS头，否则调用
getImageData方法会报错。 - 像素处理的计算量较大，如果处理大尺寸图片，可能会出现卡顿，建议先缩小图片尺寸再处理，或者添加处理进度提示。
- 卷积核的权重值总和最好接近0，这样可以避免处理后的图片整体过亮或过暗。
html5浮雕滤镜Canvas_API图像像素处理图像处理修改时间：2026-06-19 08:06:16