利用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 值设为亮度的平均值。
AlegroCart新功能：维类：包括在这两种线性长宽高或面积或体积长波产品尺寸允许与期权产品：让产品/期权组合独特的数量，尺寸，图像和型号。选择店铺标识管理 图片放大镜：显示一个图片放大上空盘旋时，产品形象弹出框。自定义错误报告：设置在管理员启用。 开发者只可以显示详细的信息。错误信息都写入到错误日志文件每天可以通过电子邮件发送给管理员。仓库皮卡航运模块：允许客户指定产品在商店的位置回升。增加了
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 避免卡顿。
