zoukankan html css js c++ java

记一次"截图"功能的前期调研过程！

项目需求
功能调研
实现方案
文末

项目需求

最近，项目接到了一个新需求，要求对指定URL进行后端模拟前端请求，对页面进行截图，具体要求如下：

纯后端模拟，不打开前端页面
截全屏，也就是不管页面有多长，都要截取到一张图片上
只要求截取浏览器DOM以内的部分，DOM以外不要截取
保证页面不失真，页面渲染与实际一直
确保图片清晰度
能够支持多并发请求

功能调研

接到项目需求后，我就对Java实现的截图功能进行了一些前期调研，调研过程如下：

AWT

首先想到的是比较简单的Root，它应用简单，完全自动化，Java自带功能，包名java.awt。于是编写上手实验：

查看测试代码

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.event.KeyEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;

public class AWTTest {

    public static void main(String[] args) throws Exception {
        // 此方法仅适用于JdK1.6及以上版本
        Desktop.getDesktop().browse(new URL("http://www.baidu.com/").toURI());
        Robot robot = new Robot();
        robot.delay(10000);
        Dimension d = new Dimension(Toolkit.getDefaultToolkit().getScreenSize());
        int width = (int) d.getWidth();
        int height = (int) d.getHeight();
        // 最大化浏览器
        robot.keyRelease(KeyEvent.VK_F11);
        robot.delay(2000);
        Image image = robot.createScreenCapture(new Rectangle(0, 0, width, height));
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = bi.createGraphics();
        g.drawImage(image, 0, 0, width, height, null);
        // 保存图片
        ImageIO.write(bi, "jpg", new File("/data/test.jpg"));
    }
}

截图效果：

优势：简单易用，不需要任何第三方插件。
缺点：不能同时处理大量数据，技术含量过低，属于应急型技巧。

Swing

与AWT相比，Swing是基于awt的Java程序，包名javax.swing。它不仅提供了AWT的所有功能，还用纯粹的Java代码对AWT的功能进行了大幅度的扩充。它是为解决AWT存在的问题而新开发的图形界面包。

对Swing的测试，我们采用DJNativeSwing-SWT，它是java内嵌浏览器API，需要用到的依赖包有：

<dependency>
    <groupId>com.hynnet</groupId>
    <artifactId>DJNativeSwing</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>com.hynnet</groupId>
    <artifactId>DJNativeSwing-SWT</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>org.eclipse.swt.org.eclipse.swt.win32.win32.x86_64.4.3.swt</groupId>
    <artifactId>org.eclipse.swt.win32.win32.x86_64</artifactId>
    <version>4.3</version>
</dependency>

测试代码：

查看测试代码

