后端服务HTML转图片实现方案

👽个人博客：https://everspring.github.io/
👽公众号：爱历史的IT男

后端（开发语言JAVA、Python等）实现HTML转图片有三大思路，一、通过第三方JAR包实现，二、借助工具的CLI实现。

 

我们项目中前端 图形是Echarts实现，页面中有很多CSS3语法，用的html2java、cssbox、wkhtmltox导出来的图片都有问题。另外用selenium+webdriver的方式也遇到很多问题，在windows上运行一切正常，但到了Linux上就有问题，最终采用的linux上安装chrome，通过chrome的截屏方式解决。

Chrome CLI生成图片

• 1、服务器上安装google chrome，也可以安装chromium(chromium是开源的，在Linux epel也有，推荐使用)

yum install -y google-chrome-stable_current_x86_64-88.0.4324.192.rpm

• 2、安装中文字体

yum -y groupinstall Fonts

• 3、运行Chrome CLI命令

chrome命令参数见：List of Chromium Command Line Switches « Peter Beverloo

页面可以是一个url，也可以是本地静态的html文件。chrome命令很强大，除了 导出图片，还支持pdf等其他文本格式

有了命令行，代码就可以根据调用命令行方式实行，比如java的

Runtime.getRuntime().exec("google --version", null, dir)

chromium-browser --no-sandbox --headless --disable-gpu --screenshot=test.png -run-all-compositor-stages-before-draw --window-size=1280,1400 woniu.html
或者
google-chrome-stable --no-sandbox --headless --disable-gpu --screenshot=test.png -run-all-compositor-stages-before-draw --window-size=1280,1400 woniu.html

Linux Selenium常见问题：

1、error while loading shared libraries: libxcb.so.1

find / -name "*libxcb.so.1*"
yum install libxcb  # 没有找到自己安装
vim /etc/ld.so.conf # 有找到
/usr/lib  # 在最后一行添加动态库文件所在目录
ldconfig  # 刷新缓存

2、Requires: libc.so.6(GLIBC_2.xx) 缺少GLIBC_2.xx问题

wget http://ftp.gnu.org/gnu/glibc/glibc-2.xx.tar.gz
tar xf glibc-2.18.tar.gz
cd glibc-2.18
mkdir build
cd build
../configure -prefix=/root/glibc-2.18 -disable-profile -enable-add-ons -with-headers=/usr/include -with-binutils=/usr/bin
make
make install

3、no acceptable C compiler found in $PATH

$ yum install gcc

4、WebDriverException: unknown error: cannot find Chrome binary 两种解决方法：1）自己指定位置；2）放到chromedriver放到/usr/bin(见ChromeDriver · SeleniumHQ/selenium Wiki · GitHub)

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setBinary(new File("/data/renewal/chromedriver"));

5、DevToolsActivePort file doesn't exist Linux的chrome默认不能用root启动，如果需要指定--no-sandbox参数。但可惜的是我的一直不成功。

chromeOptions.addArguments("--no-sandbox");