Canvas API 可实现网页图片动态处理，先通过 drawImage 绘制图像，再用 getImageData 操作像素实现灰度、滤镜等效果，最后用 toDataURL 导出图像，适用于头像上传、截图等场景。
想在网页上动态处理图片？Canvas API 是你的最佳选择。它不仅能绘制图形，还能对图像进行实时滤镜、裁剪、缩放等操作。掌握 Canvas 图像处理，能让你的前端项目更具交互性和视觉表现力。
Canvas 基础：加载并绘制图像
要处理图像，先得把它画到 canvas 上。使用 drawImage() 方法可以将图片绘制到画布中。
基本步骤：
- 创建 Image 对象并设置 src
- 等待图片加载完成（onload）
- 获取 canvas 上下文，并用 drawImage 绘制
示例代码：
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'photo.jpg';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
获取并操作像素数据
图像处理的核心是操作像素。Canvas 提供了 getImageData() 和 putImageData() 方法来读取和写入像素信息。
ImageData 包含一个 data 数组，每个像素由 4 个值表示：红、绿、蓝、透明度（RGBA），范围是 0–255。
常见操作：
- 灰度化：将 RGB 取平均值赋给三个通道
- 反色：用 255 减去原值
- 亮度调整：给每个颜色值加减一个数
灰度处理示例：
Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data;for (let i = 0; i < data.length; i += 4) { const avg = (data[i] + data[i+1] + data[i+2]) / 2; data[i] = avg; // 红 data[i+1] = avg; // 绿 data[i+2] = avg; // 蓝 }
ctx.putImageData(imageData, 0, 0);
实现简单滤镜效果
基于像素操作，可以轻松实现常见滤镜。
比如，添加一个褐色滤镜（复古风）：
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i+1];
const b = data[i+2];
data[i] = (r 0.393) + (g 0.769) + (b 0.189); // 新红
data[i+1] = (r 0.349) + (g 0.686) + (b 0.168); // 新绿
data[i+2] = (r 0.272) + (g 0.534) + (b * 0.131); // 新蓝
}
注意：处理后的值要限制在 0–255 范围内，避免溢出。
导出处理后的图像
处理完图像后，可以用 canvas 的 toDataURL() 方法导出为 base64 图片，或用 toBlob() 获取二进制数据用于上传。
导出为 PNG 示例：
const url = canvas.toDataURL('image/png');
document.getElementById('output').src = url;
适合用于头像上传、截图、生成分享图等场景。
基本上就这些。Canvas 图像处理不复杂但容易忽略细节，比如异步加载、尺寸同步、像素边界处理。多练几次，你也能做出自己的“美颜”功能。
