PHP+linux+Phantomjs实现截取FineBI需要登陆的网页图片

曾经终败给现在 2021-09-15 01:12 260阅读 0赞

> Phantomjs可以对网页进行截图，功能比较强大。这儿就说一个比较特殊的截图，要是需要截图的页面是需要登录后才加载的内容呢，请看后面的内容。

## 1.下载phantomjs ##

> 下载地址：官网是  http://phantomjs.org/  下载后，将phamtomjs 放在windows或者linux上面，直接解压，然后进入phantomjs文件夹中的bin目录中。phantomjs\\bin目录下面有个phantomjs.exe ，可以直接点击运行它执行JS，也可以将它加入到系统变量，使它可以全局执行，方便一些。
> 
> 我的项目中是放在linux上的，同样的，将phantomjs下载后上传到linux服务器，也可以直接在Linux上面通过wget进行下载。
> 
> 解压之后。进入phantomjs的bin目录下面，输入phantomjs -v ：

> ![70][]

> 将phantomjs的bin目录下的phantomjs加入到系统变量，方便后续随时使用。
> 
> 显示版本号，就可以开始进行截图工作了。

## 2.编写截图JS代码  ##

cuptImage.js

// 实现BI截图的JS方法
      // 调用phantomjs 方法
      var page = require('webpage').create(),
          system = require('system'),
          address,output,size;

if (system.args.length < 3 || system.args.length > 5){
          console.log('Usage:phantomjs.js URL filename');
          phantom.exit(1);
      }else{
            address = system.args[1];
            output = system.args[2];
    	size = parseInt(system.args[3]);
            page.viewportSize = {width:1024,height:size};
            page.open(address,function(status){
              // 通过在页面上执行脚本获取页面的渲染高度
              var bodys = page.evaluate(function(){ 
              return document.getElementsByTagName('html')[0].getBoundingClientRect(); 
            });
            // 按照实际页面的高度，设定渲染的宽高
            page.clipRect = {
              top:bodys.top,
              left:bodys.left,
              width:bodys.width,
              height:bodys.height
            };
            // 预留一定的渲染时间
            window.setTimeout(function(){
              page.render(output);
              page.close();
              console.log('Cupt Success!');
              phantom.exit();
            },5000);
          });
      }

## 3.单点登录的html页面 ##

fibi.html

<html>   
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
        <script type="text/javascript" src="http://demo.finebi.com/WebReport/ReportServer?op=emb&resource=finereport.js">  </script>
        <script type="text/javascript">
        function cjkEncode(text) {       
        if (text == null) {       
            return "";       
        }       
        var newText = "";       
        for (var i = 0; i < text.length; i++) {       
            var code = text.charCodeAt (i);        
            if (code >= 128 || code == 91 || code == 93) {   
                newText += "[" + code.toString(16) + "]";       
            } else {       
                newText += text.charAt(i);       
            }       
        }       
        return newText;       
    } 
    function loginFR() {  
         var username ="demo";//cjkEncode(document.getElementById("username").value);     
         var password ="demo";//cjkEncode(document.getElementById("password").value); 
    jQuery.ajax({  
         url:"http://demo.finebi.com/webroot/decision/login?origin=7b88b0e9-198f-426c-863e-92e2b3d3698a",//单点登录的报表服务器  
         dataType:"jsonp",//跨域采用jsonp方式  
         data:{"fr_username":username,"fr_password":password},  
         jsonp:"callback",  
         timeout:10000,//超时时间（单位：毫秒）  
         success:function(data) {  
                if (data.status === "success") {  
                alert("success");
                document.write("<iframe "+"src="+'"'+"http://demo.finebi.com/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=47&createBy=-999&hideTop=true"+'"'+" width="+"100%"+" height="+"100%"+"/>");
                //setTimeout("alert(1)",1000);
                document.write("<iframe "+"src="+'"'+"http://www.baidu.com/"+'"'+" width="+"100%"+" height="+"50%"+"/>");
                //window.location.href="http://demo.finebi.com/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=47&createBy=-999&hideTop=true";
                      //登录成功     
                } else if (data.status === "fail"){  
                    alert("用户名密码错误！！！");           //登录失败（用户名或密码错误）  
                }  
         },  
         error:function(){   
               alert("超时或服务器其他错误！！！");// 登录失败（超时或服务器其他错误）  
         }  
    });
    }
    </script>
    <body onload="loginFR();">  
    </body>
    </html>

fibi.html主要实现的是自动登录。页面展示如下：

![70 1][]

## 4.开始截图 ##

截图的语法是 ：phantomjs  截图js文件的地址  要截图的url  生成的图片名.png  页面宽度

例如我项目中的: phantomjs cuptImage.js        fibi.html       success.png          1080

phantomjs cuptImage.js fibi.html fibi.png 1080

![70 2][]

然后查看截图成功之后的图片：

结果如下：

![70 3][]

宽度可以自己指定。大家可以参考一下，实际项目中，比如我在PHP调用Liunx执行phantomjs进行截图的时候，要注意一点，就是phantomjs一定要使用绝对路径来执行，不然会报错。另外一点就是单点登录的延迟问题，可以对cuptImage.js中的等待时间进行修改。

在PHP中执行：exec("**/****usr/cuptimage/phantomjs/bin/phantomjs  $cuptimagejsurl $url $png $width**")

[70]: /images/20210809/3efc8bae5d7543a7a4d1d7b4e29752f4.png
[70 1]: /images/20210809/414c8ffc022340f58a62267eb7a51a34.png
[70 2]: /images/20210809/7300828a774e4b33bec8c41e2d243d75.png
[70 3]: /images/20210809/a064005ea7014a5b8b08df9eef80244d.png