在项目开发过程中要用到html5增加的getImageData方法来实现刮刮卡的效果，后台上传图片，手机端用手刮。在本地开发没遇到问题，上线之后发现刮不了，提示"Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."错误。后在网上搜索了下，发下getImageData此方法不允许操作非此域名外的图片资源，即使是子域也不行。因为在线上文件上传目录是部署在子域名上的，而本地则是一个域名上，因此在线上才发现问题。
出现问题了，就解决问题呗。以前写篇博客“用php把图片编码嵌入到html”，可以把图片弄成字符串的格式嵌入在网页内，那么外站的图片资源不就变成本地的了么，用此方法一试，搞定。
<?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 ?>" />
关键字词:
相关文章
- 基于iframe实现ajax跨域请求 获取网页中ajax数据
- Ajax获取到数据放入echarts里不显示的原因分析及解决办法
- 通过Ajax手动解决WordPress WP-PostViews不计数的问题
- jQuery validate插件submitHandler提交导致死循环解决方法
- jQuery prototype冲突的2种解决方法(附demo示例下载)
- jQuery Mobile页面跳转后未加载外部JS原因分析及解决
- AJax与Jsonp跨域访问问题小结
- ajax调用中ie缓存问题解决方法
- Ajax jsonp跨域请求实现方法
- jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法
