I. 背景
ミニ プログラムで画像を生成し、友達と共有するにはどうすればよいですか?現時点ではフロントエンドに良い解決策がないようで、バックエンドでしか対応できないようですが、どうすれば再生できるのでしょうか?
画像の生成は比較的単純です
単純なシーンは jdk を使用して直接サポートできますが、一般的に言えば、それほど複雑なロジックはありません
ロジックの前に画像合成を作成しました。 awt を使用して実装: 画像合成
一般的で複雑なテンプレート
単純なものは直接サポートできますが、より複雑なものについては、バックエンドにサポートさせるほうが間違いなく不快です。 github でも入手可能です。HTML をレンダリングするためにいくつかのオープン ソース ライブラリを検索しましたが、姿勢が間違っているのか、それとも何かが原因なのかはわかりませんが、あまり満足のいく結果が得られませんでした。
さて、どうすればよいでしょうか複雑なテンプレートをサポートしていますか?
これは、phantomjs を使用して HTML レンダリングを実装し、PDF の生成、画像生成、および dom 解析をサポートする、この記事のガイドです。次に、phantomjs を組み合わせて Web をレンダリングするサービスを構築する方法を示します。ページを画像に変換
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>
Start
主に 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); } }
テスト ケース
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>生成された画像実際のテストのために私の Web サイトに直接アクセスできます</p><p><strong>III. ネットワークの実測測定</strong></p><p>単純な Web アプリケーションがHTML 出力画像をサポートする Alibaba Cloud サーバー 機能; 乞食バージョンを購入し、クールなフロントエンド テンプレートを使用したため、開くのが遅かったです。</p><p>動作デモ:</p><p><img src="https://img.php.cn/upload/article/000/465/014/168385291276280.gif" alt="PhantomJs を使用して Java で HTML 画像出力機能を完成させる方法"></p>
以上がPhantomJs を使用して Java で HTML 画像出力機能を完成させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。