getImageData 抛 SecurityError 的根本原因是 canvas 被跨域图片污染，触发同源策略限制；需提前设 img.crossOrigin='anonymous'、服务端配 CORS 头，并避免任何跨域绘制操作。
直接用 getImageData 能取到画布像素，但多数时候你拿不到预期结果——不是返回空数组，就是报错 SecurityError，或者数据全是 0。根本原因不是 API 不好用，而是它严格遵循同源策略和 canvas 污染规则。
为什么 getImageData 会抛 SecurityError
只要 canvas 曾经绘制过跨域图片（哪怕只是 drawImage(img, 0, 0)），它就被标记为“污染”，之后调用 getImageData 就会触发 SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'。
- 即使图片实际来自同域，但 HTML 中没加
crossorigin属性，浏览器仍按跨域处理 -
img.crossOrigin = 'anonymous'必须在设置src之前 设置，否则无效 - 服务端需返回
Access-Control-Allow-Origin响应头，否则匿名请求也会失败
如何安全地从 canvas 读取像素数据
确保 canvas 未被污染是前提；拿到数据后，ImageData 的 data 字段是 Uint8ClampedArray，每 4 个元素一组对应一个像素的 RGBA 值（0–255）。
- 先检查 canvas 是否可读：
ctx.canvas.width > 0 && ctx.canvas.height > 0 - 取整块区域用
ctx.getImageData(0, 0, width, height)；只取局部传对应坐标和宽高 - 避免高频调用：每次调用都触发一次像素拷贝，大量读取建议缓存或节流
- 若只需灰度或亮度，别在 JS 里循环算——考虑用
filter: brightness()或 WebGL 预处理
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous'; // 必须写在 src 前
img.src = 'https://example.com/photo.png';
img.onload = () => {
ctx.drawImage(img, 0, 0);
try {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData.data[0], imageData.data[1], imageData.data[2]); // R G B
} catch (e) {
console.error('无法读取像素:', e.message);
}
};
替代方案：当 getImageData 真的不可用时
有些场景无法规避污染（比如用户上传并预览本地图片后又 drawImage），此时 getImageData 必然失败。可行路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 改用
canvas.toDataURL('image/png')导出 base64，再用fetch或URL.createObjectURL重新加载为 Blob 图片，走 file reader 解析像素（性能差，仅适合小图） - 用
OffscreenCanvas+ Web Worker 在后台解码图片（需 Chrome 69+、Firefox 72+，且图片需先转为ImageBitmap） - 更现实的做法：限制用户只能上传本地文件 → 用
FileReader读取ArrayBuffer→ 交给createImageBitmap→ 再绘制到 canvas（绕过 img 标签，避免污染）
真正卡住人的从来不是 API 怎么写，而是 canvas 污染状态不可逆、不可查——没有 ctx.isTainted 这种属性，只能靠 try/catch 和经验预判。一旦画布被污染，除了重建 canvas，没有重置方法。
