基于linnux+phantomjs实现生成图片格式的网页快照
发布:smiling 来源: PHP粉丝网 添加日期:2021-05-22 15:38:23 浏览: 评论:0
在代码区看到一个生成站点快照的代码,看了半天才发现,作者仅仅贴出来业务代码,最核心的生成快照图片的代码反而没有给出来。 以前记得google搜索提供站点缩略图,那时候觉得好神奇,但是没有花时间去做深入的调研。昨天又遇到了,那就顺便调研下吧。
安装扩展:
(1)下面是我在linux上的安装过程,如果没有安装git请先yum install git
安装casperjs,代码如下:
- cd /
- git clone git://github.com/n1k0/casperjs.git
- cd casperjs
- ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs //可以忽略 实际执行中php是执行 /casperjs/bin/casperjs
(2)安装phantomjs,下载地址:http://phantomjs.org/download.html
下载后操作很简单,直接把解压好的\bin\phantomjs移动到\usr\local\bin\phantomjs就可以了。\
测试phantomjs --version 有结果不报错,说明安装OK
(3)安装字体
1. 首先获得一套“微软雅黑”字体库(Google一下一大把),包含两个文件msyh.ttf(普通)、msyhbd.ttf(加粗);
2. 在/usr/share/fonts目录下建立一个子目录,例如win,命令如下:
# mkdir /usr/share/fonts/win
3. 将msyh.ttf和msyhbd.ttf复制到该目录下,例如这两个文件放在/root/Desktop下,使用命令:
# cd /root/Desktop
# cp msyh.ttf msyhbd.ttf /usr/share/fonts/win/
4. 建立字体索引信息,更新字体缓存:
- # cd /usr/share/fonts/win
- # mkfontscale (如果提示 mkfontscale: command not found,需自行安装 # yum install mkfontscale )
- # mkfontdir
- # fc-cache (如果提示 fc-cache: command not found,则需要安装# yum install fontconfig )
至此,字体已经安装完毕!
- <?php
- if (isset($_GET['url']))
- {
- set_time_limit(0);
- $url = trim($_GET['url']);
- $filePath = md5($url).'.png';
- if (is_file($filePath))
- {
- exit($filePath);
- }
- //如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html
- putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
- $command = "phantomjs phantomjs.js {$url} {$filePath}";
- @exec($command);
- exit($filePath);
- }
- ?>
- <!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: '?',
- 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>
- <?php
- if (isset($_GET['url']))
- {
- set_time_limit(0);
- $url = trim($_GET['url']);
- $filePath = md5($url).'.png';
- if (is_file($filePath))
- {
- exit($filePath);
- }
- //如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html
- putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
- $command = "phantomjs phantomjs.js {$url} {$filePath}";
- @exec($command);
- exit($filePath);
- }
- ?>
- <!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: '?',
- 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>
- var page = require('webpage').create();
- var args = require('system').args;
- var url = args[1];
- var filename = args[2];
- page.open(url, function () {
- page.render(filename);
- phantom.exit();
- });
Tags: linnux+phantomjs
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)