import chrriis.dj.nativeswing.swtimpl.NativeComponent;
import chrriis.dj.nativeswing.swtimpl.NativeInterface;
import chrriis.dj.nativeswing.swtimpl.components.JWebBrowser;
import chrriis.dj.nativeswing.swtimpl.components.WebBrowserAdapter;
import chrriis.dj.nativeswing.swtimpl.components.WebBrowserEvent;

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class SwingTest extends JPanel {
    private static final long serialVersionUID = 1L;

    // 行分隔符
    public final static String LS = System.getProperty("line.separator", "
");
    // 文件分割符
    public final static String FS = System.getProperty("file.separator", "\");
    // 以javascript脚本获得网页全屏后大小
    private final static StringBuffer JS_DIMENSION;

    static {
        JS_DIMENSION = new StringBuffer();
        JS_DIMENSION.append("var width = 0;").append(LS);
        JS_DIMENSION.append("var height = 0;").append(LS);
        JS_DIMENSION.append("if(document.documentElement) {").append(LS);
        JS_DIMENSION.append("  width = Math.max(width, document.documentElement.scrollWidth);").append(LS);
        JS_DIMENSION.append("  height = Math.max(height, document.documentElement.scrollHeight);").append(LS);
        JS_DIMENSION.append("}").append(LS);
        JS_DIMENSION.append("if(self.innerWidth) {").append(LS);
        JS_DIMENSION.append("  width = Math.max(width, self.innerWidth);").append(LS);
        JS_DIMENSION.append("  height = Math.max(height, self.innerHeight);").append(LS);
        JS_DIMENSION.append("}").append(LS);
        JS_DIMENSION.append("if(document.body.scrollWidth) {").append(LS);
        JS_DIMENSION.append("  width = Math.max(width, document.body.scrollWidth);").append(LS);
        JS_DIMENSION.append("  height = Math.max(height, document.body.scrollHeight);").append(LS);
        JS_DIMENSION.append("}").append(LS);
        JS_DIMENSION.append("return width + ':' + height;");
    }

    public SwingTest(final String url, final String fileName) {
        super(new BorderLayout());
        JPanel webBrowserPanel = new JPanel(new BorderLayout());
        final JWebBrowser webBrowser = new JWebBrowser(null);
        webBrowser.setBarsVisible(false);
        webBrowser.navigate(url);
        webBrowserPanel.add(webBrowser, BorderLayout.CENTER);
        add(webBrowserPanel, BorderLayout.CENTER);
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER, 4, 4));
        webBrowser.addWebBrowserListener(new WebBrowserAdapter() {
            @Override
            public void loadingProgressChanged(WebBrowserEvent e) {
                // 当加载完毕时
                if (e.getWebBrowser().getLoadingProgress() == 100) {
                    String result = (String) webBrowser.executeJavascriptWithResult(JS_DIMENSION.toString());
                    int index = result == null ? -1 : result.indexOf(":");
                    NativeComponent nativeComponent = webBrowser.getNativeComponent();
                    Dimension originalSize = nativeComponent.getSize();
                    Dimension imageSize = new Dimension(Integer.parseInt(result.substring(0, index)), Integer.parseInt(result.substring(index + 1)));
                    imageSize.width = Math.max(originalSize.width, imageSize.width + 50);
                    imageSize.height = Math.max(originalSize.height, imageSize.height + 50);
                    nativeComponent.setSize(imageSize);
                    BufferedImage image = new BufferedImage(imageSize.width, imageSize.height, BufferedImage.TYPE_INT_RGB);
                    nativeComponent.paintComponent(image);
                    nativeComponent.setSize(originalSize);
                    try {
                        // 输出图像
                        ImageIO.write(image, "PNG", new File(fileName));
                    } catch (IOException ex) {
                        ex.printStackTrace();
                    }
                    // 退出操作
                    System.exit(0);
                }
            }
        });
        add(panel, BorderLayout.SOUTH);
    }

    public static void main(String[] args) {
        NativeInterface.open();
        SwingUtilities.invokeLater(() -> {
            // SWT组件转Swing组件，不初始化父窗体将无法启动webBrowser
            JFrame frame = new JFrame("以DJ组件保存指定网页截图");

            // 实际项目中传入URL参数，根据不同参数截取不同网页快照，保存地址也可以在构造器中多设置一个参数，保存到指定目录
            frame.getContentPane().add(new SwingTest("https://www.baidu.com/", "/data/test.png"), BorderLayout.CENTER);
            frame.setSize(1024, 1024);

            // 仅初始化，但不显示
            frame.invalidate();
            frame.pack();
            frame.setVisible(false);
        });
        NativeInterface.runEventPump();
    }
}

截图效果：

Swing控件是改善为了AWT控件而发展出来的轻量级GUI控件，采用的是Composite设计模式，然而，由于没有清楚的分隔组件（Component）和容器（Container）的边界，就造成了Swing的几乎每个单独的组件都是一个容器，能够添加其他容器或者组件，其功能非常强大，但也存在以下一些的问题：

