解决getImageData跨域问题

    1.场景

    在项目开发过程中要用到html5增加的getImageData方法来实现刮刮卡的效果，后台上传图片，手机端用手刮。在本地开发没遇到问题，上线之后发现刮不了，提示"Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."错误。后在网上搜索了下，发现getImageData此方法不允许操作非此域名外的图片资源，即使是子域也不行。因为在线上文件上传目录是部署在子域名上的，而本地则是一个域名上，因此在线上才发现问题。

        出现问题了，就解决问题呗。以前写篇博客“用php把图片编码嵌入到html”，可以把图片弄成字符串的格式嵌入在网页内，那么外站的图片资源不就变成本地的了么，用此方法一试，搞定。

2.解决办法

<?php
$pic = 'http://avatar.csdn.net/7/5/0/1_molaifeng.jpg';
$arr = getimagesize($pic);
$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));
?>
 
<img src="<?php echo $pic ?>" />

3.说明

（1）开发时用的是本地资源，所以不存在跨域，上线以后，一般图片会放在图片服务器上，其它资源放在别的服务器上，而且canvas的getImageData不允许跨域的，此时就有应该想办法解决跨域的问题，上边的代码我找给公司的PHP开发同事使用可行，虽然不懂PHP，但大概意思应该是通过base64将图片转为本地资源，本地资源就不会跨域了。

（2）转载地址：https://blog.csdn.net/molaifeng/article/details/42293509