解决getImageData跨域问题

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

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

 

<?php
$pic = 'https://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 ?>" />