Gunakan phantomjs untuk mengeluarkan halaman web html sebagai gambar
I. latar belakang
Bagaimana cara menghasilkan gambar dalam program mini dan membagikannya dengan lingkaran teman Anda? Saat ini, tampaknya tidak ada solusi yang baik untuk front-end, sehingga hanya dapat didukung oleh back-end. Jadi bagaimana bisa dimainkan?
Menghasilkan gambar lebih sederhana
Dalam skenario sederhana, Anda dapat secara langsung menggunakan JDK untuk mendukung mereka, secara umum, tidak ada logika yang terlalu rumit.
Saya menulis logika untuk sintesis gambar sebelumnya, menggunakan AWT untuk mengimplementasikan: sintesis gambar
Template umum, kompleks
Yang sederhana dapat didukung secara langsung, tetapi yang lebih rumit, dan tidak diragukan lagi menjijikkan untuk membiarkan backend mendukungnya. Saya juga mencari beberapa perpustakaan open source untuk rendering html di github. Saya tidak tahu apakah itu postur yang salah atau sesuatu, tetapi saya tidak memiliki hasil yang sangat memuaskan.
Bagaimana cara mendukung template kompleks sekarang?
Artinya, panduan artikel ini, menggunakan phantomjs untuk mewujudkan rendering HTML, mendukung generasi PDF, menghasilkan gambar, dan penguraian dom tidak apa -apa. Selanjutnya, kami akan menunjukkan cara menggabungkan phantomjs untuk membangun halaman web untuk membuatnya menjadi gambar.
Ii. Persiapan prasyarat
1. Instalasi Phantom.js
# 1. Unduh ## Sistem Mac Wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## linux wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## Sistem Windows ## Tidak Bermain Lagi, tidak ada artinya# 2. UNZIP SUDO TAR -JXVF PHANTOMJS-2.1.1.1.1.1 Terjadi, instal #yum -y -y install BZIP2# 3 berikut ini menjadi sederhana, pindah ke Direktori Bin Phantomjs-2.1.1-linux-x86_64/bin/phantomjs/usr/lokal/bin#
2. Konfigurasi ketergantungan Java
Konfigurasi Maven Tambahkan dependensi
<!-phantomjs-> <dependency> <groupid> org.seleniumhq.selenium </groupid> <t Artifactid> selenium-java </arttifactid> <version> 2.53.1 </version> </dependency> <sgroupid> com.github.detro </Versi/</Digergency> <sgroupid> Com.github.detro </groupid> <santider> <sroupid> com.github.detro </groupid> <sroGact> <sroGubub> <version> 2.1.0 </version> </dependency> <r repositories> <repository> <dent> jitpack.io </dent> <rrtps://jitpack.io </rrl> </prository> </repositories>
awal
Logika terutama memanggil hantu untuk mengimplementasikan gambar rendering HTML adalah sebagai berikut
kelas publik html2imagebyjswrapper {private static phantomjsdriver webdriver = getPhantomjs (); private static phantomjsdriver getphantomjs () {// atur parameter yang diperlukan yang diinginkan Capability dcaps = new diinginkancapabilities (); // SSSL Certificate mendukung dcaps.setCapability ("AcceptSlcerts", true); // Screens Screenshot mendukung dcaps.setCapability ("TakessCreenshot", true); // Pencarian CSS mendukung dcaps.setCapability ("cssselectorsenabled", true); // JS mendukung dcaps.setjavascriptEnabled (true); // Dukungan pengemudi (parameter kedua menunjukkan jalur di mana mesin PhantomJS Anda berada, yang/di mana PhantomJs dapat dilihat) // FixMe menulis eksekusi di sini, Anda dapat mempertimbangkan menentukan apakah sistem dipasang dan mendapatkan jalur yang sesuai atau phantomplaypath_path_pather (phantomjsdriverservice.phantompeCape.spath_pathypath_pather (phantomjsdriverService.phantompePape.spathpath_pathypather_pathery, phantomjsdriverservice.phantompeCaping "/usr/lokal/bin/phantomjs"); // Buat objek browser tanpa antarmuka mengembalikan phantomjsdriver baru (DCAPS); } public static BufferedImage renderHTML2Image (string url) melempar ioException {webdriver.get (url); File file = webdriver.getScreenshotas (outputType.file); return imageo.read (file); }}Uji kasus
Public Class Base64Util {Public Static String Encode (buferedImage buferedImage, String imgType) melempar ioException {bytearrayoutputStream outputStream = bytearrayoutputStream (); Imageo.write (bufferedImage, imgType, outputStream); return encode (outputStream); } public static string encode (bytearrayoutputStream outputStream) {return base64.getEncoder (). encodeToString (outputStream.tobyteArray ()); }}@Testpublic void testRender () melempar ioException {bufferedImage img = null; untuk (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 ("Biaya:" + (end - start)); } System.out.println (base64util.encode (img, "png"));}Saya tidak akan memposting gambar yang dihasilkan. Jika Anda tertarik, Anda dapat langsung pergi ke situs web saya untuk mengujinya.
AKU AKU AKU. Tes jaringan
Aplikasi web sederhana digunakan di Alibaba Cloud Server, mendukung fungsi gambar output HTML; Karena saya membeli versi pengemis dan template front-end yang saya gunakan lebih keren, dibuka perlahan.
Demo Operasi:
V. Proyek
Alamat Proyek:
media cepat
QuickMedia adalah proyek open source yang berfokus pada grafik, teks, audio dan video, pemrosesan kode QR dan layanan multimedia lainnya.
Kode di atas telah diuji oleh kita. Jika Anda masih tidak mengerti apa yang perlu Anda diskusikan, Anda dapat meninggalkan pesan di bawah ini. Terima kasih atas dukungan Anda untuk wulin.com.