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 减去原值
- 亮度调整：给每个颜色值加减一个数
灰度处理示例：
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
<p>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; // 蓝
}</p><p>ctx.putImageData(imageData, 0, 0);</p>实现简单滤镜效果
基于像素操作，可以轻松实现常见滤镜。
比如，添加一个褐色滤镜（复古风）：
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i+1];
const b = data[i+2];
<p>data[i] = (r <em> 0.393) + (g </em> 0.769) + (b <em> 0.189); // 新红
data[i+1] = (r </em> 0.349) + (g <em> 0.686) + (b </em> 0.168); // 新绿
data[i+2] = (r <em> 0.272) + (g </em> 0.534) + (b * 0.131); // 新蓝
}</p>注意：处理后的值要限制在 0–255 范围内，避免溢出。
导出处理后的图像
处理完图像后，可以用 canvas 的 toDataURL() 方法导出为 base64 图片，或用 toBlob() 获取二进制数据用于上传。
导出为 PNG 示例：
const url = canvas.toDataURL('image/png');
document.getElementById('output').src = url;
适合用于头像上传、截图、生成分享图等场景。
基本上就这些。Canvas 图像处理不复杂但容易忽略细节，比如异步加载、尺寸同步、像素边界处理。多练几次，你也能做出自己的“美颜”功能。
