ใช้ phantomjs เพื่อส่งออกเว็บเพจ HTML เป็นภาพ
I. พื้นหลัง
จะสร้างภาพในโปรแกรมมินิและแบ่งปันกับเพื่อนของคุณได้อย่างไร? ในปัจจุบันดูเหมือนว่าจะไม่มีทางออกที่ดีสำหรับส่วนหน้าดังนั้นจึงสามารถรองรับได้โดยแบ็คเอนด์เท่านั้น แล้วจะเล่นได้อย่างไร?
การสร้างรูปภาพนั้นง่ายกว่า
ในสถานการณ์ง่ายๆคุณสามารถใช้ JDK โดยตรงเพื่อสนับสนุนพวกเขาโดยทั่วไปการพูดไม่มีตรรกะที่ซับซ้อนเกินไป
ฉันเขียนตรรกะสำหรับการสังเคราะห์ภาพมาก่อนโดยใช้ AWT เพื่อนำไปใช้: การสังเคราะห์ภาพ
เทมเพลตทั่วไปที่ซับซ้อน
คนง่าย ๆ สามารถรองรับได้โดยตรง แต่มีความซับซ้อนมากขึ้นและน่ารังเกียจอย่างไม่ต้องสงสัยที่จะให้แบ็กเอนด์รองรับมัน ฉันยังค้นหาไลบรารีโอเพ่นซอร์สบางแห่งเพื่อแสดงผล HTML บน GitHub ฉันไม่รู้ว่ามันเป็นท่าทางที่ผิดหรืออะไรบางอย่าง แต่ฉันไม่ได้ผลลัพธ์ที่น่าพอใจมาก
จะสนับสนุนเทมเพลตที่ซับซ้อนได้อย่างไร?
นั่นคือคำแนะนำของบทความนี้โดยใช้ phantomjs เพื่อตระหนักถึงการแสดงผล HTML สนับสนุนการสร้าง PDFs การสร้างรูปภาพและการแยกวิเคราะห์ DOMS ก็โอเค ต่อไปเราจะสาธิตวิธีการรวม phantomjs เพื่อสร้างหน้าเว็บเพื่อแสดงภาพเป็นรูปภาพ
ii. การเตรียมการก่อน
1. การติดตั้ง phantom.js
# 1. ดาวน์โหลด ## 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## ระบบ Windows ## ไม่เล่นอีกต่อไป เกิดข้อผิดพลาดในการบีบอัดติดตั้ง #YUM -y ติดตั้ง bzip2# 3 ต่อไปนี้ติดตั้ง ## ให้ง่ายย้ายไปที่ไดเรกทอรี bin phantomjs-2.1.1-linux-x86_64/bin/phantomjs/usr/local/bin# 4
2. การกำหนดค่าการพึ่งพา Java
การกำหนดค่า maven เพิ่มการพึ่งพา
<!-phantomjs-> <การพึ่งพา> <roupId> org.seleniumhq.selenium </groupid> <ratifactid> Selenium-Java </artifactid> <Sersion> 2.53.1 </Side> <Sersion> 2.1.0 </Sentual> </derctency> <ที่เก็บ> <ที่เก็บ> <id> jitpack.io </id> <url> https://jitpack.io </url> </repository>
เริ่ม
ตรรกะของการเรียก phantomjs เป็นหลักเพื่อใช้ภาพการเรนเดอร์ HTML มีดังนี้
ชั้นเรียนสาธารณะ HTML2ImageByjswrapper {phantomjsdriver ส่วนตัวส่วนตัว = getphantomjs (); phantomjsdriver ส่วนตัว getphantomjs () {// ตั้งค่าพารามิเตอร์ที่จำเป็นที่ต้องการความสามารถในการจัดทำ dcaps = ใหม่ที่ต้องการความสามารถ (); // ใบรับรอง SSSL รองรับ DCAPS.SetCapability ("ANCEPTSSLCERTS", TRUE); // หน้าจอภาพหน้าจอรองรับ dcaps.setcapability ("takesscreenshot", จริง); // การค้นหา CSS รองรับ DCAPS.SetCapability ("CSSSelectorSenabled", จริง); // js รองรับ dcaps.setjavascriptenabled (จริง); // การสนับสนุนไดรเวอร์ (พารามิเตอร์ที่สองระบุเส้นทางที่เครื่องยนต์ phantomjs ของคุณตั้งอยู่ซึ่ง/wheres phantomjs สามารถดูได้) // fixme เขียนการดำเนินการที่นี่คุณสามารถพิจารณาการพิจารณาว่าระบบได้รับการติดตั้งและรับเส้นทางที่สอดคล้องกัน "/usr/local/bin/phantomjs"); // สร้างวัตถุเบราว์เซอร์ที่ไม่มีส่วนร่วมส่งคืน phantomjsdriver ใหม่ (DCAPS); } สาธารณะแบบคงที่ bufferedImage renderhtml2Image (String url) พ่น IOException {webDriver.get (URL); ไฟล์ไฟล์ = webDriver.getScreenShotas (outputType.File); return imageio.read (ไฟล์); -กรณีทดสอบ
คลาสสาธารณะ Base64Util {String String สาธารณะ (BufferedImage BufferedImage, String imgType) พ่น IOException {ByTeArrayOutputStream outputStream = new ByteArrayOutputStream (); Imageio.write (bufferedimage, imgtype, outputstream); return encode (outputstream); } การเข้ารหัสสตริงคงที่สาธารณะ (byteArrayOutputStream outputStream) {return base64.getEncoder (). encodetoString (outputStream.tobyteArray ()); }}@testPublic เป็นโมฆะ testRender () พ่น IOException {bufferedImage img = null; สำหรับ (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 ("ค่าใช้จ่าย:" + (สิ้นสุด - เริ่มต้น)); } system.out.println (base64util.encode (img, "png"));}ฉันจะไม่โพสต์รูปภาพที่สร้างขึ้น หากคุณสนใจคุณสามารถไปที่เว็บไซต์ของฉันโดยตรงเพื่อทดสอบพวกเขา
iii. การทดสอบเครือข่าย
แอปพลิเคชันเว็บอย่างง่ายถูกปรับใช้บน Alibaba Cloud Server ซึ่งรองรับฟังก์ชั่นของรูปภาพ HTML ที่ส่งออก เนื่องจากฉันซื้อรุ่นขอทานและเทมเพลตส่วนหน้าที่ฉันใช้นั้นเย็นกว่าจึงเปิดช้า
การสาธิตการดำเนินการ:
V. โครงการ
ที่อยู่โครงการ:
สื่อด่วน
QuickMedia เป็นโครงการโอเพ่นซอร์สที่มุ่งเน้นไปที่กราฟิกข้อความเสียงและวิดีโอการประมวลผลรหัส QR และบริการมัลติมีเดียอื่น ๆ
รหัสข้างต้นได้รับการทดสอบโดยเรา หากคุณยังไม่เข้าใจสิ่งที่คุณต้องพูดคุยคุณสามารถฝากข้อความไว้ด้านล่าง ขอบคุณสำหรับการสนับสนุน Wulin.com