JavaScript通过Canvas API实现图像处理：先加载图像到canvas，再用getImageData读取像素数据，修改后putImageData写回，支持灰度化等效果，最后toDataURL导出。

JavaScript 本身不直接处理图像像素，但通过 Canvas API 可以在网页中加载、绘制、读取和修改图像数据，实现基础到中级的图像处理功能。核心在于将图像绘制到 上，再用 getContext('2d') 获取绘图上下文，进而操作像素或应用变换。

加载并绘制图像到 Canvas

要处理图像，必须先把它画进 canvas —— 直接操作 元素无法读取像素（受跨域限制）。

• 创建 Image 对象，设置 src，等 onload 触发后再绘制
• 用 ctx.drawImage(img, x, y, width, height) 把图像缩放/定位画入 canvas
• 确保 canvas 尺寸与图像实际宽高一致（避免拉伸失真），可通过 canvas.width = img.naturalWidth 设置

读取和修改像素数据（ImageData）

这是图像处理的关键步骤：获取像素数组，逐个调整 R/G/B/A 值，再写回画布。

• 调用 ctx.getImageData(x, y, width, height) 得到 ImageData 对象，其 .data 是 Uint8ClampedArray（每4个元素一组：R、G、B、A，范围 0–255）
• 遍历 data 数组，例如灰度化：let avg = (r + g + b) / 3; data[i] = data[i+1] = data[i+2] = avg;
• 改完后用 ctx.putImageData(imageData, x, y) 把结果渲染回 canvas
• 注意：跨域图片需设置 img.crossOrigin = 'anonymous'，否则 getImageData 会报安全错误

常用图像效果与变换技巧

Canvas 2D 上下文提供多种高效内置方法，比手动改像素更简洁：

• 颜色调整：用 ctx.globalCompositeOperation 或 ctx.filter（如 'blur(2px)'、'brightness(1.2)'）快速加滤镜（兼容性需留意）
• 几何变换：调用 ctx.translate()、ctx.rotate()、ctx.scale() 配合 drawImage() 实现旋转、镜像、缩放
• 合成叠加：用多层 canvas 或多次 drawImage() 实现图层混合；globalAlpha 控制透明度
• 边缘检测/卷积：手动实现简单核（如 Sobel、均值模糊），对每个像素采样邻域加权求和（注意边界处理）

导出处理后的图像

处理完成可导出为新图片：

• 调用 canvas.toDataURL('image/png') 或 'image/jpeg' 得到 base64 字符串
• 创建 链接，模拟点击实现下载
• 若需更高性能或大图处理，可结合 OffscreenCanvas（Worker 中运行）或 WebAssembly 加速计算