[前端] 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>
　　甚至请求头中根本没有 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也可以正常工作了。

谢谢关注~