前言

前段时间看到一个国外的网站，在线生成ajax loading动画。觉得很实用，于是动起了移植到自己网站的念头（一直以来的习惯，看到好的工具总想着移植到本地好好研究）。根据以往移植的经验最终把 这个工具移植到自己网站上了，生成图片的核心还是用了原来网站的接口，所以这个功能的实现完全依赖于原网站，生成和下载图片的速度取决于网速，由于是国外 的网站，功能并不稳定。下面介绍下我移植的过程已经遇到的问题。

1.把原网站的代码本地化

这一步比较简单，不过有点麻烦，相关的图片，css,js，html文件保存在本地。

2.实现生成图片的功能

这里遇到了第一个问题，网站生成的图片保存在根据颜色值生成的途径上，而这些图片有防盗链设置，不 允许外来网站引用。尝试过写程序把网站上的所有图片按原目录下载到本地，但是图片太多，放弃了这个思路。

最后采取的办法是通过伪造来源访问原网站的图片，获取图片数据，并直接输出在页面。

下面是实现的代码

1. $file=$_REQUEST['file'];  
2. $url = ’http://www.ajaxload.info/’.$file;  
3. $ch = curl_init();  
4. curl_setopt($ch, CURLOPT_URL, $url);  
5. curl_setopt ($ch, CURLOPT_HEADER,0);  
6. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
7. curl_setopt ($ch, CURLOPT_REFERER, “http://www.ajaxload.info”);  
8. curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);  
9.    
10. $chData = curl_exec($ch);  
11. if (curl_errno($ch)) {  
12.     echo ’Curl error: ’ . curl_error($ch);  
13. }  
14.    
15. curl_close($ch);  
16. header(“Content-type:image/gif”);  
17. echo $chData;  

注：本人的网站基于BAE建设，与其他服务器的伪造来源有些区别

其他服务器需把

1. curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);  

替换成

1. curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);  

把上述代码保存为ajaxload.php文件用下面的代码

1. var url = ’http://sanyecao.me/ajaxloader.php?file=cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$$(‘type’).value+’-'+trans+’.gif’;  

注：http://bloglaotou.duapp.com替换成你自己的ajaxloader.php文件的地址。

替换原网站script.js文件中的

1. var url = ’cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$(‘type’).value+’-'+trans+’.gif’;  

3.下载图片的实现

同样的原因，原网站的下载功能移植到本地后也不能用了，实现的方法与生成图片的方法类似

代码如下

1. if(isset($_GET[url])){  
2.   
3.     $file=$_GET[url];//获取参数  
4.     header(“Content-Type: application/force-download”);  
5.     header(“Content-Disposition: attachment; filename=ajax-loading.gif”);//$downname是下载后的文件名  
6.     $file=$_REQUEST['url'];  
7.     $url = ’http://www.ajaxload.info/’.$file;  
8.     $ch = curl_init();  
9.     curl_setopt($ch, CURLOPT_URL, $url);  
10.     curl_setopt ($ch, CURLOPT_HEADER,0);  
11.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
12.     curl_setopt ($ch, CURLOPT_REFERER, “http://www.ajaxload.info”);  
13.     curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);  
14.       
15.     $chData = curl_exec($ch);  
16.     if (curl_errno($ch)) {  
17.         echo ’Curl error: ’ . curl_error($ch);  
18.     }  
19.       
20.     curl_close($ch);  
21.     echo $chData;  
22.     exit;//结束程序  
23. }  

把上面的代码保存为download.php并把原网站script.js文件中的

1. if(!$(‘downloadit’)) domEl(‘a’,'Download it’,[['id','downloadit'],['href','download.php?img='+url]],$(‘previewinner’));  

替换为

1. if(!$(‘downloadit’)) domEl(‘a’,'下载’,[['id','downloadit'],['href','http://sanyecao.me/download.php?url='+path]],$(‘previewinner’));  

注：http://sanyecao.me替换成你自己的ajaxloader.php文件的地址。

效果预览

该功能已经集成到网站的小工具里，点这里