在網上看到的關於phantomjs實現截屏功能很多都是與node結合在一起使用，並需要輸入命令才能執行。因此我想要實現輸入網址即可截屏並輸出圖片的功能。示例：http://120.77.171.182:8080/laravel&phantomjs/public/ ，可以在這看看效果。
一：下載並安裝phantomjs
二：裝後臺集成環境Appserv
三：安裝laravel開發框架
三：實現代碼及注意事項
1、phantomjs很好安裝，http://phantomjs.org/官網下載到任意目錄（注意：如果爲了省事，最好安裝到本地環境變量的目錄下 如下圖），如果不想下載到此目錄下，可下載完後到計算機屬性的環境變量增加phantomjs放置的路徑
2、appserv集成環境，可到我的百度網盤下載appserv程序 鏈接：http://pan.baidu.com/s/1bpNHJcV 密碼：kdx4 ，手動安裝。當然這個集成環境只是爲了方便部署，裏面集成了appache，簡單方便。如果想使用iis發佈也可以省略這個步驟。
3、laravel框架下載，鏈接：http://pan.baidu.com/s/1dFB26Sp 密碼：ki0f 下載解壓後放到剛剛安裝好的appserv文件夾下的www文件夾下。
此時可以看看有沒有安裝成功。到瀏覽器下輸入http://localhost/laravel/public/這個路徑，因爲這個appserv默認是80端口，如果在安裝時沒有修改，那麼就需要確認iis沒有佔用80端口。如果瀏覽器有界面出來，那麼說明安裝成功了。如果沒有出現界面，那麼到控制面板-》管理工具-》服務 下看看apache24和mysql57有沒有啓動，沒有就手動啓動。
此時需要的程序都安裝完了，下面開始寫代碼。
首先到phantomjs文件夾的bin目錄下創建一個js文件
snap.js代碼
var page = require('webpage').create();
var args = require('system').args;
var url = args[1];
var filename = args[2];
page.viewportSize={width:1024,height:768};
page.open(url, function () {
page.render(filename);
phantom.exit();
});
接下來到laravel文件夾下的resources的views文件夾下修改html代碼，我只是把laravel重命名了，如果重命名，那麼到瀏覽器輸入地址也應該隨着一起改變
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>快照生成</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
form {
padding: 20px;
}
div {
margin: 20px 0 0;
}
input {
width: 200px;
padding: 4px 2px;
}
#placeholder {
display: none;
}
</style>
</head>
<body>
<form action="" id="form">
<input type="text" id="url" />
<button type="submit">生成快照</button>
<div>
<img src="" alt="" id="placeholder" />
</div>
</form>
<script>
$(function(){
$('#form').submit(function(){
if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
{
alert('正在生成網站快照，請耐心等待...');
return false;
}
$(this).data('generate', true);
$('button').text('正在生成快照...').attr('disabled', true);
$.ajax({
type: 'GET',
url: 'http://localhost/laravel&phantomjs/public/test1',
data: 'url=' + $('#url').val(),
success: function(data){
$('#placeholder').attr('src', data).show();
$('#form').data('generate', false);
$('button').text('生成快照').attr('disabled', false);
}
});
return false;
});
});
</script>
</body>
</html>
在這個controllers目錄下新建一個php文件，命名一定是controller.php結尾
blogcontroller.php文件代碼
<?php
namespace App\Http\Controllers;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\DB;
class BlogController extends Controller {
public function test1()
{
if (isset($_GET['url']))
{
set_time_limit(0);
$url = trim($_GET['url']);
$filePath = md5($url).'.png';
if (is_file($filePath))
{
exit($filePath);
}
$command = "D:/phantomjs/bin/phantomjs D:/phantomjs/bin/snap.js {$url} {$filePath}"; //這個地方是真正調用phantomjs這個程序的。使用路徑來實現調用
@exec($command);
exit($filePath);
}
}
}
最後一步就是寫一個路由 ，下面的路徑就是配置路由的地方
實現代碼就是
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| This file is where you may define all of the routes that are handled
| by your application. Just tell Laravel the URIs it should respond
| to using a Closure or controller method. Build something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::any('test1',['uses'=>'BlogController@test1']); //配置路由
代碼就寫到這裏了，現在來看看實現效果，輸入任意網址並點擊生成快照，圖片就會生成到下方。
最後 ，圖片保存到該目錄下
截屏功能就告一段落了，不過還是有很多需要優化的地方。
在實現這個的過程中，真的遇到不少的困難。比如怎麼整合phantomjs與laravel框架，部署服務器上如何解決跨域問題等等。