前言
前段時間看到一個國外的網站，在線生成ajax loading動畫。覺得很實用，於是動起了移植到自己網站的念頭（一直以來的習慣，看到好的工具總想着移植到本地好好研究）。根據以往移植的經驗最終把 這個工具移植到自己網站上了，生成圖片的核心還是用了原來網站的接口，所以這個功能的實現完全依賴於原網站，生成和下載圖片的速度取決於網速，由於是國外 的網站，功能並不穩定。下面介紹下我移植的過程已經遇到的問題。
1.把原網站的代碼本地化
這一步比較簡單，不過有點麻煩，相關的圖片，css,js，html文件保存在本地。
2.實現生成圖片的功能
這裏遇到了第一個問題，網站生成的圖片保存在根據顏色值生成的途徑上，而這些圖片有防盜鏈設置，不 允許外來網站引用。嘗試過寫程序把網站上的所有圖片按原目錄下載到本地，但是圖片太多，放棄了這個思路。
最後採取的辦法是通過僞造來源訪問原網站的圖片，獲取圖片數據，並直接輸出在頁面。
下面是實現的代碼
$file=$_REQUEST['file'];
$url = ’http://www.ajaxload.info/’.$file;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HEADER,0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_REFERER, “http://www.ajaxload.info”);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$chData = curl_exec($ch);
if (curl_errno($ch)) {
echo ’Curl error: ’ . curl_error($ch);
}
curl_close($ch);
header(“Content-type:p_w_picpath/gif”);
echo$chData;
注：本人的網站基於BAE建設，與其他服務器的僞造來源有些區別
其他服務器需把
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
替換成
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
把上述代碼保存爲ajaxload.php文件用下面的代碼
var url = ’http://bloglaotou.duapp.com/ajaxloader.php?file=cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$$(‘type’).value+’-'+trans+’.gif’;
注：http://bloglaotou.duapp.com替換成你自己的ajaxloader.php文件的地址。
替換原網站script.js文件中的
var url = ’cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$(‘type’).value+’-'+trans+’.gif’;
3.下載圖片的實現
同樣的原因，原網站的下載功能移植到本地後也不能用了，實現的方法與生成圖片的方法類似
代碼如下
if(isset($_GET[url])){
$file=$_GET[url];//獲取參數
header(“Content-Type: application/force-download”);
header(“Content-Disposition: p_w_upload; filename=ajax-loading.gif”);//$downname是下載後的文件名
$file=$_REQUEST['url'];
$url = ’http://www.ajaxload.info/’.$file;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HEADER,0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_REFERER, “http://www.ajaxload.info”);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$chData = curl_exec($ch);
if (curl_errno($ch)) {
echo ’Curl error: ’ . curl_error($ch);
}
curl_close($ch);
echo$chData;
exit;//結束程序
}
把上面的代碼保存爲download.php並把原網站script.js文件中的
if(!$(‘downloadit’)) domEl(‘a’,'Download it’,[['id','downloadit'],['href','download.php?img='+url]],$(‘previewinner’));
替換爲
if(!$(‘downloadit’)) domEl(‘a’,'下載’,[['id','downloadit'],['href','http://bloglaotou.duapp.com/download.php?url='+path]],$(‘previewinner’));
注：http://bloglaotou.duapp.com替換成你自己的ajaxloader.php文件的地址。
效果預覽
該功能已經集成到網站的小工具裏，點這裏查看