<p>Canvas getImageData 返回空或全黑是因跨域污染；需同源或设置 crossOrigin="anonymous" 并服务端支持 CORS；data 按 RGBA 每4字节一组，索引为 (y width + x) 4；修改后须调用 putImageData 刷新；性能优化宜降采样、复用 ImageData 或位运算。</p>
Canvas getImageData 为什么返回空或全黑？
调用 getImageData 后拿到的 data 数组全是 0，通常不是代码写错了，而是 Canvas 处于「跨域污染」状态。只要 Canvas 曾经 drawImage 过来自其他源（比如 CDN、本地 file:// 协议图片），哪怕只是 draw 了一次，后续调用 getImageData 就会被浏览器拦截并静默返回透明黑数据。
解决方法只有两个：
- 确保图片来源同源（如都走 localhost:3000）
- 如果必须加载跨域图片，
<img>标签要加crossOrigin="anonymous"属性，且服务端响应头必须包含Access-Control-Allow-Origin - 加载完成后，再调用
ctx.drawImage(img, ...)，最后才是ctx.getImageData(...)
getImageData 返回的 data 数组怎么索引单个像素？
getImageData(x, y, width, height) 返回一个 ImageData 对象，其 .data 是 Uint8ClampedArray，按 RGBA 顺序每 4 个元素一组表示一个像素。索引计算不依赖 x/y 坐标直接相乘，而取决于你传入的区域宽高和起始偏移。
例如：const id = ctx.getImageData(10, 20, 1, 1) 取的是 (10,20) 这一个像素，则 id.data[0] 是 R，id.data[1] 是 G，id.data[2] 是 B，id.data[3] 是 A。
立即学习“前端免费学习笔记（深入）”；
但如果取一块区域：const id = ctx.getImageData(0, 0, 100, 50)，那么 (x,y) 对应的 RGBA 起始索引是：(y * id.width + x) * 4。注意：这里的 id.width 是 getImageData 调用时传入的 width，不是整个 canvas 的宽度。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
修改像素后如何刷新到画布上？
getImageData 只读取，不写入；修改 id.data 数组本身不会自动更新画面。必须显式调用 putImageData(id, x, y) 才能写回。
常见误区：
- 改了
id.data就以为画布变了 —— 不会，必须putImageData - 把
putImageData的 x/y 写成原始图像坐标而非目标绘制位置 —— 它决定贴到 canvas 上哪儿，不是“还原原位” - 对大图频繁逐像素
putImageData（比如每帧）会严重卡顿 —— 应该批量处理完再一次性 put，或改用createImageData+ 手动填充 + 一次 put
想做灰度/二值化处理，但性能很差怎么办？
纯 JS 循环遍历每个像素做计算（比如 0.299*r + 0.587*g + 0.114*b）在 1000×1000 图像上轻松吃满单核，尤其在低端手机上掉帧明显。
更实际的做法：
- 限制处理区域：只对
getImageData指定感兴趣区域（ROI），别整图拉取 - 降采样预处理：先用
canvas.drawImage把原图缩放到 1/4 尺寸再取数据，处理完再放大显示（人眼对细节不敏感） - 避免反复创建
ImageData：复用同一个ImageData实例，用ctx.createImageData(w, h)预分配，然后直接改.data - 真要高性能？WebAssembly 或 OffscreenCanvas + Worker 是正解，但绝大多数图像滤镜需求，优化循环+位运算（如
(r*19595 + g*38469 + b*7472) >> 16）已够用
最常被忽略的一点：Canvas 默认是 sRGB 编码，但 getImageData 返回的数值已经是 gamma 校正后的 0–255 整数，做线性计算（比如亮度调整）前需注意是否要转回线性光——多数简单处理可跳过，但涉及物理模拟或精确合成时绕不开。
