首先获取Canvas上下文并创建Image对象，待图片加载后绘制到Canvas；通过getImageData和putImageData操作像素实现灰度、反色等滤镜；利用drawImage的九参数形式可裁剪缩放图像；最后用toDataURL导出为PNG或JPEG格式。注意load事件异步与跨域问题。
在HTML5中，Canvas 提供了强大的绘图能力，也可以用来加载和处理图片。通过 JavaScript 操作 Canvas 上的图像数据，可以实现图片裁剪、滤镜、缩放、翻转等常见图像处理功能。下面详细介绍如何使用 Canvas 加载与处理图片，并附上实用示例。
加载图片到Canvas
要在 Canvas 中显示图片，需先创建一个 Image 对象，等待图片加载完成后再绘制到 Canvas 上。
基本步骤如下：
- 获取 Canvas 元素并创建 2D 渲染上下文
- 创建 Image 实例
- 设置图片路径并监听 load 事件
- 使用 drawImage() 方法将图片绘制到 Canvas
示例代码：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'example.jpg'; // 图片路径
<p>img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};</p>注意：必须在 img.onload 回调中执行 drawImage，否则图片可能尚未加载完成，导致绘制失败。
Canvas图片处理方法
Canvas 提供了 getImageData() 和 putImageData() 方法来读取和写入像素数据，从而实现图像处理。
常用图像处理操作包括：
- 灰度化：将彩色图像转换为黑白灰度图
- 反色（负片）：反转每个像素的颜色值
- 亮度/对比度调整：增强或减弱图像明暗
- 模糊或锐化：通过卷积矩阵实现滤镜效果
示例：实现灰度滤镜
img.onload = function() {
ctx.drawImage(img, 0, 0);
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]) / 3;
data[i] = avg; // R
data[i+1] = avg; // G
data[i+2] = avg; // B
}</p><p>ctx.putImageData(imageData, 0, 0);
};</p>图片裁剪与缩放
drawImage() 方法支持多种参数形式，可用于裁剪和缩放图片。
语法：ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
- sx, sy：源图像裁剪起始坐标
- sw, sh：裁剪区域宽高
- dx, dy：在 Canvas 上绘制的起始位置
- dw, dh：绘制到 Canvas 上的尺寸（可实现缩放）
示例：裁剪图片中心区域并放大显示
img.onload = function() {
const cropX = img.width * 0.25;
const cropY = img.height * 0.25;
const cropWidth = img.width * 0.5;
const cropHeight = img.height * 0.5;
<p>ctx.drawImage(
img,
cropX, cropY, cropWidth, cropHeight, // 裁剪区域
0, 0, canvas.width, canvas.height // 显示区域（拉伸填满画布）
);
};</p>导出处理后的图片
处理完成后，可以通过 canvas.toDataURL() 将图像导出为 base64 编码的图片数据，用于下载或上传。
示例：将 Canvas 内容保存为 PNG 图片
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'processed-image.png';
link.click();
toDataURL 支持 'image/png'、'image/jpeg'（可指定质量参数）等格式。
基本上就这些。掌握图片加载、像素操作、裁剪缩放和导出方法，就能用 Canvas 实现大多数前端图像处理需求。不复杂但容易忽略细节，比如图片跨域问题或异步加载时机，开发时要注意处理。
