Java PhantomJsでHTML画像の出力機能を完了する

phantomJsを使用してHTMLウェブページを画像に変換する方法

I. 背景

どうやってミニアプリ内で画像を生成し、朋友圈にシェアするかについて説明します。現在、フロントエンドには良い解決策がなく、そのためにはバックエンドがサポートする必要があります。どうやるべきでしょうか？

画像の生成は比較的簡単です

単純なシーンでは、JDKを使用してサポートできます。一般的には複雑なロジックはありません。

以前、awtを使用して画像合成のロジックを書きました：画像合成

汎用、複雑なテンプレート

単純なものは直接サポートできますが、少し複雑な場合はバックエンドがサポートする方が良く、githubでHTMLレンダリングのオープンソースライブラリを検索しましたが、方法が間違っているのかどうかは不明ですが、満足のいく結果は得られませんでした。

複雑なテンプレートに対してどうサポートするべきでしょうか？

これが本稿のガイドであり、phantomjsを使用してHTMLのレンダリングを実現し、PDFの生成、画像の生成、DOMの解析が可能です。次に、どうやって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とみなします

2java依存関係の設定

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);
    //JavaScriptサポート
    dcaps.setJavascriptEnabled(true);
    //ドライバーのサポート（第二引数は、あなたのphantomjsエンジンのパスを示しています、which/whereis phantomjsを使用して確認できます）
    // fixme ここには実行が記述されていますが、システムにインストールされているか確認し、対応するパスを取得することを検討してくださいまたは指定されたパスを公開してください
    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);
  }
}

テストケース

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");
}

生成された画像はここに貼りませんが、興味がある場合は私のウェブサイトに直接実測してください。

III. ネットワーク実測

阿里云サーバー上に簡単なwebアプリケーションをデプロイし、HTML出力画像機能をサポートしています；プランがエンタープライズ版でなく、フロントエンドテンプレートが非常にクールであれば、開くのが遅いです。

操作デモ：

V. プロジェクト

プロジェクトのURL：

quick-media

QuickMediaは、画像、音声、ビデオ、QRコード処理など、マルチメディアサービスに向けたオープンソースプロジェクトです。

以上のコードは私たちのテストを通過しました。何か不明な点があれば、以下にコメントしてください。ありがとう、あなたの「呐喊教程」へのサポートに感謝します。

基礎教程