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 没有赋值，为什么，请赐教