Use PhantomJS para emitir páginas web HTML como imágenes
I. Antecedentes
¿Cómo generar una imagen en el mini programa y compartirla con el círculo de sus amigos? En la actualidad, parece que no hay buena solución para el front-end, por lo que solo puede ser compatible con el back-end. Entonces, ¿cómo se puede jugar?
Generar imágenes es más simple
En escenarios simples, puede usar directamente JDK para apoyarlos, en general, no hay una lógica demasiado complicada.
Escribí una lógica para la síntesis de imagen antes, usando AWT para implementar: Síntesis de imágenes
Plantillas generales, complejas
Los simples pueden ser compatibles directamente, pero más complicados, y es indudablemente desagradable dejar que el backend lo respalde. También busqué algunas bibliotecas de código abierto para representar HTML en GitHub. No sé si es la postura incorrecta o algo así, pero no tuve un resultado muy satisfactorio.
¿Cómo admitir plantillas complejas ahora?
Es decir, la guía de este artículo, el uso de PhantomJs para realizar la representación de HTML, lo que respalda la generación de PDF, la generación de imágenes y los doms de análisis están bien. A continuación, demostraremos cómo combinar PhantomJS para construir una página web para convertirla en imágenes.
II. Preparación previa
1. Instalación Phantom.JS
# 1. Descargar ## Mac System Wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## Sistema de Linux WGet https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## system ## no jugar más, es sin sentido# 2. Unzip sudo sú -jxvf phantomjs-2.1.1-linux-x86_64.Tar.toR error occurs, install the following #yum -y install bzip2# 3. Install ## to be simple, move to the bin directory phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin# 4. Verify whether okphantomjs --version# outputs the version number, it means ok
2. Configuración de dependencia de Java
Configuración de Maven Agregar dependencias
< <versión> 2.1.0 </versión> </pendency> <repositories> <Repository> <did> jitpack.io </id> <url> https://jitpack.io </ url> </spository> </repositories>
comenzar
La lógica de llamar principalmente a PhantomJS para implementar la imagen de representación HTML es la siguiente.
clase pública html2Imagebyjswrapper {private static phantomjsdriver webdriver = getPhantomjs (); Phantomjsdriver privado estático getPhantomjs () {// Establecer los parámetros necesarios Capacidades deseadas dcaps = new WeedCapability (); // El certificado SSSL admite DCAPS.SetCapability ("AceptsSlCerts", verdadero); // Pantallas de captura de pantalla admite dcaps.setCapability ("TakessCreenshot", verdadero); // La búsqueda CSS admite DCAPS.SetCapability ("CSSSelectorsEnabled", true); // js admite dcaps.setJavaScriptenable (true); // Soporte del controlador (el segundo parámetro indica la ruta donde se encuentra su motor PhantomJS, que/dónde se puede ver Phantomjs) // FixMe escribe la ejecución aquí, puede considerar determinar si el sistema está instalado y obtener la ruta correspondiente o abrir la ruta especificada DCAPS.SetCapability (PhantomJSDRiverservice.phantomjs_Executable_path_Path_Path_Path_Path_Path_Path_Path_Path_Path_Path_Path_Path_Path_Path_path_path_path_path_path_pathPath_path_pathPath_path_path_path_path_path_path_path_path_path_path_path_pather "/usr/local/bin/phantomjs"); // Crear un objeto de navegador sin interfacio devolver nuevo PhantomJSDriver (DCAPS); } public static BufferedImage renderHtml2Image (URL de cadena) lanza IOException {webDriver.get (url); Archivo archivo = webdriver.getScreensHotas (outputType.file); return imageIO.Read (archivo); }}Caso de prueba
public class Base64UTIL {public static String code (BufferedImage BufferedImage, String imgType) lanza IOException {byteArAyOutputStream outputStream = new ByTearRaReOutputStream (); ImageIO.Write (BufferedImage, imgType, outputStream); return encode (outputStream); } public static String code (byteArAyOutputStream outputStream) {return Base64.getEncoder (). EncodeToString (outputStream.tobyTearray ()); }}@TestPublic void testRender () lanza 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 ("Costo:" + (final - inicio)); } System.out.println (base64Util.Encode (img, "png"));}No publicaré las imágenes generadas. Si está interesado, puede ir directamente a mi sitio web para probarlos.
Iii. Prueba de red
Se implementó una aplicación web simple en Alibaba Cloud Server, admitiendo la función de las imágenes de salida HTML; Como compré la versión de mendigo y la plantilla frontal que usé era más fresca, se abrió lentamente.
Demostración de operación:
V. Proyecto
Dirección del proyecto:
medios rápidos
QuickMedia es un proyecto de código abierto que se centra en gráficos, texto, audio y video, procesamiento de código QR y otros servicios multimedia.
El código anterior ha sido probado por el nuestro. Si aún no entiende lo que necesita discutir, puede dejar un mensaje a continuación. Gracias por su apoyo a Wulin.com.