利用JavaScript和Canvas可实现图像加载、像素操作与滤镜处理，通过getImageData获取像素数据并修改RGB值，实现灰度、反色、亮度调节等效果，结合putImageData应用更改，最后用toDataURL导出图像。
在网页开发中，利用 JavaScript 和 Canvas 可以实现强大的图像处理功能。通过操作像素数据，我们可以实时添加滤镜、调整色彩、锐化或模糊图像等。下面介绍如何使用 Canvas 进行基本的图像加载与常见滤镜处理。
图像加载到 Canvas
要对图像进行处理，首先需要将其绘制到 Canvas 上，才能读取像素信息。
以下是一个基础示例：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
图像必须在同源或启用 CORS 的情况下加载，否则会触发安全错误。
立即学习“Java免费学习笔记（深入）”；
获取和操作像素数据
Canvas 提供了 getImageData 方法来获取图像的像素数据，返回一个包含 RGBA 值的一维数组。
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // data 是 [R, G, B, A, R, G, B, A, ...]
每个像素占 4 个字节：红、绿、蓝、透明度（Alpha），值范围是 0–255。修改这些值即可实现滤镜效果。
常见滤镜实现
以下是几种常用滤镜的实现方式：
1. 灰度滤镜：将每个像素的 RGB 值设为亮度的平均值。
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i+1] + data[i+2]) / 3;
data[i] = avg; // Red
data[i+1] = avg; // Green
data[i+2] = avg; // Blue
}
ctx.putImageData(imageData, 0, 0);
2. 反色（负片）滤镜：用 255 减去每个颜色值。
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red
data[i+1] = 255 - data[i+1]; // Green
data[i+2] = 255 - data[i+2]; // Blue
}
ctx.putImageData(imageData, 0, 0);
3. 亮度调节：给每个颜色通道加上一个偏移量。
function adjustBrightness(data, value) {
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.min(255, Math.max(0, data[i] + value));
data[i+1] = Math.min(255, Math.max(0, data[i+1] + value));
data[i+2] = Math.min(255, Math.max(0, data[i+2] + value));
}
}
// 使用：adjustBrightness(data, 50); // 提亮
4. 模糊滤镜（简单均值模糊）：遍历像素并取周围像素的平均值，需创建新数组避免污染原数据。
此过程较复杂，通常结合卷积核实现。简单版本可多次调用“扩散”处理模拟模糊。
保存处理后的图像
使用 toDataURL 可将 Canvas 内容导出为图片链接：
const outputUrl = canvas.toDataURL('image/png');
document.getElementById('output').src = outputUrl;
也可用 toBlob 上传到服务器或下载保存。
基本上就这些。掌握像素级操作后，可以组合出复古、冷暖色调、边缘检测等更复杂的滤镜效果。关键是理解 imageData 的结构和颜色空间的变换逻辑。不复杂但容易忽略边界处理和性能优化，尤其是大图处理时建议使用 Worker 避免卡顿。
