Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CORS与Canvas图片toDataURL

  Canvas为了安全性考虑,当绘制了外部图片后它会变成只可写不可读的状态,getImageData、toDataURL之类的试图读取数据的方法全都无法使用。理论上开启了CORS的资源应该被允许读取,只是IMG元素发起的请求默认并不带Origin字段,没能应用上CORS。
  下面这个测试就是服务器允许任意源访问,但Canvas依然无法使用toDataURL
<? if($_GET['type']=='img'){ ob_end_clean(); header('Access-Control-Allow-Origin: *'); header('Content-Type: image/png'); die(file_get_contents('lena_std.png')); }; ?> <script> var img=new Image; img.onload=function(){ var canvas=document.createElement("canvas"); canvas.width=img.width,canvas.height=img.height; var g=canvas.getContext("2d"); g.drawImage(img,0,0,img.width,img.height); console.log(canvas.toDataURL()); }; img.src="http://localhost/test.php?type=img"; </script> Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
  甚至请求头中根本没有 Origin 字段

  现在我们为IMG元素指定crossOrigin属性
<script> var img=new Image; img.onload=function(){ var canvas=document.createElement("canvas"); canvas.width=img.width,canvas.height=img.height; var g=canvas.getContext("2d"); g.drawImage(img,0,0,img.width,img.height); console.log(canvas.toDataURL()); }; img.crossOrigin="anonymous"; //关键 img.src="http://www.web-tinker.com/share/lena_64px.png"; </script>
  这样发送请求时就会包含 Origin 字段,而且toDataURL也可以正常工作了。

  参考:
    MDN img#attr-crossorigin
网名:
54.198.108.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^