我正在做一些测试,将图像加载到画布中,并在我们的aws cdn上使用一个私人托管的图像.此cdn具有CORS策略,可以将图像加载到画布中.
我想通过github,jsbin等与世界公开分享我的代码,但需要使用自由的CORS策略来承载一个或两个图像.有没有可以使用的图像? Google和Google Image Search搜索并没有改变.
解决方法
我通常使用
http://imgur.com/的图像(与SO使用的内联图像相同的网站) – 无需注册,只需上传或粘贴到图像链接中即可.
它支持CORS要求,因此您可以直接链接并使用canvas进行像素提取.
如果您需要托管不同的文件,除了图像我建议DropBox作为markE.
然而,有任何免费服务包括. imgur和DropBox,所以在使用链接之前,请务必阅读使用条款(ToS)(即,它们都不会用作CDN,因此您可能想查看一些商业CDN提供商).
启用CORS使用
如果允许,您可以在JavaScript中设置 – 在设置src之前设置crossOrigin:
var img = new Image(); img.crossOrigin = ""; // or "anonymous",will be interpreted the same ... img.src = "...";
<img crossOrigin="" src="" ...>
测试
var img = new Image(); img.crossOrigin = ""; img.onload = test; img.src = "http://i.imgur.com/fHyEMsl.jpg"; function test() { var ctx = document.querySelector("canvas").getContext("2d"); ctx.drawImage(this,0); // This will fail if no CORS support,otherwise all OK try { ctx.getimageData(0,10,10); alert("All OK"); } catch(err) { alert("No CORS support..."); } }
<canvas></canvas>
原文地址:https://www.jb51.cc/html5/168233.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。