Canvas跨域视频截图报错的根本原因是未正确配置CORS：video标签必须声明crossorigin="anonymous"，服务端需返回Access-Control-Allow-Origin响应头，且JS需在video就绪后调用drawImage和toDataURL。
在HTML5中用Canvas对跨域视频截图时，报错 “Tainted canvases may not be exported” 或 “Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’”，根本原因是视频资源触发了Canvas污染机制。仅靠drawImage()能画出来，但一旦调用toDataURL()、getImageData()等读取像素的操作，就必须确保视频资源是“合法跨域”的——而crossorigin属性正是开启这个合法通道的第一步。
video标签必须显式声明crossorigin="anonymous"
这是最基础也最关键的一步。不能只在JS里设置video.crossOrigin = 'anonymous'，还要确保HTML结构或初始化时已生效，否则浏览器可能按默认“不跨域”模式发起请求，导致后续所有操作失败。
- 推荐写法（HTML中直接声明）：
<video controls crossorigin="anonymous"><source src="https://cdn.example.com/clip.mp4" type="video/mp4"></source></video> - 如果动态创建video元素，务必在设置
src前赋值：const video = document.createElement('video');<br>video.crossOrigin = 'anonymous'; // 必须在src之前<br>video.src = 'https://cdn.example.com/clip.mp4'; - 注意大小写：属性值写
"anonymous"，不是"Anonymous"（部分老文档有误写，实际以小写为准）
服务端必须返回合法的CORS响应头
仅仅加crossorigin不够。浏览器看到该属性后，会向视频服务器发起一个带Origin头的预检或普通请求，并严格检查响应头中是否包含：Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: https://your-site.com
- 如果视频托管在CDN（如Cloudflare、阿里云OSS、七牛），需在控制台开启“允许跨域”或手动配置CORS规则，指定
Allowed Origin和允许的Methods（GET通常足够） - 若用Nginx，添加：
add_header 'Access-Control-Allow-Origin' '*';<br>add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';<br>add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
- 本地开发时若用file://协议打开页面，CORS完全失效——必须通过
http://localhost等HTTP服务访问
绕过缓存干扰：给src加时间戳参数
即使配置正确，浏览器也可能因缓存复用旧的、未带CORS头的响应，导致crossorigin形同虚设。尤其在调试阶段反复修改后容易出现。
立即学习“前端免费学习笔记（深入）”；
- 安全做法是在
src末尾拼接唯一参数：video.src = 'https://cdn.example.com/clip.mp4?t=' + Date.now(); - 避免使用
Math.random()（可能被代理层去重），优先用时间戳 - 此操作不影响视频播放，只为强制刷新资源请求链路
JS截图逻辑要等video readyState达标
视频加载有状态时序，loadeddata或canplay比onload更可靠；且首次绘制前建议检查video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA。
- 示例关键代码：
video.addEventListener('canplay', () => {<br> canvas.width = video.videoWidth;<br> canvas.height = video.videoHeight;<br> ctx.drawImage(video, 0, 0);<br> const base64 = canvas.toDataURL('image/png'); // 此时不再报错<br>}); - 不要在
play()后立刻draw——视频帧可能还未解码就绪 - 如需截取特定时间点帧，先
video.currentTime = x;，再监听seeked事件
