Java PhantomJs completa a função de saída de imagem html

Usando o phantomJs para transformar páginas html em imagens

I. Contexto

Como gerar uma imagem dentro de um miniprogram e compartilhá-la no círculo de amigos? Atualmente, não há uma solução muito boa no frontend, então só podemos suportá-la de forma envergonhada pelo backend, então como podemos brincar?

A geração de imagens é relativamente simples

Cenários simples podem ser suportados diretamente com o jdk, geralmente não há lógica muito complexa

Antes, escrevi uma lógica de composição de imagens, utilizando awt: composição de imagens

Modelos comuns e complexos

Os modelos simples podem ser suportados diretamente, mas os mais complexos, deixar que o backend suporte, é obviamente bastante irritante, também busquei algumas bibliotecas open-source de renderização html no github, não sei se é por não estar na posição correta ou algo assim, não achei resultados muito satisfatórios

Como suportar modelos complexos agora?

Isso é o guia deste artigo, utilizando o phantomjs para renderizar html, suportando a geração de pdf, a geração de imagens, a análise de dom tudo bem, a seguir, vamos demonstrar como combinar o phantomjs para renderizar uma página da web em imagem

II. Pré-requisitos

1. Instalação do phantom.js

# 1. Download
## Sistema operacional Mac
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## Sistema operacional Linux
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## Sistema operacional Windows
## Não continue, não tem graça
# 2. Descompactar
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# Se houver erro ao descompactar, instale o seguinte
# yum -y install bzip2
# 3. Instalação
## De maneira simples, mova para o diretório bin
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. Verificar se está ok
phantomjs --version
# Se imprimir a versão, significa ok

2configuração de dependência java

configuração maven para adicionar dependência

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

A principal chamada para o phantomjs para renderizar imagens html é a seguinte

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //configurar parâmetros necessários
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //suporte a certificados ssl
    dcaps.setCapability("acceptSslCerts", true);
    //screenshot support
    dcaps.setCapability("takesScreenshot", true);
    //css search support
    dcaps.setCapability("cssSelectorsEnabled", true);
    //js support
    dcaps.setJavascriptEnabled(true);
    //Driver support (the second parameter indicates the path of your phantomjs engine, which/whereis phantomjs can be viewed)
    // fixme Here is the execution, it can be considered to check if the system has installed it and to obtain the corresponding path or to open it to specify the path
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //Create a headless browser object
    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("custo: " + (end - start));
  }
  System.out.println(Base64Util.encode(img, "png");
}

Não vou colar a imagem gerada, mas quem tiver interesse pode testar diretamente no meu site

III. Teste de Rede

Foi implementado um aplicativo web simples no servidor阿里云, que suporta a função de saída de imagem HTML; devido ao fato de ter comprado a versão mais básica e usar um template frontal bastante animado, ele abre mais devagar.

Demonstração de Operação:

V. Projeto

Endereço do projeto:

quick-media

QuickMedia é um projeto open-source focado em serviços de multimídia, como processamento de imagens, áudio, vídeo e QR codes.

O código acima foi testado por nós, se ainda houver algo que você não entenda e que precise ser discutido, pode deixar um comentário abaixo. Agradecemos o seu apoio ao Tutorial Grito.