项目中有上传头像功能,需要对上传的图片进行截取,原来使用的是Flash插件上传,但是不可控制。最后看到这个Jcrop组件还不错,就尝试用了一下感觉还不错的!这里分享给大家
先说明下我搭建的环境是:springMVC+spring+mybatis。下面直接上代码:
一、jsp页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<
form
name
=
"form"
action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage" class="form-horizontal"
method="post" enctype="multipart/form-data">
<
div
class
=
"modal-body text-center"
>
<
div
class
=
"zxx_main_con"
>
<
div
class
=
"zxx_test_list"
>
<
input
class
=
"photo-file"
type
=
"file"
name
=
"imgFile"
id
=
"fcupload"
onchange
=
"readURL(this);"
/>
<
img
alt
=
""
src
=
""
id
=
"cutimg"
/>
<
input
type
=
"hidden"
id
=
"x"
name
=
"x"
/>
<
input
type
=
"hidden"
id
=
"y"
name
=
"y"
/>
<
input
type
=
"hidden"
id
=
"w"
name
=
"w"
/>
<
input
type
=
"hidden"
id
=
"h"
name
=
"h"
/>
</
div
>
</
div
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
id
=
"submit"
onclick
=
""
>上传</
button
>
</
div
>
</
form
>
|
二、jcrop组件引用情况:
1
2
3
|
<
link
rel
=
"stylesheet"
href
=
"<c:url value="
/resources/uploadPlugin/css/jquery.Jcrop.css"/>" type="text/css"></
link
>
<
script
type
=
"text/javascript"
src
=
"<c:url value="
/resources/uploadPlugin/scripts/jquery-1.8.3.js"/>"></
script
>
<
script
type
=
"text/javascript"
src
=
"<c:url value="
/resources/uploadPlugin/scripts/jquery.Jcrop.js"/>"></
script
>
|
三、jcrop使用方法:(有两种,先说我使用的,最后在介绍两种方法的不同之处)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<script type=
"text/javascript"
>
//定义一个全局api,这样操作起来比较灵活
var
api =
null
;
function
readURL(input) {
if
(input.files && input.files[0]) {
var
reader =
new
FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload =
function
(e) {
$(
'#cutimg'
).removeAttr(
'src'
);
$(
'#cutimg'
).attr(
'src'
, e.target.result);
api = $.Jcrop(
'#cutimg'
, {
setSelect: [ 20, 20, 200, 200 ],
aspectRatio: 1,
onSelect: updateCoords
});
};
if
(api != undefined) {
api.destroy();
}
}
function
updateCoords(obj) {
$(
"#x"
).val(obj.x);
$(
"#y"
).val(obj.y);
$(
"#w"
).val(obj.w);
$(
"#h"
).val(obj.h);
};
}
</script>
|
四、后台代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
@RequestMapping
(value =
"/uploadHeadImage"
)
public
String uploadHeadImage(
HttpServletRequest request,
@RequestParam
(value =
"x"
) String x,
@RequestParam
(value =
"y"
) String y,
@RequestParam
(value =
"h"
) String h,
@RequestParam
(value =
"w"
) String w,
@RequestParam
(value =
"imgFile"
) MultipartFile imageFile
)
throws
Exception{
System.out.println(
"==========Start============="
);
String realPath = request.getSession().getServletContext().getRealPath(
"/"
);
String resourcePath =
"resources/uploadImages/"
;
if
(imageFile!=
null
){
if
(FileUploadUtil.allowUpload(imageFile.getContentType())){
String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename());
int
end = fileName.lastIndexOf(
"."
);
String saveName = fileName.substring(
0
,end);
File dir =
new
File(realPath + resourcePath);
if
(!dir.exists()){
dir.mkdirs();
}
File file =
new
File(dir,saveName+
"_src.jpg"
);
imageFile.transferTo(file);
String srcImagePath = realPath + resourcePath + saveName;
int
imageX = Integer.parseInt(x);
int
imageY = Integer.parseInt(y);
int
imageH = Integer.parseInt(h);
int
imageW = Integer.parseInt(w);
//这里开始截取操作
System.out.println(
"==========imageCutStart============="
);
ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);
System.out.println(
"==========imageCutEnd============="
);
}
}
return
"user/uploadImg/test"
;
}
|
五、ImageCut.Java工具类:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/**
* 截取图片
* @param srcImageFile 原图片地址
* @param x 截取时的x坐标
* @param y 截取时的y坐标
* @param desWidth 截取的宽度
* @param desHeight 截取的高度
*/
public
static
void
imgCut(String srcImageFile,
int
x,
int
y,
int
desWidth,
int
desHeight) {
try
{
Image img;
ImageFilter cropFilter;
BufferedImage bi = ImageIO.read(
new
File(srcImageFile+
"_src.jpg"
));
int
srcWidth = bi.getWidth();
int
srcHeight = bi.getHeight();
if
(srcWidth >= desWidth && srcHeight >= desHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
cropFilter =
new
CropImageFilter(x, y, desWidth, desHeight);
img = Toolkit.getDefaultToolkit().createImage(
new
FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag =
new
BufferedImage(desWidth, desHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img,
0
,
0
,
null
);
g.dispose();
//输出文件
ImageIO.write(tag,
"JPEG"
,
new
File(srcImageFile+
"_cut.jpg"
));
}
}
catch
(Exception e) {
e.printStackTrace();
}
}
|
六、jcrop的两种使用方式:
1、jQuery('#cropbox').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
2、var api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
这 里推荐大家使用第二种方式,将Jcrop生成的对象赋给一个全局变量,这样操作起来更灵活,如调用api.destroy();方法可以销毁 Jcorp,这样我们在实际使用中会更灵活一些,因为直接改变要裁剪图片的路径会导致Jcorp的出错,如果想要变更编辑的图片我们需要销毁Jcorp, 变更图片的属性后再次为图片附加Jcorp。