Comment utiliser PhantomJs pour compléter la fonction de sortie d'image HTML en Java

I. Contexte

Comment générer une image dans le mini programme et la partager sur Moments ? À l'heure actuelle, il ne semble pas y avoir de bonne solution pour le front-end, elle ne peut donc être prise en charge que par le back-end. Alors, comment peut-on y jouer ?

Générer des images est relativement simple

Des scènes simples peuvent être directement prises en charge par jdk De manière générale, il n'y a pas de logique trop compliquée

J'ai déjà écrit une logique de synthèse d'images, en utilisant awt pour l'implémenter : Synthèse d'images

Universelle, Les modèles complexes

peuvent être pris en charge directement s'ils sont simples, mais si le back-end les prend en charge s'ils sont plus compliqués, ce sera sans aucun doute dégoûtant. J'ai également recherché des bibliothèques open source pour le rendu HTML sur github. Je ne sais pas si c'est à cause d'une mauvaise posture ou quelque chose du genre, mais il n'y a rien de mal à cela. Résultats satisfaisants

Comment prendre en charge des modèles complexes maintenant ?

Ceci est le guide de cet article. Il utilise phantomjs pour implémenter le rendu HTML. Il prend en charge la génération de fichiers PDF, la génération d'images et l'analyse de dom. Ensuite, nous montrerons comment combiner phantomjs pour créer un service qui restitue les pages Web en images.

II.Préparation des prérequis

1. Installez 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. Configuration des dépendances Java

Configuration Maven pour ajouter des dépendances

<!--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>

Démarrer

La logique de l'appel principal de phantomjs pour implémenter le rendu des images HTML est la suivante.

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);
  }
}

Cas de test

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  Les images générées ne seront pas publiées. Si vous êtes intéressé, vous pouvez accéder directement à mon site Web pour des tests réels<p></p><p>III. Tests réels du réseau<strong></strong></p>Une simple application Web a été déployée sur le. Serveur Alibaba Cloud, qui prend en charge la fonction d'images de sortie HTML ; Depuis que j'ai acheté la version mendiants et utilisé un modèle frontal sympa, il s'est ouvert lentement.<p></p>Démonstration du fonctionnement :<p></p><p><img src="https://img.php.cn/upload/article/000/465/014/168385291276280.gif" alt="Comment utiliser PhantomJs pour compléter la fonction de sortie dimage HTML en Java"></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!