获取Canvas图像数据需用getImageData()或toDataURL()/toBlob()：前者返回含RGBA像素数组的ImageData对象，适用于图像处理；后者生成Base64或Blob图片资源，用于展示或下载；截取区域需先计算坐标再调用getImageData，注意显式设置宽高、跨域配置及绘制完成时机。
要获取当前 Canvas 的图像数据，核心是使用 getImageData() 或导出为图片格式的 toDataURL() / toBlob() 方法。前者返回像素级原始数据（适合裁剪、滤镜等处理），后者直接生成可下载或展示的图片资源。
获取整块画布的像素数据
适用于需要分析、修改或局部重绘的场景，比如实现马赛克、灰度转换、选区识别等。
-
调用方式：
ctx.getImageData(0, 0, canvas.width, canvas.height) - 返回值是
ImageData对象，含.data（Uint8ClampedArray 类型的 RGBA 像素数组）、.width和.height - 注意：该操作受同源策略限制——若 Canvas 中绘制了跨域图片，调用会抛出
SecurityError
导出完整画布为图片链接
最常用的方式，适合截图保存、分享或上传。
-
生成 Base64 数据 URL：
canvas.toDataURL('image/png')（默认 PNG）或'image/jpeg'（支持质量参数，如1表示最高质量） -
生成 Blob 对象（更省内存，推荐用于大图）：
canvas.toBlob(callback, 'image/png', 0.95) - 生成的 URL 可直接赋给
<img src="...">展示，或配合<a download>下载
截取画布中指定矩形区域
当用户拖拽选择截图范围后，需精确提取该区域数据。
- 先记录鼠标按下（
mousedown）和松开（mouseup）时的坐标，计算出左上角(x, y)和宽高(width, height) - 调用
ctx.getImageData(x, y, width, height)获取子区域像素数据 - 若需导出为图片，可将该数据绘制到另一个临时 Canvas 上，再调用
toDataURL()
注意事项与常见问题
避免踩坑的关键点：
- Canvas 宽高必须显式设置（
canvas.width = ...），不能仅靠 CSS 缩放，否则getImageData会按 CSS 尺寸读取，导致模糊或偏移 - 跨域图片需在
<img>加crossOrigin="anonymous"，且服务端响应头含Access-Control-Allow-Origin - 调用
getImageData前确保 Canvas 已完成绘制（例如监听img.onload后再 draw） - 频繁调用
getImageData开销较大，如做实时预览，建议节流或使用requestAnimationFrame
