Html2Image轉換html成圖片的一些坑


  在將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 }
View Code

這樣就得到了正常顯示的圖片了

  初步估計是工具加載流未完成就進行圖片的生成以及保存工作,具體原因有時間再深究,先記錄下這個API的一些小瑕疵。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM