jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

前端之家收集整理的这篇文章主要介绍了jquery.Jcrop结合JAVA后台实现图片裁剪上传实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了头像裁剪上传功能,用到的技术有 jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越)。

图片上传步骤:

1.用户选择图片

2.将图片传入后台用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户选择图片之后将图片添加后台进行压缩,压缩成我们想要的大小,之后再显示页面才好

3.利用jcrop裁剪工具对图片进行裁剪并且实时预览

4.点击确定按钮将裁剪用到的参数传入后台后台图片进行剪切,之后缩放成我们需要的格式

5.最后将图片路径传到前台进行展示

前台页面代码为: