使用Puppeteer部署Docker服务给网页完美截图（实现中文不乱码、滚动全屏截图等）

需求说明

希望利用程序对网页进行截图，或者将复杂的HTML（带复杂的CSS3语法或者Javascript）转换成网页图片。

另外如果希望把网页生成PDF，可以查看这里：https://blog.terrynow.com/2022/12/13/use-node-puppeteer-docker-generate-pdf-as-service-and-support-chinese/

实现

有考虑过几种实现方式

html2image转换如果你是简单的HTML是没有问题，方式也比较简单，缺点是负责的Html无法正确渲染

PhantomJs，不过据说已经停止维护，且bug有点多，所以咱不展开。

这里要介绍的比较完美的方案是使用https://github.com/puppeteer/puppeteer来实现

Puppeteer介绍

看这个项目的说明，很容易起一个Docker服务，不过这么要说明一点，这个项目的作者是老外，并没有测试网页是中文的情况，而我已经爬过这个坑了，默认根据作者提供的说明启动的Docker服务是不支持中文的，需要额外做一些事情：

• 准备中文字体

我们可以去下载无版本问题的阿里巴巴普惠字体2.0（可放心商用）：https://done.alibabadesign.com/puhuiti2.0，当然你也可以使用自己想要的字体准备好

下载好了以后，解压，放在linux上面，如下（以放在/opt/fonts下为例）：

[root@localhost fonts]# pwd
/opt/fonts
[root@localhost fonts]# ll
total 61048
-rw-r--r-- 1 root root 2035700 Apr 30  2021 AlibabaPuHuiTi-2-105-Heavy.ttf
-rw-r--r-- 1 root root 2022644 Apr 30  2021 AlibabaPuHuiTi-2-115-Black.ttf
-rw-r--r-- 1 root root 8465416 Apr 30  2021 AlibabaPuHuiTi-2-35-Thin.ttf
-rw-r--r-- 1 root root 8476208 Apr 30  2021 AlibabaPuHuiTi-2-45-Light.ttf
-rw-r--r-- 1 root root 8449680 Apr 30  2021 AlibabaPuHuiTi-2-55-Regular.ttf
-rw-r--r-- 1 root root 8347080 Apr 30  2021 AlibabaPuHuiTi-2-65-Medium.ttf
-rw-r--r-- 1 root root 8293500 Apr 30  2021 AlibabaPuHuiTi-2-75-SemiBold.ttf
-rw-r--r-- 1 root root 8289188 Apr 30  2021 AlibabaPuHuiTi-2-85-Bold.ttf
-rw-r--r-- 1 root root 8124312 Apr 30  2021 AlibabaPuHuiTi-2-95-ExtraBold.ttf

• 拉取镜像：

docker pull mingalevme/screenshoter

• 启动镜像（这一步不能使用作者写的，我加了自定义字体文件夹的参数来支持中文）：

docker run -d --shm-size 1G -v /opt/fonts:/usr/share/fonts --restart always -p 9081:8080 --name screenshoter mingalevme/screenshoter

• 使用、查看效果

浏览器输入：

http://localhost:9081/take?full=1&viewport-width=1400&device-scale-factor=4&url=https://www.baidu.com

应该就能查看到网页输出的baidu首页图片

Linux上直接保存为文件的命令：

curl "http://localhost:9081/take?url=https%3A%2F%2Fwww.baidu.com" > /tmp/screenshot.png

Java程序获取图片简单示例：

httpGetImageBytes("http://localhost:9081/take?full=1&viewport-width=1400&device-scale-factor=4&url=https://www.baidu.com");
// 或者在方法里面，把InputStream保存成文件，这个很基础，就不展开了

public static byte[] httpGetImageBytes(String urlString) {
    try {
        URL url = new URL(urlString);
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        connection.setDoInput(true);
        connection.connect();
        InputStream input = connection.getInputStream();
        
        ByteArrayOutputStream buffer = new ByteArrayOutputStream();
        int nRead;
        byte[] data = new byte[4096];
        while ((nRead = input.read(data, 0, data.length)) != -1) {
            buffer.write(data, 0, nRead);
        }
        return buffer.toByteArray();
    } catch (IOException e) {
        // Log exception
        return null;
    }
}

一些参数的说明(翻译了几个常用的)：