Java中怎麼用PhantomJs完成html圖片輸出功能
java
html
phantomjs
I. 背景
如何在小程式裡面產生一張圖,分享到朋友圈呢?目前前端似乎沒有太好的解決方法,所以只能猥瑣的由後端來支持掉,那麼可以怎麼玩?
生成圖片比較簡單
簡單的場景,可以直接用jdk來支持掉,一般來講也沒有太複雜的邏輯
之前寫過一個圖片合成的邏輯,利用awt實現: 圖片合成
通用、複雜的模板
簡單的可以直接支持,但複雜一點的,讓後端來支持,無疑比較噁心,在github上也搜尋了一些渲染html的開源庫,不知道是姿勢不對還是咋的,沒有太滿意的結果
現在對複雜的模板,要怎麼支持呢?
也就是本篇的指南,利用phantomjs來實現html的渲染,支援生成pdf,產生圖片,解析dom都ok,接下來則示範下如何結合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 系统 ## 就不要玩了,没啥意思 # 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. 验证是否ok phantomjs --version # 输出版本号,则表示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>
登入後複製
開動
主要呼叫phantomjs來實現html渲染圖片的邏輯如下
public class Html2ImageByJsWrapper { private static PhantomJSDriver webDriver = getPhantomJs(); private static PhantomJSDriver getPhantomJs() { //设置必要参数 DesiredCapabilities dcaps = new DesiredCapabilities(); //ssl证书支持 dcaps.setCapability("acceptSslCerts", true); //截屏支持 dcaps.setCapability("takesScreenshot", true); //css搜索支持 dcaps.setCapability("cssSelectorsEnabled", true); //js支持 dcaps.setJavascriptEnabled(true); //驱动支持(第二参数表明的是你的phantomjs引擎所在的路径,which/whereis phantomjs可以查看) // fixme 这里写了执行, 可以考虑判断系统是否有安装,并获取对应的路径 or 开放出来指定路径 dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs"); //创建无界面浏览器对象 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
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 <p>產生的圖片就不貼了,有興趣的可以直接到我的網站上實測</p><p><strong>III. 網路實測</strong></p><p>在阿里雲伺服器上部署了一個簡單的web應用,支援了html輸出圖片的功能;由於買的是乞丐版,用的前端模板又比較酷炫,所以打開較慢.</p><p>操作演示:</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/465/014/168385291276280.gif" class="lazy" alt="Java中怎麼用PhantomJs完成html圖片輸出功能"></p>
登入後複製
以上是Java中怎麼用PhantomJs完成html圖片輸出功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)