Función de salida de imágenes HTML de Java PhantomJs

Utilizar phantomJs para realizar la salida de páginas web html a imágenes

I. Fondo

¿Cómo generar una imagen en una aplicación小程序 y compartirla en el círculo de amigos? Actualmente, no parece haber una buena solución en el frontend, por lo que solo se puede soportar desvergonzadamente por el backend, ¿entonces cómo se puede jugar?

La generación de imágenes es bastante simple

En escenarios simples, se puede usar directamente jdk para soportar, generalmente no hay lógica muy compleja

Anteriormente, he escrito una lógica de合成 de imágenes, que utiliza awt para realizar: la síntesis de imágenes

Plantillas genéricas y complejas

Las simples pueden ser directamente soportadas, pero las más complejas, que son soportadas por el backend, definitivamente son desagradables, también he buscado algunas bibliotecas de renderización de html de código abierto en github, no sé si es por un error en la postura o algo así, no he encontrado resultados muy satisfactorios

Ahora, ¿cómo se puede soportar un plantilla compleja?

Es decir, esta guía, que utiliza phantomjs para realizar la renderización de html, admite la generación de pdf, la generación de imágenes, y la análisis de dom, a continuación, se mostrará cómo combinar phantomjs para construir un servicio de renderización de páginas web en imágenes

II. Preparativos previos

1. instalación de phantom.js

# 1. descargar
## sistema operativo mac
wget https://bitbucket.org/ariya/phantomjs/descargas/phantomjs-2.1.1-macosx.zip
## sistema operativo linux
wget https://bitbucket.org/ariya/phantomjs/descargas/phantomjs-2.1.1-linux-x86_64.tar.bz2
## sistema operativo windows
## No sigas jugando, no tiene mucho sentido
# 2. descomprimir
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# Si se produce un error al descomprimir, instala lo siguiente
# yum -y instalar bzip2
# 3. instalar
## Simplemente, mueve a la carpeta bin
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. verificar si está bien
phantomjs --version
# Si se imprime la versión, significa que está bien

2configuración de dependencias java

configuración de maven para agregar dependencias

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

¡vamos!

la lógica principal de llamada a phantomjs para la renderización de imágenes html es la siguiente

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //establecer parámetros necesarios
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //soporte de certificados ssl
    dcaps.setCapability("acceptSslCerts", true);
    //soporte para captura de pantalla
    dcaps.setCapability("takesScreenshot", true);
    //soporte para búsqueda de CSS
    dcaps.setCapability("cssSelectorsEnabled", true);
    //soporte para JavaScript
    dcaps.setJavascriptEnabled(true);
    //Soporte del controlador (el segundo parámetro indica la ruta del motor de phantomjs que tienes, which/donde se puede ver con whereis phantomjs）（
    // fixme Aquí se escribió la ejecución, podría considerar si el sistema tiene instalado el programa y obtener la ruta correspondiente o abrir para especificar la ruta
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //Crear objeto de navegador sin interfaz de usuario
    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);
  }
}

prueba de caso

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

No adjunto las imágenes generadas, si alguien tiene interés puede probar directamente en mi sitio web

III. Medición de Red

Se ha desplegado una aplicación web simple en el servidor de AliCloud, que admite la función de salida de imágenes HTML; debido a que compré la versión más barata y el template que uso es bastante impresionante, por lo que se abre más lento.

Demostración de Operación:

V. Proyecto

Dirección del proyecto：

quick-media

QuickMedia es un proyecto de código abierto que se centra en el procesamiento de gráficos, audio, video, códigos QR y otros servicios de multimedia.

El código anterior ha sido probado por nosotros, si还有人不明白需要讨论的可以在下方留言，感谢你对呐喊教程的支持。