基于PhantomJS的网站截图服务API设计与开发

作者: OhVeris | 来源:发表于2020-03-15 21:28 被阅读0次

原文链接：http://www.mostclan.com/post-329.html
作者：Veris
Blog：最族 [ http://www.mostclan.com ]

为公司某业务实现“服务端对网站截图”功能，搜罗了很多技术最终采用了PhantomJS无头浏览器技术。

什么是PhantomJS？

PhantomJS是一个基于webkit的javaScript API。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行javaScript代码。任何你可以基于在webkit浏览器做的事情，它都能做到。它不仅是个隐性的浏览器，提供了诸如css选择器、支持wen标准、DOM操作、json、HTML5等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等。phantomJS的用处可谓非常广泛诸如网络监测、网页截屏、无需浏览器的wen测试、页面访问自动化等。

网上流传PhantomJS已暂停维护，转而投入selenium的开发，所以用户更倾向于目前流行的浏览器自动化测试框架“selenium”，这里作者选择使用PhantomJS来做服务，因为部署比较简单，且完全能满足业务需求。

1、实现截图

var webpage = require('webpage');
var page = webpage.create();
page.settings.javascriptEnabled = false; // 禁用JavaScript代码
page.open("http://www.mostclan.com", function (status) {
    if (status === "success") {
        console.log(page.title);
        console.log("截图成功");
        page.render("screenshot.png");
    } else {
        console.log("截图失败");
    }
});

将文件保存为webpage.js，使用如下命令执行程序

phantomjs webpage.js

（这里需要安装PhantomJS，详细步骤不做阐述，请自行百度）

如果返回截图成功，那么恭喜你截图服务已经写好了，就是这么简单，你可以查看目录下的“screenshot.png”有一张我的博客截图^_。

webpage 是 PhantomJS 的核心模块，上面的代码中，open() 方法有两个参数。

第一个参数是请求地址（不要忘记协议头），默认使用 GET 方式
第二个参数是回调函数，回调参数status表示网页状态主要有success和fail两种。

值的注意的是，只要请求有返回结果，status参数就是success，即使服务器返回的状态是404或500错误。

如果需要使用POST请求或其他请求要求，可以使用如下方式：

var webpage = require('webpage');
var page = webpage.create();
var settings = {
    operation: "POST",
    encoding: "utf8",
    headers: {
        "Content-Type": "application/json"
    },
    data: JSON.stringify({
        params: "data",
        array: ["1", "2"]
    })
};
page.settings.javascriptEnabled = false; // 禁用JavaScript代码
page.open("http://www.mostclan.com", settings, function (status) {
    if (status === "success") {
        console.log(page.title);
        console.log("截图成功");
        page.render("screenshot.png");
    } else {
        console.log("截图失败");
    }
});

这里第二个参数变成一个对象类型的配置信息，可以配置请求方式、编码、头信息、数据等。

另外代码中有一句 page.settings.javascriptEnabled = false;，如果不需要页面渲染时执行JS代码，可以禁用此选项来加速截图，因为一般网站都是由HTML+CSS来渲染页面的，其他基本上对渲染结果影响不大。

page.render()可以将打开的网页截图并保存成本地图片，可以将指定的图片文件名作为参数传入，render 方法可以根据文件名的后缀将图片保存成对应的格式。

目前支持PNG、GIF、JPEG、PDF四种图片格式。

page.render('temp.jpeg', {format: 'jpeg', quality: '100'});

其他参数详细细节可参考官方文档

2、搭建WebServer
这里用到一个基于mongoose的WebServer模块，因为该模块目前仅允许10个并发请求，所以在大流量并发环境下请选择其他Web服务模块，或并发量不高的话可以做个多服务的负载集群，后文会介绍操作方法。

var webserver = require('webserver').create();
webserver.listen(8080, function (request, response) {
    response.statusCode = 200;
    response.write('<html><h1>Hello World!</h1></html>');
    response.close();
});

将文件保存为webserver.js，使用如下命令执行程序

phantomjs webserver.js

然后访问 http://127.0.0.1:8080 便可看到刚刚搭建的Web服务

Web服务例子

listen方法的第一个参数可以为一个端口号，也可以是ip:port这种形式
第二个参数是回调方法，主要有两个回调参数：request和response。

request参数的几个常用属性：

method，请求方式（get、post等）
url，请求的URL，包含请求的get参数
post，POST请求数据
postRaw，POST数据原始信息，就是application/x-www-form-urlencoded编码提交的数据
headers，请求头信息

response参数的几个常用方法：

statusCode(code)，设置HTTP状态码
write(data)，向response中写入数据
close()，关闭HTTP连接（这个比较重要，如果未关闭会一直占用连接，后面会讲这个坑）

3、API服务网关设计

Web服务搭建好后，我们就可以做服务网关了，这样通过调用网关便能获取网站截图。
首先规定交互协议和返回数据格式，我们协定如下：

请求参数：（POST请求服务网关）

url: 需要截图的网站地址
out_order_id: 外部订单ID，如果是异步回调通知形式，可以加这个参数来识别图片
method: 请求方式
headers: 请求头
data: 请求参数（json格式）
- screen_width: 截图屏幕宽度（如果有要求的话）
- screen_height: 截图屏幕高度（如果有要求的话）
sign: 签名（这里如果要暴露服务给外网使用，又想限定用户的话可以设置签名参数来授权，详细设计方法不再阐述）

响应参数：