与直觉不太一致：Swing的GUI上的各种组件如果添加的面板过多的话，就造成各个组件的层次很深，处理类似focus管理这样的问题就很麻烦，坐标的转换也很复杂，由于父子关系过多，您不看代码只看GUI，凭直觉难以区分组件的父子关系。
布局上的困难：使用Swing开发界面的程序员会发现，即使Swing提供了这么多布局管理器，然而您想通过这些布局管理器做出很专业的界面却非常难，因为布局管理器非常依赖父容器和子组件的各种状态，尽管Swing最新的版本提供了类似组件和容器间隔的方法，然而还没有被大部分布局管理器采用，其实并不是布局管理器不够强大的问题，事实上，很多专业的界面需要从组件级别做出良好的定义，另外，不少Swing组件会根据容器的大小进行绘制，这也造成了很多不确定性，很多人喜欢使用NullLayout，可能就是这个原因，客户需要的是一个稳定的，可预知的界面，如果使用了布局管理器，会发现界面在不同的系统下展示的不同
使用上的困扰：Swing组件本身由于不能分清是组件还是容器，很多容器方法比如setEnabled就没有效果，需要写代码遍历所有子组件，调用所有的子组件相同的方法，而类似设置透明的方法也有这个问题，如果设置某个容器透明，也需要设置所有的子组件的透明属性，组件和容器的很多方法没有很好的定义，这对了解Swing结构的人不是问题，但是对于熟悉别的ＧＵＩ类库的人就产生了很大的困惑，因为不少容器上的方法调用后是没有效果的。

总得来说，对Composite设计模式应该慎用，如果一定要用，一定要良好的定义组件（Component）和容器（Container）的边界，避免很多功能陷入没有意义的父子遍历例程，增加了复杂性。

Html2Image

Html2Image是一个将html转成图片的工具，它在html转图片的领域使用率是不低的。引入依赖：

<dependency>
    <groupId>gui.ava</groupId>
    <artifactId>html2image</artifactId>
    <version>0.9</version>
</dependency>

测试代码：

查看测试代码

import gui.ava.html.image.generator.HtmlImageGenerator;

public class Html2Image {

    public static void main(String[] arg) throws Exception {
        String html = "<table width='654' cellpadding='0' cellspacing='0' bordercolor='#FFFFFF'><tr><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td></tr><tr><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td></tr></table>";
        HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
        imageGenerator.loadHtml(html);
        Thread.sleep(5000);
        imageGenerator.saveAsImage("/data/test.png");
        Thread.sleep(5000);
    }
}

测试代码比较简单，手绘了一个Table，放入两行图片，看一下效果：

所以，Html2Image的缺点也很明显：

当你的html页面引入外部的CSS文件以及JS文件，生成的图片是无法带有这些动态效果的。也就是说，它不支持复杂的动态特性，只能支持写在html代码里的css效果。
当html代码里带有图片时，生成的程序必须有一定的等待时间，否则生成的图片会有空白，所以需要设法在代码生成图片前让程序等待一会，比如Thread.sleep(8000)。
调试不易，很容易出现图不清楚、有边框、字体被洗白等等情况。
...

PhantomJS

PhantomJS是一个可编程的无头浏览器。适用于页面自动化，网页监控，网络爬虫等：

页面自动化测试：希望自动的登陆网站并做一些操作然后检查结果是否正常。
网页监控：希望定期打开页面，检查网站是否能正常加载，加载结果是否符合预期。加载速度如何等。
网络爬虫：获取页面中使用js来下载和渲染信息，或者是获取链接处使用js来跳转后的真实地址。

PhantomJS官网下载地址：http://phantomjs.org/，下载后可以直接解压使用！

测试代码：

查看测试代码

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;

import java.io.File;
import java.io.IOException;

/**
 * Title 网页转图片处理类
 *
 * @author Ason(18078490)
 * @date 2020-08-03
 */
@Slf4j
public class PhantomTools {

    /**
     * 可执行文件phantomjs.exe路径
     */
    private final String phantomjsPath;
    /**
     * 快照图生成JS路径
     */
    private final String rasterizePath;
    /**
     * 截图间隔时间
     * 考虑报表渲染最大耗时，设置默认请求时间为90s
     */
    private String timeout = String.valueOf(90 * 1000);

