在网上看到的关于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框架，部署服务器上如何解决跨域问题等等。

使用laravel框架与phantomjs实现截屏功能的更多相关文章

  1. PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  2. Atitit截屏功能的设计解决方案

    Atitit截屏功能的设计解决方案 自己实现.... 使用快捷键.. 弹出自己的win,,背景是屏幕快照 点击鼠标光标变成十字状态 出现截屏窗口调整截屏窗口位置与大小 释放鼠标,三个btn,,  复制 ...

  3. android4.3 截屏功能的尝试与失败分析

    1.背景 上一篇讲了在源码中捕获到了android手机的截屏函数(同时按下电源键与音量减,详情http://blog.csdn.net/buptgshengod/article/details/199 ...

  4. iOS截屏功能

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

  5. Android自己定义截屏功能，相似QQ截屏

    由于公司业务需求 须要对一个屏幕进行截屏.但自带的截屏功能是远远不够项目的功能需求 ,我们是做一个画板软件 .须要的像QQ那样截屏之后 ,能够看到我们自己定义的工具.有画笔,button等等 .and ...

  6. 【玩转cocos2d-x之三十九】Cocos2d-x 3.0截屏功能集成

    3.0的截屏和2.x的截屏基本上同样.都是利用RenderTexture来处理,在渲染之前调用call函数,然后调用Cocos的场景visit函数对其进行渲染,渲染结束后调用end函数就可以.仅仅是3 ...

  7. [置顶] Android 应用内禁止截屏功能的实现

    截图介绍   Android的调试工具DDMS提供有截屏功能,很多软件也会有截屏功能,在做支付等安全类应用的时候,为了保证用户的资产和系统安全,往往会禁止应用内截屏,禁止之后,在此应用处于前台的情况下 ...

  8. 小胖说事22-----iOS开发技巧之取消键盘响应和截屏功能

    1.UILable内容模糊 在非Retina的iPad mini 的屏幕上,一个UILable的frame的origin值假设是有小数位(如0.5),就会造成显示模糊,所以不妨用整数值的origin. ...

  9. c# wpf 利用截屏键实现截屏功能

    原文:c# wpf 利用截屏键实现截屏功能     最近做一个wpf程序需要截图功能,查找资料费了一些曲折,跟大家分享一下.     先是找到了这样一份代码:     static class Scr ...

随机推荐

  1. [java实现]常见算法之字符串操作

    一.字符串反转 把一个句子中的打次进行反转,比如“how are you” ,变为 “you are how” // 字符串反转 public class StringTest { // 字符反转的方 ...

  2. docker 磁盘清理 相关

    用户在使用 Docker 部署业务一段时间后,可能会发现宿主节点的磁盘容量持续增长,甚至将磁盘空间耗尽进而引发宿主机异常,进而对业务造成影响. 本文先对 Docker 的空间分析与清理进行说明,然后对 ...

  3. 通过源码看原理之 selenium

    # selenium的历史1. selenium1.x:这个时候的selenium,使用的是JavaScript注入技术与浏览器打交道,需要Selenium RC启动一个Server,将操作Web元素 ...

  4. [黑科技]跑的比fread还快的cin挂和cout挂

    CCPC赛后摸鱼搞了个新的奇怪外挂 这里贴上利用sgetn和sputn来实现的读入读出挂,理论上比fread更优 期望在赛中TLE的代码能强行卡过去hhh 利用小规模的Codeforces - 103 ...

  5. CentOS 7 安装RocketMQ遇到的问题汇总

    1.运行broker时提示内存无法分配 解决办法:http://www.bubuko.com/infodetail-2088958.html

  6. Zynq-7000 FreeRTOS(二)中断：PL中断请求

    总结Zynq-7000的PL发送给PS一个中断请求,为FreeRTOS中断做准备. UG585的P225显示了系统的中断框图,如下图所示. 图:ZYNQ器件的中断框图 UG585的P227画出来中断控 ...

  7. Mac 10.12安装图片切换工具ArcSoft Photo+

    说明:Mac自带的图片切换不能连续切换,这款工具和美图看看差不多. 下载: (链接: https://pan.baidu.com/s/1i5rLYzr 密码: 49dp)

  8. Winform控件的问题汇总

    2014-01-19号 用户控件中的子控件(Btn控件),想要暴露到用户控件之外,以供其它其他控件使用的解决方法 1.在用户控件中定义一个委托和这个委托的事件. public delegate voi ...

  9. android Application类的详细介绍（转）

    在代码中经常看到application这个类,一直不知道这个是干什么用的,今天刚好有点时间,所以进行了详细的学习. 一.先对它的整体概念解释: 在android源码中对他的描述是; * Base cl ...

  10. git 学习之撤销和删除

    在实际的工作和学习中我们经常的会对文件进行修改,但是或多或少的就会发现由于某些原因修改是错误的这时候就需要对所做的修改进行撤销,更或者某些时候需要对文件进行删除.本节就会告诉大家如何操作. 撤销操作 ...