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 設定新增依賴
org.seleniumhq.selenium selenium-java 2.53.1 com.github.detro ghostdriver 2.1.0 jitpack.io https://jitpack.io
開動
主要呼叫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; iIII. 網路實測
操作示範:
以上是如何使用Java中的PhantomJS實作HTML頁面截圖功能?的詳細內容。更多資訊請關注PHP中文網其他相關文章!