Struts2 图片上传、缩放、剪切处理 第二节
Struts2 图片上传、缩放、剪切处理 第一节
Struts2 图片上传、缩放、剪切处理 第二节
1、技术目标：
?
对上传的图片进行缩放、剪切操作?
提示：本文示例项目已提供下载
2、处理流程：
1）在影片列表页面(films.jsp)点"修改"进入影片修改页面，如图：
?
?
2）在影片修改页面(update.jsp)中双击图片，进入图片缩放、剪切处理页面(imgscissor.jsp)，如图，
?
update.jsp效果图：
?
?
imgscissor.jsp效果图：
?
3）在imgscissor.jsp页面中设置图片的缩放宽度、高度，如图，
提示：影片"刀见笑"海报图片原有尺寸为92(宽)*130(高)，压缩为60 * 100
压缩前效果图：
4）在imgscissor.jsp页面中使用jQuery图片剪切插件"imgAreaSelect"对图片进行剪切操作，如图，
剪切前效果图：
?
5）采用ajax方式将图片的缩放、剪切参数提交给Action进行处理
6）服务器Action根据页面设置的参数对图片进行如下处理：
?
采用java-image-scaling-0.8.5.jar提供的功能对图片进行缩放处理采用javax.imageio以及java.awt提供的功能对图片进行剪切处理?
7）用处理好的图片替换原有的图片，服务器Action返回处理结果，页面提示处理结果并显示处理后的图片，如图，
压缩后效果图：
剪切后效果图：
?
?
注意：第二步、第三步处理可同时进行
?
?
3、使用准备
3.1）站点根路径下创建js文件夹，导入如下js、css文件：
jquery.js? ? ? ? ?版本：v1.4.2
jquery.tooltip.css?jQuery信息提示插件样式
jquery.tooltip.js?jQuery信息提示插件
jquery.form.js?jQuery表单插件
loading.gif? ? ? ? ?进度提示图片
jquery.loadmask.css?jQuery窗口屏蔽插件样式
jquery.loadmask.js?jQuery窗口屏蔽插件
3.2）导入jQuery插件imgareaselect
在js文件夹下创建文件夹imgareaselect，imgareaselect下再创建css文件夹，imgareaselect下导入如下文件：
jquery.imgareaselect.js jQuery图片剪切插件
imgareaselect/css下导入如下文件(图片剪切插件所选样式与图片素材)：
border-anim-h.gif
border-anim-v.gif
border-h.gif
border-v.gif
imgareaselect-animated.css
imgareaselect-default.css
imgareaselect-deprecated.css
提示：imgareaselect插件的详细信息可访问
http://odyniec.net/projects/imgareaselect/examples.html#fixed-aspect-ratio
3.3）导入相关的jar包
gson-1.5.jar将Java对象转换成JSON
java-image-scaling-0.8.5.jar图片压缩工具
提示：对gson的使用有兴趣的可参看
http://hotstrong.iteye.com/blog/1164379
4、给影片修改页面(update.jsp)加入如下两处代码
注意：图片的缩放、剪切操作将从update.jsp开始
4.1）导入相关js、css文件
?
?
??
?
提示：imgscissor.js将在后续创建
4.2）为img标签加入scissor类样式，如下：
?
?
??
修改后的update.jsp如下：
?
?
?
?
?
5、在js文件夹下创建imgscissor.js，用于处理"双击图片"向Action提交请求并进入图片缩放、剪切页面，代码如下：
?
?
??
6、在manager文件夹下创建jsp文件imgscissor.jsp(图片压缩、剪切操作页面)，压缩、剪切操作完成后将参数异步发送给ImageScissorAction，代码如下：
?
?
??
?
7、在com.xxx.util包下创建图片处理工具类ImageUtil，提供图片的压缩(scaleImage)、剪切(scissor)处理方法，代码如下：
?
?
?
?
8、在com.xxx.web.struts.action包下创建ImageScissorAction控制器，负责接收页面参数调用ImageUtil执行图片压缩、剪切操作，代码如下：
?
?
?
??
9、在applicationContext-actions.xml中配置ImageScissorAction，由Spring管理，配置如下：
?
?
牛人
程序在
/MyBatiesTest5/src/com/xxx/web/struts/action/ImageScissorAction.java
中：
originPath = originPath.substring(originPath.indexOf("/images"));
报空指针异常， debug 下看到是originPath 没有赋值，为什么，请赐教
