Fonctionnalité d'output d'image HTML avec Java PhantomJs

Utiliser phantomJs pour convertir les pages html en images

I. Contexte

Comment générer une image dans une application mobile et la partager dans le cercle d'amis ? Actuellement, il n'y a pas de solution très bonne du côté frontend, donc il faut que le backend le supporte. Alors, comment pouvons-nous jouer ?

La génération d'images est assez simple

Dans des scénarios simples, on peut directement utiliser jdk pour le faire, généralement il n'y a pas de logique trop complexe

J'ai écrit une logique de composition d'images auparavant, utilisant awt pour : composition d'images

Modèles universels et complexes

Les modèles simples peuvent être directement supportés, mais pour les modèles plus complexes, il est préférable de les faire supporter par le backend, ce qui est sans doute assez désagréable. J'ai cherché des bibliothèques open-source pour le rendu html sur github, mais je n'ai pas trouvé de résultats satisfaisants, je ne sais pas si c'est à cause de mes erreurs ou autre

Comment supporter les modèles complexes maintenant ?

C'est aussi le guide de cet article, utilisant phantomjs pour la rendu d'html, qui prend en charge la génération de pdf, l'insertion d'images, et l'analyse du dom, puis je vais démontrer comment combiner phantomjs pour construire un service de rendu web en image

II. Préparation préalable

1. Installation de phantom.js

# 1. Télécharger
## Système Mac
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## Système Linux
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## Système Windows
## Ne jouons plus, c'est pas amusant
# 2. Décompresser
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# Si l'extraction échoue, installez les suivantes
# yum -y install bzip2
# 3. Installation
## Simplement, déplacez-vous dans le répertoire bin
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. Vérifier si ok
phantomjs --version
# Afficher la version, cela signifie ok

2configuration des dépendances java

configuration Maven pour ajouter la dépendance

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

Allons-y

Les appels principaux de phantomjs pour la logique de rendu d'image html sont les suivants

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //Configurer les paramètres nécessaires
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //support de certificat SSL
    dcaps.setCapability("acceptSslCerts", true);
    //Support de la capture d'écran
    dcaps.setCapability("takesScreenshot", true);
    //Support de la recherche CSS
    dcaps.setCapability("cssSelectorsEnabled", true);
    //Support JavaScript
    dcaps.setJavascriptEnabled(true);
    //Support du pilote (le second paramètre indique le chemin où se trouve votre moteur phantomjs, which/whereis phantomjs peut voir）
    // fixme Ici, j'ai écrit l'exécution, il pourrait être utile de vérifier si le système a installé, et d'obtenir le chemin correspondant ou de le rendre accessible pour spécifier le chemin
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //Créer un objet navigateur sans interface
    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 < 20; ++i) {
    String url = "https://my.oschina.net/u/566591/blog/1580020";
    long start = System.currentTimeMillis();
    img = Html2ImageByJsWrapper.renderHtml2Image(url);
    long end = System.currentTimeMillis();
    System.out.println("cost: " + (end - start));
  }
  System.out.println(Base64Util.encode(img, "png");
}

Les images générées ne sont pas affichées, ceux qui sont intéressés peuvent tester directement sur mon site.

III. Mesure réseau

Une application web simple a été déployée sur le serveur阿里云, qui prend en charge la fonction de sortie d'image html ; étant donné que j'ai acheté la version la plus basique et que le modèle frontal est assez cool, il s'ouvre lentement.

Démonstration d'utilisation :

V. Projet

Adresse du projet :

quick-media

QuickMedia est un projet open source qui se concentre sur le traitement des graphiques, des audiovisuels, des codes QR et des services multimédias.

Le code ci-dessus a été testé par nos soins, si vous avez des doutes ou des questions à poser, vous pouvez laisser un commentaire ci-dessous. Merci de votre soutien aux tutoriels d'urtout.