基于phantomJs的Java后台网页截图技术

最新推荐文章于 2024-07-26 03:13:37 发布

ontology-fhcj

最新推荐文章于 2024-07-26 03:13:37 发布

阅读量1.3w

点赞数 13

分类专栏：技术类文章标签： phantomjs javascript java web前端

本文链接：https://blog.csdn.net/ontologyFhcj/article/details/55098590

版权

本文介绍了如何在Java后台使用PhantomJs进行网页截图。通过下载PhantomJs，编写JavaScript脚本和Java代码，实现了服务器端的网页截图功能，并将其封装到实际项目中。

摘要由CSDN通过智能技术生成

基于PhantomJs的Java后台网页截图技术

公司之前做的某一手机应用，里面有一需求是一键出图（有一统计信息类的网页，需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上），手机上便可以查看该图片了。刚开始拿到需求发现比较棘手，参考了很多文章解决方案大楷有以下几种：

Robot
利用JNI，调用第三方C/C++组件
DJNativeSwing组件

参考文章：http://blog.csdn.net/cping1982/article/details/5353049

经过试验Robot失败，DJNativeSwing组件截图成功，但由于网页css的复杂性导致图片失真严重而达不到预期效果。然后继续寻找解决方案，PlantomJs是最完美的解决方案。

PlantomJs是一个基于javascript的webkit内核无头浏览器也就是没有显示界面的浏览器，你可以在基于 webkit 浏览器做的事情，它都能做到。PlantomJs提供了如 CSS 选择器、DOM操作、JSON、HTML5、Canvas、SVG 等。PhantomJS 的用处很广泛，如网络监控、网页截屏、页面访问自动化、无需浏览器的 Web 测试等，而博主只需要一很小的功能就是网页截屏。

PhantomJS官方地址：http://phantomjs.org/。
PhantomJS官方API：http://phantomjs.org/api/。
PhantomJS官方示例：http://phantomjs.org/examples/。
PhantomJS GitHub：https://github.com/ariya/phantomjs/。

实现思路

手机发送请求到服务器，服务器截取网页为图片保存到硬盘，生成可访问的URL返回手机上，示意图如下：

下载

直接进入官网下载http://phantomjs.org/download.html，目前官方支持三种操作系统，包括windows\Mac OS\Linux，
而博主服务器基于windows，所以下载https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-windows.zip，解压后得到以下目录：

编写截图JavaScript

参考文章http://www.cnblogs.com/jasondan/p/4108263.html

负责截图脚本screenshot.js如下：

/**
 * phantomJs 脚本
 */
var page = require('webpage').create(), system = require('system'), address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    //定义宽高
    page.viewportSize = {
        width : 800,
        height : 600
    };
    page.open(address, function(status) {
   
        var bb = page.evaluate(function() {
   
            return document.getElementsByTagName('html')[0].getBoundingClientRect();
        });
        page.clipRect = {
            top : bb.top,
            left : bb.left,
            width : bb.width,
            height : bb.height
        };
        window.setTimeout(function() {
   
            page.render(output);
            page.close();
            console.log('渲染成功...');
        }, 1000);
    });
}

address = system.args[1];//传入的URL地址
output = system.args[2];//保存的图片路径

以上是screenshot.js 的脚本内容

编写服务器Java代码

    public static void main(String[] args) throws IOException {
        String BLANK = "  ";
        Process process = Runtime.getRuntime().exec(
                "D:/develop_software/phantomjs/bin/phantomjs.exe"