问题分析：需要根据用户选择的不同游戏，不同年份来生成带有不同描述规则的一张图片，如果利用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页面转换成图片啦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="/blog_article/jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
#outDiv{
width:200px;
height:320px;
border:1px solid #000;
position:relative;
margin-left:10px;
margin-top:10px;
overflow:hidden;
}
ul{
list-style:none;
}
#ul1{
width:600px;
height:320px;
position:absolute;
}
#ul1 li{
float:left;
}
#ul2{
position:absolute;
}
#ul2 li{
position:absolute;
height:30px;
line-height:30px;
width:160px;
left:0px;
cursor:pointer;
}
.li1{
top:180px;
background-color:#ddd;
}
.li2{
top:210px;
background-color:#ccc;
}
.li3{
top:240px;
background-color:#999;
}
#ul2 li em{
position:absolute;
height:30px;
line-height:30px;
width:180px;
left:0px;
display:block;
padding-left:20px;
}
#ul2 li s{
position:absolute;
height:30px;
line-height:30px;
width:180px;
left:0px;
display:block;
padding-left:20px;
}
.active{
background:url(/1.gif) no-repeat 10px;
background-position:140px;
}
</style>
</head>
<body>
<div id="outDiv">
<ul id="ul1">
<li><img src="/blog_article/img1.jpg" /></li>
<li><img src="/blog_article/img2.jpg" /></li>
<li><img src="/blog_article/img3.jpg" /></li>
</ul>
<ul id="ul2">
<li >
<em>product1</em>
<s></s>
</li>
<li >
<em>product2</em>
<s></s>
</li>
<li >
<em>product3</em>
<s></s>
</li>
</ul>
</div>
<script>
/*
* 仿天猫图片展示效果1，
* 图片规格：320*200；
* ie8，ff，opera中测试可用，其余浏览器未测试；
****made by keimon ****2013-01-08****
*/
var outWidth = $('#outDiv').width();
var innerWidth = $('#innerDiv').width();
var liLen = $('#ul2 li').length;
for(var i=0; i<liLen; i++){
$('#ul2 li').mouseover(function(){
var itemEm = this;
var index = $('#ul2 li').index(itemEm);
var left = outWidth * index;
t = setTimeout(function(){
$('#ul2 li').stop().css('width','160px');
$('#ul2 li').eq(index).stop().animate({'width':'200px'},'slow');
$('#ul2 li s').removeClass('active').css('backgroundPosition','140px');
$('#ul2 li s').eq(index).addClass('active').stop().animate({'backgroundPosition':'180px'},'slow');
},100)
t = setTimeout(function(){
$('#ul1').stop().animate({'left':-left+'px'},'slow');
},99)
})
}
</script>
</body>
</html>
已有 0 人发表留言，猛击->>这里<<-参与讨论
ITeye推荐
- —软件人才免语言低担保 赴美带薪读研！—
应用开发人员创建Web应用，他给、销售或其他方式转入应用给部署人员，部署人员覆盖安装到运行时环境。应用开发人员与部署人员沟通部署系统的安全需求。该信息可以通过应用部署描述符声明传达，或者通过在应用代码中使用注解。
本质描述了Servlet容器安全机制、接口、部署描述符和基于注解机制用于传达应用安全需求。
13.1 介绍web应用包含的资源可以被多个用户访问。这些资源常常不受保护的遍历，开放网络如Internet。在这样的环境，大量的web应用将有安全需求。
尽管质量保障和实现细节可能会有所不同，但servlet容器有满足这些需求的机制和基础设施，共用如下一些特性：
■ 身份认证：表示通信实体彼此证明他们具体身份的行为是被授权访问的。
■ 资源访问控制：表示和资源的交互是受限于集合的用户或为了强制完整性、保密性、或可用性约束的程序。
■ 数据完整性：表示用来证明信息在传输过程中没有被第三方修改。
■ 保密或数据隐私：表示用来保证信息只对以授权访问的用户可用。
13.2 声明式安全声明式安全是指以在应用外部的形式表达应用的安全模型需求，包括角色、访问控制和认证需求。部署描述符是web应用中的声明式安全的主要手段。
部署人员映射应用的逻辑安全需求到特定于运行时环境的安全策略的表示。在运行时，servlet容器使用安全策略表示来实施认证和授权。
安全模型适用于web应用的静态内容部分和客户端请求到的应用内的servlet和过滤器。安全模型不适用于当servlet使用RequestDispatcher调用静态内容或使用forward或include到的servlet。
13.3 编程式安全当仅仅声明式安全是不足以表达应用的安全模型时，编程式安全被用于意识到安全的应用。
编程式安全包括以下HttpServletRequest接口的方法：
■ authenticate
■ login
■ logout
■ getRemoteUser
■ isUserInRole
■ getUserPrincipal
login方法允许应用执行用户名和密码收集（作为一种Form-Based Login的替代）。authenticate方法允许应用由容器发起在一个不受约束的请求上下文内的来访者请求认证。
logout方法提供用于应用重置来访者的请求身份。
getRemoteUser方法由容器返回与该请求相关的远程用户（即来访者）的名字。
isUserInRole方法确定是否与该请求相关的远程用户（即来访者）在一个特定的安全角色中。
getUserPrincipal方法确定远程用户（即来访者）的Principal名称并返回一个与远程用户相关的java.security.Principal对象。调用getUserPrincipal返回的Principal的getName方法返回远程用户的名字。这些API允许Servlet基于获得的信息做一些业务逻辑决策。
如果没有用户通过身份认证，getRemoteUser方法返回null，isUserInRole方法总返回false，getUserPrincipal方法总返回null。
isUserInRole方法需要一个字符串用户的角色名称参数。应该在部署描述符中声明一个security-role-ref元素，其有一个role-name子元素，包含了传递到方法的角色名称。security-role-ref元素可能包含一个role-link子元素，其值是用户可能会被映射到的安全角色名称。当决定返回调用值时，容器使用security-role-ref映射到的security-role。
例如，映射安全角色应用“FOO”到role-name为"manager"的安全角色的语法是：
<security-role-ref> <role-name>FOO</role-name> <role-link>manager</role-link> </security-role-ref>
在这种情况下，如果属于“manager”安全角色的用户调用了servlet，则调用isUserInRole("FOO") API的结果是true。
如果匹配security-role元素的security-role-ref元素没有声明，容器默认必须参照security-role元素列表去检查role-name元素参数。isUserInRole方法参考该列表以确定调用者是否映射到一个安全角色。开发人员必须注意，使用默认机制可能限制了在应用中改变角色名称不必重新编译发起调用的servlet的灵活性。
13.4 编程式访问控制注解本章定义的注解和API提供用于配置Servlet容器强制的安全约束。
13.4.1 @ServletSecurity注解@ServletSecurity提供了用于定义访问控制约束的另一种机制，相当于那些通过在便携式部署描述符中声明式或通过ServletRegistration接口的setServletSecurity方法编程式表示。Servlet容器必须支持在实现javax.servlet.Servlet 接口的类（和它的子类）上使用@ServletSecurity注解。
package javax.servlet.annotation;
@Inherited
@Documented
@Target(value=TYPE)
@Retention(value=RUNTIME)
public @interface ServletSecurity {
HttpConstraint value();
HttpMethodConstraint[] httpMethodConstraints();
}
表 13-1 ServletSecurity接口
元素
描述
默认值