首頁 Java java教程 Java中怎麼用PhantomJs完成html圖片輸出功能

Java中怎麼用PhantomJs完成html圖片輸出功能

May 12, 2023 am 08:55 AM
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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和處理HTML/XML?

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

突破或從Java 8流返回? 突破或從Java 8流返回? Feb 07, 2025 pm 12:09 PM

突破或從Java 8流返回?

See all articles