Use Phantomjs para produzir páginas da web html como imagens
I. Background
Como gerar uma imagem no mini -programa e compartilhá -la com o círculo de seus amigos? No momento, parece não haver uma boa solução para o front-end, por isso só pode ser suportado pelo back-end. Então, como isso pode ser jogado?
Gerar imagens é mais simples
Em cenários simples, você pode usar diretamente o JDK para apoiá -los, de um modo geral, não há lógica muito complicada.
Eu escrevi uma lógica para a síntese de imagem antes, usando AWT para implementar: síntese de imagem
Modelos gerais e complexos
Os simples podem ser suportados diretamente, mas mais complicados, e é sem dúvida nojento permitir que o back -end o apoie. Também procurei algumas bibliotecas de código aberto para renderizar o HTML no Github. Não sei se é a postura errada ou algo assim, mas não tive um resultado muito satisfatório.
Como apoiar modelos complexos agora?
Ou seja, o guia deste artigo, usando os Phantomjs para render a renderização HTML, apoiar a geração de PDFs, gerar imagens e analisar os DOMs. Em seguida, demonstraremos como combinar fantasmas para construir uma página da web para renderizá -la em imagens.
Ii. Preparação de pré -requisito
1. Instalação Phantom.js
# 1. Download ## Mac System wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## Linux System wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## Windows System ## não reproduza mais, é sem sentido# 2. UNZIP sudo su-jxvf phantomJs-2.1.1.1.1.1.1.1. Ocorre, instale o seguinte #yum -y install bzip2# 3. Instale ## para ser simples, vá para o diretório do bin Phantomjs-2.1.1-linux-x86_64/bin/phantomjs/usr/local/bin# 4. Verifique se okphantomjs-versões# saída do número da versão,
2. Configuração de dependência Java
Configuração do Maven Adicione dependências
<!-phantomjs-> <pendency> <puperiD> org.seleniumhq.selenium </frugiD> <stifactId> Selenium-java </ArtifactId> <versão> 2.53.1 </version> </dependency> <Pepency> <Grupid> com.github.detro </grupo> <Versão> 2.1.0 </siers> </dependency> <positórios> <positório> <id> jitpack.io </id> <url> https://jitpack.io </erl> </positório> </positório>
começar
A lógica de chamar principalmente os fantasmas para implementar a imagem de renderização HTML é a seguinte
classe pública html2ImageByjSwrapper {private static phantomjsdriver webdriver = getphantomjs (); private static phantomjsdriver getphantomjs () {// Definir parâmetros necessários desejados capabilities dcaps = new DesededCapabilities (); // Certificado SSSL suporta dcaps.setCapability ("aceitSslCerts", true); // Captura de tela de telas suporta dcaps.setcapability ("Takesscreenshot", true); // A pesquisa CSS suporta dcaps.setCapability ("cssselectorsEnabled", true); // js suporta dcaps.setjavascripttenabled (true); // Suporte ao driver (o segundo parâmetro indica o caminho em que o seu mecanismo Phantomjs está localizado, que/whereis Phantomjs pode ser visualizado) // FixMe grava a execução aqui, você pode determinar se o sistema está instalado e obter o caminho correspondente ou abrir o caminho especificado DCAPS.SetCapability (PHANTOMTRIVIDE.PHANTOMJSJSJSSEJSSEJSPAPACIDADE (PHANTOMPTHTICE.phantomjsjsjs. "/usr/local/bin/phantomjs"); // Crie um objeto de navegador interfaceless Return New Phantomjsdriver (DCAPS); } public static bufferImage renderhtml2Image (String url) lança ioexception {webdriver.get (url); Arquivo de arquivo = webdriver.getScreenshoTas (outputType.File); retornar imageio.read (arquivo); }}Caso de teste
classe pública base64util {public static string cody (bufferImage bufferImage, string imgtype) lança ioexception {bytearrayOutputStream OutputStream = new ByteArrayOutputStream (); Imageio.write (bufferImage, imgtype, outputStream); Return cody (outputStream); } public static string cody (bytearrayoutputStream OutputStream) {return base64.getEncoder (). codetoString (outputStream.tobytearray ()); }}@TestPublic void testRender () lança IoException {bufferImage img = null; para (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"));}Não vou postar as fotos geradas. Se você estiver interessado, pode ir diretamente ao meu site para testá -los.
Iii. Teste de rede
Um aplicativo Web simples foi implantado no Alibaba Cloud Server, suportando a função das imagens de saída HTML; Desde que comprei a versão mendiga e o modelo front-end que usei foi mais frio, ele se abriu lentamente.
Demoção da Operação:
V. Projeto
Endereço do projeto:
mídia rápida
O QuickMedia é um projeto de código aberto com foco em gráficos, texto, áudio e vídeo, processamento de código QR e outros serviços multimídia.
O código acima foi testado pelo nosso. Se você ainda não entende o que precisa discutir, pode deixar uma mensagem abaixo. Obrigado pelo seu apoio ao wulin.com.