欢迎来到 IT实训基地-南通科迅教育
咨询电话:0513-81107100
将html页面转换成图片
2016/4/13
南通科迅教育
669
南通零基础IT培训学校费用
 

问题分析:需要根据用户选择的不同游戏,不同年份来生成带有不同描述规则的一张图片,如果利用java去画这张图片,显然很不靠谱,利用一些开源的图形工具,都是在原有图片的基础上去修改,没有根据指定规则去生成的。经过调研和探讨,觉得freemarker可以定制自己想要的样式模板,如果先用freemarker定制的模板去生成一个静态的html页面,然后再将这个html页面转换一张图片,这样做不就可以生成指定样式的图片了么,但是如何将html转换成图片呢。网上有很多写好的代码实现,但是经过测试,这些代码都无法解析html页面的动态css样式和js,导致生成的图片和静态页面不统一,包括开源的html2image jar包,效果都不符合项目的需求。

解决方案:通过freemarker定制好的模板去生成静态页面,利用开源的wkhtmltoimage软件去截取静态页面,由于是截屏,所以会保留静态页面的所有样式。wkhtmltoimage是完全开源免费的,安装简单,好用。

应用场景:需求上根据用户的不同行为,从而产生不用的效果图片,建议用此方法。

第一步:定制模板

根据需求制作相应的ftl模板页面,因不同需求模板样式不同,固此处省略编写。

第二部:生成静态html页面,调用wk命令生成图片

模板+数据=输出,依照这个原理,加载模板,处理数据,输出一个静态页面。[java]  

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方法如下:

[java]  

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);  

}  

上述

[java]  

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页面转换成图片啦。

77
关闭
先学习,后交费申请表
每期5位名额
在线咨询
免费电话
QQ联系
先学习,后交费
TOP
您好,您想咨询哪门课程呢?
关于我们
机构简介
官方资讯
地理位置
联系我们
0513-91107100
周一至周六     8:30-21:00
微信扫我送教程
手机端访问
南通科迅教育信息咨询有限公司     苏ICP备15009282号     联系地址:江苏省南通市人民中路23-6号新亚大厦三楼             法律顾问:江苏瑞慈律师事务所     Copyright 2008-