跨域图片显示正常却不能导出 Canvas，怎样复现 origin-clean 限制

图片跨源显示成功不代表画布仍可导出。绘入未经适当 CORS 授权的跨源图像后，Canvas 的 origin-clean 条件会受影响；需要在图像请求前设置 crossOrigin，并由资源端返回正确授权。

用本地两个端口复现安全边界

程序生成一个原创红像素PNG，两个仅绑定127.0.0.1的服务分别担当页面和图片来源。不同端口就是不同源，第一条图片路径没有CORS响应头，图像仍可解码并绘入，但toDataURL应抛SecurityError。第二条路径返回Access-Control-Allow-Origin，并配合anonymous请求，才应成功导出PNG。

客户端和资源端必须配套

仅在img上写crossOrigin不能凭空授权，资源服务器也必须接受相应跨源请求。设置应在src之前，避免请求已经按另一种模式发出。真实系统若使用凭据，授权规则还会不同，本例明确不带凭据、只比较匿名授权，不能直接推广到登录后的受保护图片或第三方云存储配置。

不要用异常处理掩盖来源问题

catch可以给用户清楚提示，但不能让被污染的画布自动恢复可读。应从资源清单查出哪张图跨源、用什么请求模式加载，以及响应头是否正确。画布尺寸重置能清空位图状态，却也丢掉内容；把它当作绕过安全限制再保留原图导出是不成立的。需要重新建立干净画布并只绘入符合条件的来源。

证据只覆盖本例文件与响应

附件没有下载外网媒体，也不尝试绕过任何第三方权限。脚本只检查自己生成的PNG、两个随机端口以及导出结果；目标CDN、重定向、凭据或缓存行为均未测。现场应把失败资源与响应条件交给对应维护方核查，不能仅因图像能在屏幕上看到就要求浏览器允许读取像素，显示与读取有不同安全边界。

把请求模式也写入资源清单

同一个图片URL在普通img显示与anonymous请求中可能走不同响应条件，所以清单不应只列地址，还应记录请求模式、是否带凭据和实际来源。若重定向到另一源，也要检查最终响应条件。本例没有重定向和用户凭据，成功组只证明本地匿名授权路径。不能把toDataURL失败当成图像文件损坏；应先区分解码失败与安全读取被拒绝。

下载并复现

下载原创HTML夹具、独立验证程序、本次执行记录和依赖与运行说明，放在同一目录。安装Playwright 1.58.0及其Chromium后运行 python verify.py；程序使用两个随机本地端口，自动关闭浏览器与服务，不请求外网或业务接口。

本次实际环境为Python 3.12.4、Playwright 1.58.0、Chromium 145.0.7632.6。Canvas2D或WebGL1页面API与像素读取；非指针输入、非实体GPU性能测量。断言已通过；完整事件和数值保留在执行记录，不能把它改名后当目标展项测量。

Canvas题限定2D上下文，WebGL题限定WebGL1；启动使用ANGLE SwiftShader软件后端参数，实际renderer可见对应执行记录。软件后端的像素结果不代表实体显卡性能、驱动稳定性或跨浏览器一致性。

继续核查与一级出处

基础背景见把图片改成300DPI为何仍不清楚，怎样核对像素与物理尺寸。跨源条件满足后，再检查最终导出是否合成了背景层，可继续用擦除互动涂鸦把背景也擦没了，怎样核对 destination-out 合成范围取证；相关工程入口在专题与产品对接说明。

• canvas origin-clean标志与导出安全检查：2026-10-24已联网读取一级来源；WHATWG HTML Living Standard，读取页标记2026-10-22更新。