PHP网页截取快照:PHP截取网站网页保存为一张图片实现

alvin
alvin
alvin
616
文章
58
评论
2020年10月29日09:22:35 评论 8次 3225字
百度快速排名上首页

phantomjs截取网页截图

场景
有一个视频播放地址,需要对该网页进行截图
解决思路:
1.将视频下载到本地,使用ffmpeg进行处理
2.使用phantomjs,phantomjs内置了webkit浏览器引擎,phantomjs可以模拟浏览器打开视频地址,然后进行整个网页的截图。

WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用)

 

选择
第一个方案,ffmpeg只能处理本地视频或者处理RTCP直播流,同时要求的视频直播地址中有部分是直播流,有部分是组件渲染,所以该方案不可行。
因此选择第二个方案。

phantomjs进行网页截图,这里以window平台为例
1.首先,去phantomjs官网下载页面下载phantomjs程序,支持window、mac os、linux、freebsd平台。
2.将下载下来的phantomjs添加系统环境变量里
3.编写js文件capture.js

"use strict";  //严格模式
 
var page = require('webpage').create();
var system = require('system');
page.viewportSize = {
    width : 1024,
    height : 720
};
 
if (system.args.length < 3) {
    console.log('param must greater 2');
    phantom.exit();
} else{
    var url = system.args[1];  //远程视频地址
    var saveFile = system.args[2];  //保存截图的文件路径
    page.open(url, function(status) {
        if (status == 'success'){
            // 通过在JS获取页面的渲染高度
            var rect = page.evaluate(function () {
              return document.getElementsByTagName('html')[0].getBoundingClientRect();
            });
            // 按照实际页面的高度,设定渲染的宽高
            page.clipRect = {
              top:    rect.top,
              left:   rect.left,
              width:  rect.width,
              height: rect.height
            };
            setTimeout(function() {
                var result = page.render(saveFile);
                page.close();
                console.log(result);
                phantom.exit();
            }, 1000);  //延迟截图时间
        }
    })
}

4.在php中进行调用

$url = 'http://xxx';
$savePath = 'c:\test.png';
$jsPath = 'c:\phantomjs.js';
$command = "phantomjs {$jsPath}  {$url}  {$savePath}";
$result = @exec($command );

这样就对网页进行截图,保存截图在指定路径中。

另外:有大神在github上提交了个操作phantomjs的php类库,可以参考使用:

https://github.com/jonnnnyw/php-phantomjshttp://jonnnnyw.github.io/php-phantomjs/4.0/2-installation/

参考自:

http://phantomjs.org/download.html

http://phantomjs.org/api/webpage/method/render.html

代码实例:

phantomjs和slimerjs,两款都是服务器端的js,简单说来,都是封装了浏览器解析引擎,不同是phantomjs封装的 webkti,slimerjs封装的是Gecko(firefox)。 权衡利弊,决定研究下phantomjs,于是就用phantomjs实现了网 站快照生成。phantomjs的项目地址是:http://phantomjs.org/

代码涉及两个部分,一个是设计业务的index.php,另一个是生成快照的js脚本snapshot.js。代码比较简单,仅仅是实现了功能,没有做过多的修饰。代码分别如下所示:

php:

<?php
    if (isset($_GET['url']))
    {
       set_time_limit(0);
 
       $url = trim($_GET['url']);
       $filePath = "./cache/".md5($url).'.png';
 
       if (is_file($filePath))
       {
           exit($filePath);
       }
 
       $command = "phantomjs/bin/phantomjs snapshot.js {$url} {$filePath}";
       exec($command);
 
       exit($filePath);
    }
?>

html

<!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="https://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利用CutyCapt实现网页高清截图 :
网页截图功能,必须安装IE+CutyCapturl:要截图的网页out:图片保存路径path:CutyCapt路径cmd:CutyCapt执行命令比如:http://你php路径.php?url=http://XX.com

 

 

 

 

 

 

继续阅读
  • 我的微信:18682260315
  • 分享网络营销技巧与广大的网络营销爱好者交流网络营销方案、技巧、策划、案例、SEO、网络推广、社会化媒体营销等网络营销知识。
  • weinxin
  • 我的微信小程序
  • 营销的探讨总是没有止境,事件营销作为一种新的营销方式越来越受到营销人的青睐,但事件不常有,企业营销却常在。
  • weinxin
alvin
  • 本文由 发表于 2020年10月29日09:22:35
  • 转载请注明:https://www.sunhui.me/xuexibiji/8486.html - 孙辉博客
    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 hui@36kp.com 举报,一经查实,本站将立刻删除。
京东|洁柔(C&S)抽纸 自然木黄色纸 亲肤3层130抽面巾纸*18包 无香(M号 母婴健康用纸 低白度类本色纸巾) 整箱销售
小迷糊小水库玻尿酸黑面膜21片 (补水保湿清洁控油 提亮肤色面膜贴 男女士学生护肤化妆品套装)
【专业版Pro】微慕WordPress小程序专业版后端插件+小程序前端源码
ECHO主题 nicetheme出品wordpress主题

发表评论