How to use PhantomJs to complete the html image output function in Java

I. Background

How to generate a picture in the mini program and share it with friends? At present, there seems to be no good solution for the front end, so it can only be supported by the back end. So how can it be played?

Generating pictures is relatively simple

Simple scenes can be supported directly using jdk. Generally speaking, there is not too complicated logic

I have written a picture synthesis before Logic, implemented using awt: Image synthesis

General and complex templates

Simple ones can be directly supported, but for more complex ones, it is undoubtedly more disgusting to let the backend support it, and it is also available on github I searched some open source libraries for rendering HTML, but I don’t know if it’s because of the wrong posture or something, but I didn’t get very satisfactory results

Now, how can we support complex templates?

This is the guide of this article, using phantomjs to implement html rendering, supporting the generation of pdf, image generation, and dom parsing. Next, we will demonstrate how to combine phantomjs to build a service that renders web pages into images

II. Prerequisite preparation

1. Install phantom.js

# 1. 下载
## mac 系统
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## linux 系统
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## windows 系统
## 就不要玩了，没啥意思
# 2. 解压
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# 如果解压报错，则安装下面的
# yum -y install bzip2
# 3. 安装
## 简单点，移动到bin目录下
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. 验证是否ok
phantomjs --version
# 输出版本号，则表示ok

2. Java dependency configuration

maven configuration to add dependencies

<!--phantomjs -->
<dependency>
  <groupid>org.seleniumhq.selenium</groupid>
  <artifactid>selenium-java</artifactid>
  <version>2.53.1</version>
</dependency>
<dependency>
  <groupid>com.github.detro</groupid>
  <artifactid>ghostdriver</artifactid>
  <version>2.1.0</version>
</dependency>
<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

Start

Mainly call phantomjs to realize the logic of html rendering pictures as follows

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //设置必要参数
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //ssl证书支持
    dcaps.setCapability("acceptSslCerts", true);
    //截屏支持
    dcaps.setCapability("takesScreenshot", true);
    //css搜索支持
    dcaps.setCapability("cssSelectorsEnabled", true);
    //js支持
    dcaps.setJavascriptEnabled(true);
    //驱动支持（第二参数表明的是你的phantomjs引擎所在的路径，which/whereis phantomjs可以查看）
    // fixme 这里写了执行， 可以考虑判断系统是否有安装，并获取对应的路径 or 开放出来指定路径
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //创建无界面浏览器对象
    return new PhantomJSDriver(dcaps);
  }
  public static BufferedImage renderHtml2Image(String url) throws IOException {
    webDriver.get(url);
    File file = webDriver.getScreenshotAs(OutputType.FILE);
    return ImageIO.read(file);
  }
}

Test case

public class Base64Util {
  public static String encode(BufferedImage bufferedImage, String imgType) throws IOException {
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    ImageIO.write(bufferedImage, imgType, outputStream);
    return encode(outputStream);
  }
  public static String encode(ByteArrayOutputStream outputStream) {
    return Base64.getEncoder().encodeToString(outputStream.toByteArray());
  }
}
@Test
public void testRender() throws IOException {
  BufferedImage img = null;
  for (int i = 0; i <p>The generated pictures will not be posted, if you are interested You can go directly to my website for actual testing</p><p><strong>III. Network actual measurement</strong></p><p>A simple web application is deployed on the Alibaba Cloud server, which supports html output images. Function; because I bought the beggar version and used a cool front-end template, it opened slowly.</p><p>Operation demonstration:</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/465/014/168385291276280.gif" class="lazy" alt="How to use PhantomJs to complete the html image output function in Java"></p>

The above is the detailed content of How to use PhantomJs to complete the html image output function in Java. For more information, please follow other related articles on the PHP Chinese website!