    /**
     * 构造参数
     * 获取phantomjs路径
     */
    public PhantomTools() {
        String bootPath = new File(this.getClass().getResource("/").getPath()).getPath();
        phantomjsPath = String.join(File.separator, bootPath, "tool", "phantomjs", "phantomjs-2.1.1-windows", "bin", "phantomjs");
        rasterizePath = String.join(File.separator, bootPath, "tool", "phantomjs", "phantomjs-2.1.1-windows", "examples", "rasterize.js");
        String externalIntervalTime = "2000";
        if (StringUtils.isNotBlank(externalIntervalTime)) {
            timeout = externalIntervalTime;
        }
    }

    /**
     * 根据URL生成指定fileName的字节数组
     *
     * @param fileName 图片名称
     * @param url      请求URL
     * @param size     指定图片尺寸，例如：1000px*800px
     */
    public void screenshot(String fileName, String url, String size) {
        // 替换URL中特殊字符
        String parsedUrl = StringUtils.replace(url, "&", ""&"");
        try {
            // 执行快照命令
            String command = String.join(StringUtils.SPACE, phantomjsPath, rasterizePath, parsedUrl, fileName, timeout, size);
            log.info("[执行命令：{}]", command);
            // 执行命令操作
            Process process = Runtime.getRuntime().exec(command);
            // 一直挂起，直到子进程执行结束，返回值0表示正常退出
            if (process.waitFor() != 0 || process.exitValue() != 1) {
                log.error("[执行本地Command命令失败]");
                return;
            }
            // 返回图片
            FileUtils.getFile(fileName);
        } catch (IOException | InterruptedException e) {
            log.error("[图片生成失败]", e);
        }
    }

    /**
     * 测试方法
     *
     * @param arg 参数
     * @throws IOException 异常
     */
    public static void main(String[] arg) throws IOException {
        String url = "http://www.baidu.com";
        PhantomTools phantomTools = new PhantomTools();
        phantomTools.screenshot("/data/test.png", url, "1200px");
    }
}

截图效果：

PhantomJS作为一款强大的命令行工具，可以胜任多种自动化测试、监控等工作，但很可惜，随着Google在Chrome 59版本放出了headless模式，Ariya Hidayat决定放弃对Phantom.js的维护，这也标示着Phantom.js 统治fully functional headless browser的时代将被chrome-headless代替了。

PhantomJS缺点：

将近2k的issue，仍然需要人去修复。
Javascript天生单线程的弱点，需要用异步方式来模拟多线程，随之而来的callback地狱，对于新手而言非常痛苦，不过随着es6的广泛应用，我们可以用promise来解决多重嵌套回调函数的问题。
虽然webdriver支持htmlunit与phantomjs，但由于没有任何界面，当我们需要进行调试或复现问题时，就非常麻烦。

关于PhantomJS的具体使用，可以参考：Phantomjs实现后端将URL转换为图片

Headless Chrome

Headless Browser意思是没有页面的浏览器，多用于测试web、截图、图像对比、测试前端代码、爬虫（虽然很慢)、监控网站性能等。其优点如下：

对于UI自动化测试，少了真实浏览器加载css，js以及渲染页面的工作。无头测试要比真实浏览器快的多。
可以在无界面的服务器或CI上运行测试，减少了外界的干扰，使自动化测试更稳定。
在一台机器上可以模拟运行多个无头浏览器，方便进行并发测试。

PhantomJS曾经就是一款优秀的Headless浏览器，但由于其多项缺点，在Headless Browser领域正在逐渐被chrome-headless取替。

Headless Chrome是Chrome浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有Chrome支持的特性，在命令行中运行你的脚本。相比于其他浏览器，Headless Chrome能够更加便捷的运行web自动化测试、编写爬虫、截取图等功能。它的出现就是来代替PhantomJS的。

Headless Chrome优点：

比phantomjs有更快更好的性能。
Headless Chrome要比现phantomjs更加快速的完成任务，且占用内存更少。
有谷歌平台维护，不会出现2k的issue情况。
支持ECMAScript 2017 (ES8)，我们也可以使用最新的js语法来编写的脚本，例如async，await等。
完全真实的浏览器操作，chrome headless支持所有chrome特性。
调试便利。我们只需要在命令行中加入–remote-debugging-port=9222，再打开浏览器输入ip:9222就能进入调试界面。

我们采用selenium + headless chrome来做个代码测试：

