借助phantomjs來實現(xiàn)將html網(wǎng)頁輸出為圖片
i. 背景
如何在小程序里面生成一張圖，分享到朋友圈呢？目前前端貌似沒有太好的解決方法，所以只能猥瑣的由后端來支持掉，那么可以怎么玩？
生成圖片比較簡單
簡單的場景，可以直接用jdk來支持掉，一般來講也沒有太復(fù)雜的邏輯
之前寫過一個圖片合成的邏輯，利用awt實現(xiàn): 圖片合成
通用、復(fù)雜的模板
簡單的可以直接支持，但復(fù)雜一點的，讓后端來支持，無疑比較惡心，在github上也搜索了一些渲染html的開源庫，不知道是姿勢不對還是咋的，沒有太滿意的結(jié)果
現(xiàn)在對復(fù)雜的模板，要怎么支持呢？
也就是本篇的指南，利用phantomjs來實現(xiàn)html的渲染，支持生成pdf，生成圖片，解析dom都ok，接下來則演示下如何結(jié)合 phantomjs 搭建一個網(wǎng)頁渲染成圖片的服務(wù)
ii. 前提準備
1. phantom.js 安裝
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
# 1. 下載## mac 系統(tǒng)wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## linux 系統(tǒng)wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## windows 系統(tǒng)## 就不要玩了，沒啥意思# 2. 解壓sudo su tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2# 如果解壓報錯，則安裝下面的# yum -y install bzip2# 3. 安裝## 簡單點，移動到bin目錄下cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin# 4. 驗證是否okphantomjs --version# 輸出版本號，則表示ok |
2. java依賴配置
maven 配置添加依賴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--phantomjs --><dependency> <groupid>org.seleniumhq.selenium</groupid> <artifactid>selenium-java</artifactid> <version>2.53.1</version></dependency><dependency> <groupid>com.github.detro</groupid> <artifactid>ghostdriver</artifactid> <version>2.1.0</version></dependency><repositories> <repository> <id>jitpack.io</id> <url>https://jitpack.io</url> </repository></repositories> |
開動
主要調(diào)用phantomjs來實現(xiàn)html渲染圖片的邏輯如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
public class html2imagebyjswrapper { private static phantomjsdriver webdriver = getphantomjs(); private static phantomjsdriver getphantomjs() { //設(shè)置必要參數(shù) desiredcapabilities dcaps = new desiredcapabilities(); //ssl證書支持 dcaps.setcapability("acceptsslcerts", true); //截屏支持 dcaps.setcapability("takesscreenshot", true); //css搜索支持 dcaps.setcapability("cssselectorsenabled", true); //js支持 dcaps.setjavascriptenabled(true); //驅(qū)動支持（第二參數(shù)表明的是你的phantomjs引擎所在的路徑，which/whereis phantomjs可以查看） // fixme 這里寫了執(zhí)行， 可以考慮判斷系統(tǒng)是否有安裝，并獲取對應(yīng)的路徑 or 開放出來指定路徑 dcaps.setcapability(phantomjsdriverservice.phantomjs_executable_path_property, "/usr/local/bin/phantomjs"); //創(chuàng)建無界面瀏覽器對象 return new phantomjsdriver(dcaps); } public static bufferedimage renderhtml2image(string url) throws ioexception { webdriver.get(url); file file = webdriver.getscreenshotas(outputtype.file); return imageio.read(file); }} |
測試case
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public class base64util { public static string encode(bufferedimage bufferedimage, string imgtype) throws ioexception { bytearrayoutputstream outputstream = new bytearrayoutputstream(); imageio.write(bufferedimage, imgtype, outputstream); return encode(outputstream); } public static string encode(bytearrayoutputstream outputstream) { return base64.getencoder().encodetostring(outputstream.tobytearray()); }}@testpublic void testrender() throws 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("cost: " + (end - start)); } system.out.println(base64util.encode(img, "png"));} |
生成的圖片就不貼了，有興趣的可以直接到我的網(wǎng)站上實測
iii. 網(wǎng)絡(luò)實測
在阿里云服務(wù)器上部署了一個簡單的web應(yīng)用，支持了html輸出圖片的功能；由于買的是乞丐版，用的前端模板又比較酷炫，所以打開較慢.
操作演示:
v. 項目
項目地址：
quick-media
quickmedia是一個專注圖文，音視頻，二維碼處理等面向多媒體服務(wù)的開源項目
以上代碼經(jīng)過我們的測試，大家如果還有不明白可需要討論的可以在下方留言，感謝你對服務(wù)器之家的支持。
原文鏈接：https://my.oschina.net/u/566591/blog/1584114
