Java PhantomJs完成html圖片輸出功能
借助phantomJs來(lái)實(shí)現(xiàn)將html網(wǎng)頁(yè)輸出為圖片
I. 背景
如何在小程序里面生成一張圖,分享到朋友圈呢?目前前端貌似沒(méi)有太好的解決方法,所以只能猥瑣的由后端來(lái)支持掉,那么可以怎么玩?
生成圖片比較簡(jiǎn)單
簡(jiǎn)單的場(chǎng)景,可以直接用jdk來(lái)支持掉,一般來(lái)講也沒(méi)有太復(fù)雜的邏輯
之前寫(xiě)過(guò)一個(gè)圖片合成的邏輯,利用awt實(shí)現(xiàn): 圖片合成
通用、復(fù)雜的模板
簡(jiǎn)單的可以直接支持,但復(fù)雜一點(diǎn)的,讓后端來(lái)支持,無(wú)疑比較惡心,在github上也搜索了一些渲染html的開(kāi)源庫(kù),不知道是姿勢(shì)不對(duì)還是咋的,沒(méi)有太滿意的結(jié)果
現(xiàn)在對(duì)復(fù)雜的模板,要怎么支持呢?
也就是本篇的指南,利用phantomjs來(lái)實(shí)現(xiàn)html的渲染,支持生成pdf,生成圖片,解析dom都o(jì)k,接下來(lái)則演示下如何結(jié)合 phantomjs 搭建一個(gè)網(wǎng)頁(yè)渲染成圖片的服務(wù)
II. 前提準(zhǔn)備
1. phantom.js 安裝
# 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) ## 就不要玩了,沒(méi)啥意思 # 2. 解壓 sudo su tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2 # 如果解壓報(bào)錯(cuò),則安裝下面的 # yum -y install bzip2 # 3. 安裝 ## 簡(jiǎn)單點(diǎn),移動(dòng)到bin目錄下 cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin # 4. 驗(yàn)證是否ok phantomjs --version # 輸出版本號(hào),則表示ok
2. java依賴配置
maven 配置添加依賴
<!--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>
開(kāi)動(dòng)
主要調(diào)用phantomjs來(lái)實(shí)現(xiàn)html渲染圖片的邏輯如下
public class Html2ImageByJsWrapper { private static PhantomJSDriver webDriver = getPhantomJs(); private static PhantomJSDriver getPhantomJs() { //設(shè)置必要參數(shù) DesiredCapabilities dcaps = new DesiredCapabilities(); //ssl證書(shū)支持 dcaps.setCapability("acceptSslCerts", true); //截屏支持 dcaps.setCapability("takesScreenshot", true); //css搜索支持 dcaps.setCapability("cssSelectorsEnabled", true); //js支持 dcaps.setJavascriptEnabled(true); //驅(qū)動(dòng)支持(第二參數(shù)表明的是你的phantomjs引擎所在的路徑,which/whereis phantomjs可以查看) // fixme 這里寫(xiě)了執(zhí)行, 可以考慮判斷系統(tǒng)是否有安裝,并獲取對(duì)應(yīng)的路徑 or 開(kāi)放出來(lái)指定路徑 dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs"); //創(chuàng)建無(wú)界面瀏覽器對(duì)象 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); } }
測(cè)試case
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()); } } @Test public 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)站上實(shí)測(cè)
III. 網(wǎng)絡(luò)實(shí)測(cè)
在阿里云服務(wù)器上部署了一個(gè)簡(jiǎn)單的web應(yīng)用,支持了html輸出圖片的功能;由于買的是乞丐版,用的前端模板又比較酷炫,所以打開(kāi)較慢.
操作演示:
V. 項(xiàng)目
項(xiàng)目地址:
quick-media
QuickMedia是一個(gè)專注圖文,音視頻,二維碼處理等面向多媒體服務(wù)的開(kāi)源項(xiàng)目
以上代碼經(jīng)過(guò)我們的測(cè)試,大家如果還有不明白可需要討論的可以在下方留言,感謝你對(duì)腳本之家的支持。
相關(guān)文章
java實(shí)現(xiàn)簡(jiǎn)單斗地主(看牌排序)
這篇文章主要介紹了java實(shí)現(xiàn)簡(jiǎn)單斗地主,看牌進(jìn)行排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2010-11-11JavaFX實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果(二)
這篇文章主要為大家詳細(xì)介紹了JavaFX實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果的第二篇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11drools規(guī)則動(dòng)態(tài)化實(shí)踐解析
這篇文章主要為大家介紹了drools規(guī)則動(dòng)態(tài)化實(shí)踐解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02String類型傳遞是值傳遞,char[]類型傳遞是引用傳遞的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇String類型傳遞是值傳遞,char[]類型傳遞是引用傳遞的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看不2016-09-09關(guān)于easyExcel中讀取Excel表頭的實(shí)例說(shuō)明
EasyExcel是阿里巴巴開(kāi)源的一個(gè)excel處理框架,以使用簡(jiǎn)單、節(jié)省內(nèi)存著稱,下面這篇文章主要給大家介紹了關(guān)于easyExcel中讀取Excel表頭的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06Idea創(chuàng)建多模塊maven聚合項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了Idea創(chuàng)建多模塊maven聚合項(xiàng)目的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12