查看测试代码

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import java.io.File;
import java.util.concurrent.TimeUnit;

/**
 * Title 截图工具
 *
 * @author Ason(18078490)
 * @date 2020-09-03
 */
@Slf4j
public class Test {

    static {
        System.setProperty("webdriver.chrome.driver", "/tigbs-assist/chromedriver_win32/chromedriver.exe");
    }

    public static void main(String[] arg) throws Exception {
        // 配置Chrome参数
        ChromeOptions options = new ChromeOptions();
        options.setBinary("/chrome-win/chrome.exe");
        options.addArguments("--headless");
        options.addArguments("--disable-gpu");
        options.addArguments("--no-sandbox");
        options.addArguments("--disable-dev-shm-usage");
        options.addArguments("--hide-scrollbars");
        WebDriver driver = null;
        try {
            driver = new ChromeDriver(options);
            driver.manage().timeouts().implicitlyWait(5, TimeUnit.MINUTES).setScriptTimeout(5, TimeUnit.MINUTES).pageLoadTimeout(5, TimeUnit.MINUTES);
            // 打开网页
            driver.get("http://www.baidu.com/");
            Thread.sleep(5000);
            // 图片写入到test.png
            File file = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
            FileUtils.copyFile(file, new File("/data/test.png"));
        } finally {
            // 关闭浏览器驱动
            if (driver != null) {
                driver.quit();
            }
        }
    }
}

Chrome浏览器与驱动需要相对应，对应关系可以查找：ChromeDriver与Chrome版本对应参照表及ChromeDriver下载链接
Chrome浏览器下载地址：Chrome Download

实现方案

针对本期需求功能点做对比，以上几种方案中，只有Chrome Headless模式可以满足要求，既能保证截图功能的实现，又适合以后项目的扩展！

针对Chrome Headless的选用方案，我们采用Selenium Server服务，服务端基于Selenium的Grid组件来搭建截图功能。

Selenium Server目前采用2.42版本，图片服务器为5台Windows系统虚机，项目架构图如下：

项目结构有5台Node节点，1台Hub，Hub与其中一台Node共享虚机。启动模式采用standalone模式，启动文件：selenium-server-standalone-2.42.0.jar。

Node节点安装的Web服务均采用Chrome浏览器实现，浏览器版本71.0.3557.0（开发者内部版本）（64 位），浏览器驱动版本2.46。

Hub启动命令：java -jar selenium-server-standalone-2.42.0.jar -role hub -maxSession 10 -port 4444
Node启动命令：java -Dwebdriver.chrome.driver="/chromedriver_win32/chromedriver.exe" -Dbinary="/chrome-win/chrome.exe" -jar selenium-server-standalone-2.42.0.jar -role node -hub "http://ip(Hub的IP地址):4444/grid/register" -port 5555 -browser "browserName=chrome,version=71,platform=WINDOWS,maxInstances=10"

通过以上配置，完全可以满足本次项目开发需求，实现了完整的功能特点！

文末

本文采用的Selenium + Chrome Headless方式是浏览器操作的最佳方案，它完全兼容Chrome浏览器所有功能特点，是今后涉及浏览器开发工作中的必备手段！

关于Selenium想了解的同学，可以参考官方文档，这里不做具体介绍！

项目中尽量使用了案例代码实测，仅供参考！有Bug之处，也欢迎留言指正！

查看全文

相关阅读:
一起谈.NET技术，ASP.NET的Session 详解狼人:
一起谈.NET技术，asp.net控件开发基础(22) 狼人:
一起谈.NET技术，asp.net控件开发基础(18) 狼人:
一起谈.NET技术，asp.net控件开发基础(13) 狼人:
一起谈.NET技术，基于TFS2010的代码审查环境部署狼人:
一起谈.NET技术，asp.net控件开发基础(23) 狼人:
Flex中计算某个月有多少天
 showModelDialog的使用(一)
HDU2309：ICPC Score Totalizer Software
Windows XP下vs2010中配置OpenCV2.4.3

原文地址：https://www.cnblogs.com/ason-wxs/p/13717875.html