使用laravel框架與phantomjs實現截屏功能

時間 2019-11-19

標籤使用 laravel 框架 phantomjs 實現截屏功能欄目 JavaScript 简体版

原文原文鏈接

在網上看到的關於phantomjs實現截屏功能不少都是與node結合在一塊兒使用，並須要輸入命令才能執行。所以我想要實現輸入網址便可截屏並輸出圖片的功能。示例：http://120.77.171.182:8080/laravel&phantomjs/public/ ，能夠在這看看效果。javascript

一：下載並安裝phantomjsphp

二：裝後臺集成環境Appservhtml

三：安裝laravel開發框架java

三：實現代碼及注意事項node

一、phantomjs很好安裝，http://phantomjs.org/官網下載到任意目錄（注意：若是爲了省事，最好安裝到本地環境變量的目錄下以下圖），若是不想下載到此目錄下，可下載完後到計算機屬性的環境變量增長phantomjs放置的路徑mysql

二、appserv集成環境，可到個人百度網盤下載appserv程序連接：http://pan.baidu.com/s/1bpNHJcV 密碼：kdx4 ，手動安裝。固然這個集成環境只是爲了方便部署，裏面集成了appache，簡單方便。若是想使用iis發佈也能夠省略這個步驟。jquery

三、laravel框架下載，連接：http://pan.baidu.com/s/1dFB26Sp 密碼：ki0f 下載解壓後放到剛剛安裝好的appserv文件夾下的www文件夾下。laravel

此時能夠看看有沒有安裝成功。到瀏覽器下輸入http://localhost/laravel/public/這個路徑，由於這個appserv默認是80端口，若是在安裝時沒有修改，那麼就須要確認iis沒有佔用80端口。若是瀏覽器有界面出來，那麼說明安裝成功了。若是沒有出現界面，那麼到控制面板-》管理工具-》服務下看看apache24和mysql57有沒有啓動，沒有就手動啓動。web

此時須要的程序都安裝完了，下面開始寫代碼。ajax

首先到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框架，部署服務器上如何解決跨域問題等等。