getImageData 报 SecurityError 的根本原因是 canvas 被跨域图片污染；需同时满足：img.crossOrigin = 'anonymous' 在 src 前设置、服务端返回 Access-Control-Allow-Origin 头、避免 file:// 或本地拖拽文件。
getImageData 报 SecurityError 怎么办
根本原因不是代码写错，而是 canvas 被“污染”了——只要用 drawImage() 绘制过跨域图片（哪怕只是本地服务器没配 CORS），后续调用 getImageData() 就会直接抛 SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'。
关键修复点有三个，缺一不可：
-
img.crossOrigin = 'anonymous'必须在设置img.src之前执行，设晚了无效 - 服务端响应头必须包含
Access-Control-Allow-Origin: *（或具体域名），否则即使加了crossOrigin也会失败 - 如果图片来自
file://协议或用户拖拽的本地文件，getImageData天然不可用，得换路子
拿到 ImageData.data 后怎么正确读像素
ImageData.data 是一个 Uint8ClampedArray，不是普通数组，它按 RGBA 四字节一组线性排列：第 0–3 位是 (0,0) 像素的 R、G、B、A，第 4–7 位是 (1,0) 像素，以此类推。常见误操作是直接用 for...in 或 forEach 遍历，结果出错。
安全读取方式：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 像素索引公式：
const idx = (y * width + x) * 4，再取data[idx]（R）、data[idx+1]（G）等 - 遍历整图时，用
for (let i = 0; i ，避免越界或漏字节 - 注意：
data.length === width * height * 4，但width和height来自imageData.width/imageData.height，不是 canvas 元素的宽高属性
只取局部区域还是全图？参数怎么填
ctx.getImageData(x, y, width, height) 的 x、y 是画布坐标系里的左上角位置，不是 CSS 像素；width、height 是要提取的矩形区域尺寸，单位是逻辑像素（即 canvas 的 width/height 属性值，不是 CSS style 宽高）。
容易踩的坑：
- 传入
0宽或高会直接抛异常，不是返回空数据 - 超出 canvas 边界的部分会被自动截断，但不会报错——比如 canvas 是 200×200，你传
getImageData(150, 150, 100, 100)，实际只取右下角 50×50 区域 - 想取整图，别写
ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight)，要用canvas.width和canvas.height
性能差、卡顿，是不是 getImageData 用错了
每次调用 getImageData() 都会触发一次像素内存拷贝，开销不小。高频读取（比如每帧都调）必然卡顿，这不是浏览器 bug，是设计使然。
实用优化策略：
- 只在必要时调用，比如用户点击后分析某块区域，而不是动画循环里反复读
- 如果只是做灰度、反色等简单滤镜，优先用 CSS
filter或ctx.filter（Chrome 96+），比 JS 操作data快一个数量级 - 真要 JS 处理，把
ImageData缓存下来，修改完再统一putImageData()，别边读边写 - 处理大图时，考虑降采样：先用
drawImage()缩小到 1/4 尺寸再读，精度损失可接受，速度提升明显
最常被忽略的一点：getImageData 返回的是副本，改它不影响画布；但很多人忘了最后调 putImageData()，以为改了 data 就自动更新画面。
