解决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 = '1_molaifeng.jpg';

$arr = getimagesize($pic);

$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));

?>

<img src="<?php echo $pic ?>" />