我想使用 DataUrl() 从画布导出谷歌云端硬盘图像。为了使用画布制作支持 CORS 的图像,我在 img 标签中添加了 cross="anonymous" 属性。
<img crossOrigin="anonymous" src="https://drive.google.com/uc?id=0By1uZFYMEbpuSFlFa1h5Y2o0a1k&export=download" id="media_img" />
但它显示错误
从"https://drive.google.com/uc?id=0By1uZFYMEbpuSFlFa1h5Y2o0a1k&export=download"重定向到"https://doc-0g-ac-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/rn783m94dmuq387i8t74c2cse5pfvoti/1526457600000/05627031542031468169/*/0By1uZFYMEbpuSFlFa1h5Y2o0a1k?e=download"已被 CORS 策略阻止:请求的资源上不存在"访问控制允许源"标头。因此,不允许访问源"http://localhost:8002"。
出于开发目的,您可以使用此 cors-proxy https://cors-anywhere.herokuapp.com
但它缓慢且不稳定 - 因此对于生产代码,您应该使用允许 CORS 设置简单的文件服务器,或者设置您自己的允许 CORS 的代理服务器。(下面的片段很慢,您需要等待一段时间才能显示 img)
<img crossOrigin="anonymous" src="https://cors-anywhere.herokuapp.com/https://drive.google.com/uc?id=0By1uZFYMEbpuSFlFa1h5Y2o0a1k&export=download" id="media_img" width=250 />