JavaScript通过Canvas API实现图像处理：先加载图像到canvas，再用getImageData读取像素数据，修改后putImageData写回，支持灰度化等效果，最后toDataURL导出。
JavaScript 本身不直接处理图像像素，但通过 Canvas API 可以在网页中加载、绘制、读取和修改图像数据，实现基础到中级的图像处理功能。核心在于将图像绘制到 <canvas> 上，再用 getContext('2d') 获取绘图上下文，进而操作像素或应用变换。
加载并绘制图像到 Canvas
要处理图像，必须先把它画进 canvas —— 直接操作 <img> 元素无法读取像素（受跨域限制）。
- 创建
Image对象，设置src，等onload触发后再绘制 - 用
ctx.drawImage(img, x, y, width, height)把图像缩放/定位画入 canvas - 确保 canvas 尺寸与图像实际宽高一致（避免拉伸失真），可通过
canvas.width = img.naturalWidth设置
读取和修改像素数据（ImageData）
这是图像处理的关键步骤：获取像素数组，逐个调整 R/G/B/A 值，再写回画布。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 调用
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、均值模糊），对每个像素采样邻域加权求和（注意边界处理）
导出处理后的图像
处理完成可导出为新图片：
- 调用
canvas.toDataURL('image/png')或'image/jpeg'得到 base64 字符串 - 创建
<a href="..." download="output.jpg">链接，模拟点击实现下载 - 若需更高性能或大图处理，可结合
OffscreenCanvas（Worker 中运行）或 WebAssembly 加速计算
