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 上下文提供多种高效内置方法，比手动改像素更简洁：
立即学习“Java免费学习笔记（深入）”；
-
颜色调整：用
ctx.globalCompositeOperation或ctx.filter（如'blur(2px)'、'brightness(1.2)'）快速加滤镜（兼容性需留意） -
几何变换：调用
ctx.translate()、ctx.rotate()、ctx.scale()配合drawImage()实现旋转、镜像、缩放 -
合成叠加：用多层 canvas 或多次
drawImage()实现图层混合；globalAlpha控制透明度 - 边缘检测/卷积：手动实现简单核（如 Sobel、均值模糊），对每个像素采样邻域加权求和（注意边界处理）
导出处理后的图像
处理完成可导出为新图片：
