將html頁面轉換成圖片

問題分析：需要根據用戶選擇的不同遊戲，不同年份來生成帶有不同描述規則的一張圖片，如果利用java去畫這張圖片，顯然很不靠譜，利用一些開源的圖形工具，都是在原有圖

片的基礎上去修改，沒有根據指定規則去生成的。經過調研和探討，覺得freemarker可以定製自己想要的樣式模板，如果先用freemarker定製的模板去生成一個靜態的html頁面，

然後再將這個html頁面轉換一張圖片，這樣做不就可以生成指定樣式的圖片了麼，但是如何將html轉換成圖片呢。網上有很多寫好的代碼實現，但是經過測試，這些代碼都無法解

析html頁面的動態css樣式和js，導致生成的圖片和靜態頁面不統一，包括開源的html2image jar包，效果都不符合項目的需求。

解決方案：通過freemarker定製好的模板去生成靜態頁面，利用開源的wkhtmltoimage軟件去截取靜態頁面，由於是截屏，所以會保留靜態頁面的所有樣式。wkhtmltoimage是完

全開源免費的，安裝簡單，好用。

應用場景：需求上根據用戶的不同行爲，從而產生不用的效果圖片，建議用此方法。

第一步：定製模板

根據需求製作相應的ftl模板頁面，因不同需求模板樣式不同，固此處省略編寫。

第二部：生成靜態html頁面，調用wk命令生成圖片

模板+數據=輸出，依照這個原理，加載模板，處理數據，輸出一個靜態頁面。

 

public void createSpaceImage(Configuration config) throws Throwable {
		//靜態頁面絕對路徑
		String htmlDirectory = "";
		String imageDirectory = "";

		String templatePath = "";
		String htmlFileName = htmlDirectory + "/" + 文件名+".html";
		String imageFileName = imageDirectory + "/" + 文件名+".png";
		
		File htmlFile = new File(htmlFileName);
		if (!htmlFile.getParentFile().exists()) {
			htmlFile.getParentFile().mkdirs();
		}
		if (!htmlFile.exists()) {
			htmlFile.createNewFile();
		}
		File imageFile = new File(imageFileName);
		if (!imageFile.getParentFile().exists()) {
			imageFile.getParentFile().mkdirs();
		}
		config.setNumberFormat("#");

		// 根據模板和數據生成靜態HTML
		Template template = config.getTemplate(templatePath, "UTF-8");
		Writer out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(htmlFile), "UTF-8"));
		Map<String,Object> data = new HashMap<String,Object>();

		template.process(data, out);
		
		// 根據靜態HTMl生成圖片 htmlFileName 靜態頁面路徑 imageFileName 圖片路徑  尺寸

		HtmlToImage.html2Image(htmlFileName, imageFileName, 600, 400);
		
	}

方法參數需要根據實際情況進行改寫，用來做數據處理。

其中html2Image方法如下：

 

	public static void html2Image(String filePath, String targetPath, int i,
			int j) throws Throwable {
		String command = ApplicationConfig.getValue("annalsImage.command");
		command = command + " --crop-w " + i + " --crop-h " + 
				j + "  " + filePath + " " + targetPath;
		Runtime.getRuntime().exec(command);
	}

上述

String command = ApplicationConfig.getValue("annalsImage.command");

其中command 是wkhtmltoimage的命令，在linux下可以接上下文路勁，也可配置環境變量。

第三步：wkhtmltoimage下載安裝

 

　　(1) 下載

　　$wget

http://wkhtmltopdf.googlecode.com/files/wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2

　　or

　　$wget

http://wkhtmltopdf.googlecode.com/files/wkhtmltoimage-0.11.0_rc1-static-amd64.tar.bz2

　　注：使用 如下命令決定需要下載的版本：

　　$uname -a

　　(2) 解壓安裝

　　Wkhtmltoimage 是一個可執行文件，解壓出來即可運行，解壓到某個路徑下後，需要配置環境變量，使該可執行文件在任意路徑下調用均可用。

　　解壓命令如下：

　　$tar -jxvf wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2

　　or

　　$tar -jxvf wkhtmltoimage-0.11.0_rc1-static-amd64.tar.bz2

　　(3) 運行

　　$./wkhtmltoimage-i386 www.baidu.com baidu.jpg

　　(4) 環境要求

　　保證系統字體爲UTF-8，使用如下命令查看系統字體：

　　$at /etc/sysconfig/i18n

　　我的電腦的顯示結果爲：

　　LANG="zh_CN.UTF-8"

　　必須安裝 glibc 和 openssl

　　必須安裝 x11 以及 正確的 x11 fonts

　　使用如下命令：

　　rpm -qa|grep x11

　　需要安裝的字體：

　　xorg-x11-font-utils-...

　　xorg-x11-fonts-Type1-...

　　xorg-x11-fonts-chinese-…

安裝成功之後，就可以用以上方式將html頁面轉換成圖片啦。