1. 程式人生 > >java把html轉成圖片的方法

java把html轉成圖片的方法

  1. 程式碼

1.1 html模版

static String HtmlTemplateStr =

"<style type=\"text/css\">"+  

"body {background-color: yellow}"+

"h1 {background-color: #00ff00}"+

"h2 {background-color: transparent}"+

"p {background-color: rgb(250,0,255)}"+

"p.no2 {background-color: gray; padding: 20px;}"+

"</style>"+

"<img src=\"http://p1.img.cctvpic.com/photoAlbum/page/performance/img/2018/8/21/1534782617583_424.jpg\" width=\"660\" height=\"380\" alt=\"cctv.com圖片\" />"+

"<h1>我是h1標題</h1>"+

"<div id=\"\" class=\"\">"+

"<img src=\"http://115.182.9.166/cportal/photoAlbum/page/performance/img/2017/5/26/1495792113125_553.jpg\" width=\"480\" height=\"300\" alt=\"cportal圖片\" />"+

"<h1>這是標題 1</h1>"+

"<h2>這是標題 2</h2>"+

"<p>這是段落</p>"+

"<p class=\"no2\">這個段落設定了內邊距。</p>"+

"<input type=\"button\" value=\"1\" onclick=\"點我\" />"+

"<input type=\"text\" id=\"ww\" name=\"\" value=\"hahahah\"/>"+

"</div>"+

"<table border=\"1\" background=\"http://www.w3school.com.cn/i/eg_bg_06.gif\">"+

"<tr>"+

  "<th>Month</th>"+

  "<th>Savings</th>"+

"</tr>"+

"<tr>"+

  "<td>January</td>"+

  "<td><p>這是第一行</p></td>"+

"</tr>"+

"<tr>"+

  "<td><img src=\"http://p1.img.cctvpic.com/photoAlbum/page/performance/img/2018/8/21/1534782617583_424.jpg\" width=\"660\" height=\"380\" alt=\"cctv.com圖片\" /></td>"+

  "<td><h1>這是第二行</h1></td>"+

"</tr>"+

"</table>"+

"<p>有序列表:</p>"+

"<ol>"+

"<li>開啟冰箱門</li>"+

"<li>把大象放進去</li>"+

"<li>關上冰箱門</li>"+

"</ol>"+

"<p>無序列表:</p>"+

"<ul>"+

"<li>雪碧</li>"+

"<li>可樂</li>"+

"<li>涼茶</li>"+

"</ul>";

1.2 引用的轉換工具jar包

import gui.ava.html.image.generator.HtmlImageGenerator;

1.3 主要轉換程式碼邏輯

import gui.ava.html.image.generator.HtmlImageGenerator;  

public class Html2ImageTest {

static String htmlTemplate = HtmlTemplate.HtmlTemplateStr;

    public static void main(String[] args) {  

        HtmlImageGenerator imageGenerator = new HtmlImageGenerator();  

        //載入html模版

        imageGenerator.loadHtml(htmlTemplate);

        //把html寫入到圖片

        imageGenerator.saveAsImage("hello-world.png");  

       }  

}

  1. 轉換耗時

簡單的html頁面0.3-0.5秒之間;

稍複雜點的頁面在0.9秒甚至更多一點。

  1. 轉換結果圖片

使用cctv.com和cportal的圖片可正常顯示,使用百度相簿、一些素材庫網如17sucai的圖片不可正常顯示。

  1. 結果評估
  1. 大部分常用的Html元素如h1、p、div、img、table、li、lu等可帶樣式轉換成功,目前常用的input標籤轉換不成功,在生成的圖片中不顯示。圖片大小顯示正常。
  2. 轉換耗時在0.3-1秒之間,可接受,不影響使用者體驗。