在將html轉成圖片這個領域,Html2Image這個工具使用率是不低的。但是這個工具有個明顯的坑。
一、當你的html頁面引入外部的CSS文件以及JS文件,生成的圖片是無法帶有這些動態效果的。也就是說,它不支持復雜的動態特性,只能支持寫在html代碼里的css效果。
二、當html代碼里帶有圖片時,生成的程序必須有一定的等待時間,否則生成的圖片就會是這樣的
如果你不想得到這樣的圖片,你需要設法在代碼生成圖片前讓程序等待一會,比如Thread.sleep(8000);

1 package htmlToImg; 2 3 import gui.ava.html.image.generator.HtmlImageGenerator; 4 5 public class HtmlToImgTest { 6 public static void main(String[] args) { 7 HtmlImageGenerator imageGenerator = new HtmlImageGenerator(); 8 // String html = "<div class=\"header\"><ul class=\"nav\"><li><a href=\"/getAllQuestion\">題庫管理</a>" 9 // + "<ul class=\"second-nav\"><li style=\"display:inline-block;width:800px;height:250px\"><a href=\"/getAllQuestion\">題目列表</a></li><li><a href=\"/getQuestion\">查找題目</a></li><li><a href=\"/addQuestionPage\">增加題目</a></li>" 10 // + "<li style=\"display: none\"><a href=\"#\">編輯題目</a></li><li style=\"display: none\"><a href=\"#\">刪除題目</a></li></ul></li></ul></div>"; 11 // String html = "<p class=\"tiy\"><a target=\"_blank\" href=\"/tiy/t.asp?f=csse_font_size_em_percent\">親自試一試</a></p>"; 12 String html = "<div style=\"width: 500px; height: 500px;\"><img src=\"http://car0.autoimg.cn/upload/spec/8090/u_20101129100303187264.jpg\" width=\"350\" height=\"233\"><a href=\"#\" style=\"color: red;\">testImage</a></div>"; 13 imageGenerator.loadHtml(html); 14 try { 15 // Thread.sleep(5000); 16 imageGenerator.getBufferedImage(); 17 Thread.sleep(8000); 18 } catch (InterruptedException e) { 19 e.printStackTrace(); 20 } 21 imageGenerator.saveAsImage("d:/car.png"); 22 imageGenerator.saveAsHtmlWithMap("hello-world.html", "d:/car.png"); 23 System.out.println("finish"); 24 } 25 }
這樣就得到了正常顯示的圖片了
初步估計是工具加載流未完成就進行圖片的生成以及保存工作,具體原因有時間再深究,先記錄下這個API的一些小瑕疵。