HTML5怎样用canvasgetImageData取画布数据_HTML5画布取数法【引介】_技术教程

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 标签，避免污染）