JavaScript通过Canvas API实现图像处理，先加载图像并绘制到canvas，再用getImageData获取像素数据，遍历修改RGB值实现灰度、反色、亮度调节等滤镜，最后用putImageData将结果渲染回canvas。
JavaScript 可以通过 HTML5 的 Canvas API 实现图像处理和滤镜效果。核心思路是将图像绘制到 canvas 上，读取像素数据（ImageData），进行数值计算后重新写回 canvas，从而实现各种视觉效果。
1. 基础图像加载与绘制
要处理图像，先将其绘制到 canvas 元素上：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
2. 获取与操作像素数据
使用 ctx.getImageData() 获取图像的像素信息，返回一个包含 r、g、b、a 值的 Uint8ClampedArray：
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // [r1, g1, b1, a1, r2, g2, b2, a2, ...]
遍历每个像素并修改其颜色值即可实现滤镜：
立即学习“Java免费学习笔记（深入）”；
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// 修改 r, g, b
data[i] = r; // 红色分量
data[i + 1] = g; // 绿色分量
data[i + 2] = b; // 蓝色分量
// alpha 通常保持不变
}
3. 常见滤镜实现方式
以下是一些典型滤镜的处理逻辑：
灰度滤镜
将 RGB 值设为亮度的加权平均：
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const gray = 0.3 * r + 0.59 * g + 0.11 * b;
data[i] = data[i + 1] = data[i + 2] = gray;
}
反色（负片）滤镜
Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
用 255 减去每个颜色分量：
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
亮度调节
给每个分量加上或减去一个值（注意限制在 0-255）：
const brightness = 50; // 增亮 50
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.min(255, Math.max(0, data[i] + brightness));
data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + brightness));
data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + brightness));
}
饱和度调整
通过转换到 HSL 并调整 S 分量，或使用矩阵变换。简化方法是混合原色与灰度色：
const saturation = 1.5; // 增强饱和度
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const avg = 0.3 * r + 0.59 * g + 0.11 * b;
data[i] = Math.min(255, avg + saturation * (r - avg));
data[i + 1] = Math.min(255, avg + saturation * (g - avg));
data[i + 2] = Math.min(255, avg + saturation * (b - avg));
}
4. 应用修改后的像素数据
处理完像素后，使用 ctx.putImageData() 将结果写回 canvas：
ctx.putImageData(imageData, 0, 0);
此时 canvas 上就会显示处理后的图像。
基本上就这些。只要掌握 getImageData 和 putImageData，再结合颜色算法，就能实现大多数常见滤镜效果。实际项目中也可以封装成函数，支持链式调用多个滤镜。性能敏感时可考虑 Web Workers 避免阻塞主线程。
