Phantomjsを使用して、HTML Webページを画像として出力します
I.背景
ミニプログラムで画像を生成し、友達のサークルと共有する方法は？現在、フロントエンドに対する良い解決策はないようであるため、バックエンドによってのみサポートできます。では、どのようにプレイできますか？
写真を生成するのは簡単です
簡単なシナリオでは、JDKを直接使用してサポートできます。一般的に言えば、あまり複雑なロジックはありません。
私は以前に画像統合のロジックを書き、AWTを使用して実装しました：画像統合
一般的な複雑なテンプレート
単純なものは直接サポートできますが、より複雑なものは、より複雑なものであり、バックエンドにサポートすることは間違いなく嫌です。また、GitHubでHTMLをレンダリングするために、いくつかのオープンソースライブラリを検索しました。それが間違った姿勢か何かなのかはわかりませんが、あまり満足のいく結果はありませんでした。
今すぐ複雑なテンプレートをサポートする方法は？
つまり、この記事のガイドは、Phantomjsを使用してHTMLレンダリングを実現し、PDFの生成、写真の生成、および解析DOMをサポートしています。次に、Phantomjsを組み合わせてWebページを構築して写真にレンダリングする方法を示します。
ii。前提条件の準備
1。Phantom.jsインストール
＃1をダウンロード## Mac System wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## Linux System Wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1.1.1.1-linux-x86_64.tar.bz2## Windows System ##はもうプレイしないでください。エラーが発生し、次の#yum -y bzip2＃3をインストールします。##を簡単にインストールするには、Bin Directory Phantomjs-2.1.1.1.1.1-Linux-X86_64/bin/Phantomjs/usr/bin＃4に移動します。
2。Java依存関係の構成
Maven構成は依存関係を追加します
<！ - phantomjs-> <dependency> groupid> org.seleniumhq.selenium </groupid> <artifactid> selenium-java </artifactid> <バージョン> 2.53.1 </version> </dependency> <依存関係> <依存症> <groupid> com.github.detro <バージョン> 2.1.0 </version> </dependency> <repositories> <repository> <id> jitpack.io </id> <url> https://jitpack.io </url> </repository> </repositories>
始める
HTMLレンダリング画像を実装するために主にPhantomjsを呼び出す論理は次のとおりです
パブリッククラスhtml2imagebyjswrapper {private static phantomjsdriver webdriver = getphantomjs（）; private static phantomjsdriver getphantomjs（）{//必要なパラメーターの設定希望のキャピリティdcaps = new desiredcapability（）; // SSSL証明書はdcaps.setcapability（ "Acceptsslcerts"、true）をサポートしています。 //スクリーンスクリーンショットはdcaps.setcapability（ "takesscreenshot"、true）をサポートします。 // css検索サポートdcaps.setcapability（ "cssselectorsenabled"、true）; // jsはdcaps.setjavascriptenabled（true）をサポートします。 //ドライバーサポート（2番目のパラメーターは、Phantomjsエンジンが配置されているパス、/whereis phantomjsを表示します） 「/usr/local/bin/phantomjs」）; //インターフェイスレスブラウザオブジェクトを作成して、新しいPhantomjsdriver（DCAPS）を返します。 } public static bufferedimage renderhtml2image（string url）throws ioexception {webdriver.get（url）; file file = webdriver.getScreenshotas（outputType.file）; 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（））; }}@testpublic 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。ネットワークテスト
Alibaba Cloud Serverに簡単なWebアプリケーションが展開され、HTML出力写真の機能がサポートされました。私はbe食バージョンを購入し、使用したフロントエンドテンプレートは涼しく、ゆっくりと開きました。
オペレーションデモ：
V.プロジェクト
プロジェクトアドレス：
クイックメディア
QuickMediaは、グラフィック、テキスト、オーディオ、ビデオ、QRコード処理、その他のマルチメディアサービスに焦点を当てたオープンソースプロジェクトです。
上記のコードは私たちのコードによってテストされています。まだ議論する必要があるか理解していない場合は、以下にメッセージを残すことができます。 wulin.comへのご支援ありがとうございます。