Utilisez des phantomjs pour produire des pages Web HTML comme images
I. Contexte
Comment générer une image dans le programme mini et la partager avec votre cercle d'amis? À l'heure actuelle, il ne semble pas y avoir de bonne solution à l'avant, donc il ne peut être pris en charge que par le back-end. Alors, comment peut-il être joué?
Générer des images est plus simple
Dans des scénarios simples, vous pouvez utiliser directement JDK pour les soutenir, d'une manière générale, il n'y a pas de logique trop compliquée.
J'ai déjà écrit une logique pour la synthèse d'image, en utilisant AWT pour implémenter: Synthèse d'image
Modèles généraux et complexes
Les simples peuvent être directement pris en charge, mais plus compliqués, et il est sans aucun doute dégoûtant de laisser le backend le soutenir. J'ai également recherché des bibliothèques open source pour rendre HTML sur GitHub. Je ne sais pas si c'est la mauvaise posture ou quelque chose, mais je n'ai pas eu de résultat très satisfaisant.
Comment prendre en charge les modèles complexes maintenant?
Autrement dit, le guide de cet article, en utilisant des PhantoMJS pour réaliser le rendu HTML, la prise en charge de la génération de PDF, la génération d'images et l'analyse des DOMS sont OK. Ensuite, nous montrerons comment combiner des phantomjs pour créer une page Web pour le rendre en images.
Ii Préparation préalable
1. Installation de Phantom.js
# 1. Télécharger ## Mac System wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## Linux System WGET WGET https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-Linux-x86_64.tar.bz2# ## Système de Windows ne joue plus, il est dénué de sens # 2. Unzip Sudo Su-Tar -JXVF Phantomjs-2.1.1-Linux-X86_64.tar.bz2 # #1.1 se produit, installez l'installation de #yum -y suivante bzip2 # 3. Installez ## pour être simple, déplacez-vous vers le répertoire bin phantomjs-2.1.1-linux-x86_64 / bin / phantomjs / usr / local / bin # 4. Vérifiez si Okphantomjs - Version # sort le numéro de version, cela signifie ok # 4.
2. Configuration de dépendance Java
Configuration Maven Ajouter des dépendances
<! - Phantomjs -> <dependency> <proupId> org.seleniumhq.selenium </prôdID> <ArtefactId> Selenium-java </retifactid> <version> 2.53.1 </ version> </Dependance> <Dedency> <ProupId> com.github.detro </proupId> <Artifactid> Ghostdriver </ artifact> <version> 2.1.0 </ version> </ Dependency> <Depositories> <Fepository> <id> jitpack.io </id> <url> https://jitpack.io </url> </ Repository> </ Repositories>
commencer
La logique d'appeler principalement des Phantomjs pour implémenter l'image de rendu HTML est la suivante
classe publique html2imagebyjswrapper {private static Phantomjsdriver webDriver = getPhantomjs (); Phantomjsdriver statique privé getPhantomjs () {// Définir les paramètres nécessaires. // Le certificat SSSL prend en charge DCAPS.SetCapabilité ("AcceptsSlCerts", true); // La capture d'écran des écrans prend en charge dcaps.setCapabilité ("takesscreenshot", true); // CSS Search prend en charge DCAPS.SetCapabilité ("CSSSelectorSenabled", true); // JS prend en charge dcaps.setjavascriptEabled (true); // Prise en charge du pilote (le deuxième paramètre indique le chemin d'accès où se trouve votre moteur Phantomjs, qui / où les Phantomjs peuvent être consultés) // FixMe écrit l'exécution ici, vous pouvez envisager de déterminer si le système est installé et d'obtenir le chemin correspondant ou d'ouvrir le chemin spécifié DCAPS.SetCapabilité (Phantomjsdverservice.phantomjs_executable_path_property, "/ usr / local / bin / phantomjs"); // Créer un objet de navigateur sans interface renvoie nouveau PhantomJsDriver (DCAPS); } public static bufferedImage RenderHtml2Image (URL de chaîne) lève ioException {webDriver.get (url); File file = webdriver.getScreenshotas (outputType.file); return imageo.read (fichier); }}Bilan de test
classe publique Base64Util {public static String Encode (BufferedImage BufferedImage, String imgType) lève ioException {byTearrayOutputStream outputStream = new byTearrayOutputStream (); ImageIo.Write (BufferedImage, ImgType, OutputStream); return Encoder (outputStream); } Public Static String Encode (byTearrayOutputStream OutputStream) {return Base64.GetEncoder (). EncodeToString (OutputStream.ToByTearray ()); }} @ Testpublic void testRender () lève ioException {bufferedImage img = null; pour (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"));}Je ne publierai pas les photos générées. Si vous êtes intéressé, vous pouvez vous rendre directement sur mon site Web pour les tester.
Iii. Test de réseau
Une application Web simple a été déployée sur Alibaba Cloud Server, prenant en charge la fonction des images de sortie HTML; Depuis que j'ai acheté la version mendiante et que le modèle frontal que j'ai utilisé était plus frais, il s'est ouvert lentement.
Demo de fonctionnement:
V. Projet
Adresse du projet:
médias rapides
QuickMedia est un projet open source axé sur les graphiques, le texte, l'audio et la vidéo, le traitement du code QR et d'autres services multimédias.
Le code ci-dessus a été testé par le nôtre. Si vous ne comprenez toujours pas de quoi vous devez discuter, vous pouvez laisser un message ci-dessous. Merci pour votre soutien à Wulin.com.