解决getImageData跨域问题

时间:2024-10-21 07:21:50

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

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

 

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