在网上看到的关于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. Linux服务器核心参数配置

    使用Linux作为长连接的web服务器时,为了增加服务的容量,以及处理性能,需要修改一些参数. 一.多进程绑定CPU 1.使用taskset命令可以绑定进程到指定CPU,以减少多核CPU环境中,单进程 ...

  2. apache 子域名自动与子域名同名的目录绑定

    假设有域名domain.com,已经泛解析子域名*.domain.com到该主机的ip,web根目录为/var/www/,在访问a.domain.com时,能自动绑定/var/www/a/目录,访问b ...

  3. ZJOI2019 day2 游记

    应该是打的最没有信仰的一次比赛了 然后这个垃圾水平居然还拿了170,真是有毒 我的语文并不好所以还是写流水账吧 day-2 到了余姚,发现附近并没有什么好吃的,于是直接去kfc了 另外潮湿的空气对呼吸 ...

  4. 逆向学习-Windows消息钩取

    钩子 Hook,就是钩子.偷看或截取信息时所用的手段或工具. 消息钩子 常规Windows流: 1.发生键盘输入事件时,WM_KEYDOWN消息被添加到[OS message queue]. 2.OS ...

  5. TP5 隐藏入口文件 index.php

    找到public下的.htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine ...

  6. HLS:OpenCV和RTL代码转换关系

    OpenCV 图像处理是基于存储器帧缓存而构建的, 它总是假设视频帧数据存放在外部 DDR 存储器中. 由于处理器的小容量高速缓存性能的限制, 因此, OpenCV 访问局部图像性能较差. 并且, 从 ...

  7. 关于MatlabGUI清除WorkSpace的用法

    近日在调试Matlba GUI程序时,因为不想退出程序后手动Clear All来清理,又需要在过程中对WorkSpace进行清理,否则会引用之前的结果导致错误,找了很多资料,国内的论坛什么的都说用Cl ...

  8. OpenERP button 的三种类型

    1. workflow: 默认是这种类型,如果你需要创建工作流类型的button使用这个 2. object: 调用function的类型,如果你需要调用py文件中同名的方法,使用该类型. 3.act ...

  9. 3Q大战现高潮，360 推出Android "3Q" IM即时通讯，岁末年初3Q大战惊现高潮

    岁末年初3Q大战惊现高潮,360震撼推出Android "3Q" IM即时通讯       看过了QQ和360斗争的开端高潮,当然现在还不能说这场斗争已经结束,在我看来这次的事件未 ...

  10. Asp.NET MVC 拍卖网站，拆解【1】预览与目录

    本人最近带创业团队基本做完了一个艺术品拍卖的外包项目,分为网站前台(asp.net mvc5),网站管理员管理的后台使用的9900端口(asp.net mvc5),监听拍卖状态的windows服务,为 ...