HTML5 Canvas 是前端图像处理的核心工具，需先加载图片并监听 onload 事件再绘制，设置 canvas 宽高为 naturalWidth/Height 避免失真，跨域图片需设 crossOrigin；通过 getImageData 获取像素数组，可实现灰度化、反色、亮度调整等操作，修改后须用 putImageData 写回；支持裁剪缩放、马赛克、旋转翻转等高级操作，并可导出 Base64 数据；Canvas 修改像素本身，CSS filter 仅叠加渲染层，二者可协同使用但 toDataURL 不包含滤镜效果。

HTML5 Canvas 是前端图像处理的核心工具，它不依赖后端，所有操作都在浏览器中实时完成。关键在于：先正确加载图片到画布，再通过像素数据进行读写，最后导出或渲染结果。

加载图片到 Canvas 的正确流程

必须等待图片完全加载后再绘制，否则 canvas 会显示空白。常见错误是直接设置 img.src 后立刻调用 drawImage。

• 创建 Image 对象，设置 src
• 监听 onload 事件，在回调中操作 canvas
• 建议同步设置 canvas 宽高为图片原始尺寸，避免拉伸失真：canvas.width = img.naturalWidth；canvas.height = img.naturalHeight
• 跨域图片需设置 img.crossOrigin = "anonymous"，否则 getImageData 会因安全限制报错

获取与修改像素数据

getImageData(x, y, width, height) 返回一个包含 RGBA 值的对象，data 是长度为 width × height × 4 的一维数组，每 4 个元素代表一个像素（R、G、B、A）。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 灰度化：对每个像素计算加权平均值，如 0.299*R + 0.587*G + 0.114*B，再赋给 R/G/B 通道
• 反色：每个颜色通道取 255 - 原值
• 亮度调整：R/G/B 同时加减一个整数（如 +30 提亮，-20 变暗），注意限制在 0–255 范围内
• 修改完成后，必须用 putImageData(imageData, x, y) 写回画布，否则无视觉变化

高级图像操作技巧

Canvas 不仅能改颜色，还能实现几何变换和局部处理。

立即学习“前端免费学习笔记（深入）”；

• 裁剪缩放：使用 drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 九参数形式，可从源图任意区域截取并缩放到目标位置
• 马赛克效果：按块遍历像素，将每个块内所有像素设为左上角像素的值
• 旋转/翻转：配合 save()、translate()、rotate() 和 scale() 实现，注意旋转中心需手动平移校准
• 导出处理结果：调用 canvas.toDataURL("image/png") 或 toDataURL("image/jpeg", 0.9) 获取 Base64 字符串，可用于显示、下载或上传

Canvas 与 CSS filter 的协同使用

二者定位不同：Canvas 处理改变像素本身，CSS filter 是叠加渲染层，不修改原始数据。

• CSS filter 更轻量，适合快速预览（如 filter: brightness(1.3) contrast(1.2) saturate(0.8)）
• 但 toDataURL 不捕获 CSS 滤镜效果，导出的是未加滤镜的 canvas 像素
• 可先用 Canvas 做基础处理（如裁剪、灰度），再用 CSS filter 叠加动态调节（如实时滑块调对比度）
• 注意 drop-shadow() 等函数可能溢出容器，父元素应避免 overflow: hidden