位置: 编程技术 - 正文
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例(jquery jwt)
编辑：rootadmin推荐整理分享jquery.Jcrop结合JAVA后台实现图片裁剪上传实例(jquery jwt)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery orgchart,jsoup jquery,java中jquery,jquery.validator,jquery jwt,jqueryprev,jquery jwt,jquery jwt,内容如对您有帮助，希望把文章链接给更多的朋友！
本文介绍了头像裁剪上传功能，用到的技术有 jQuery，springmvc，裁剪插件用的是jcrop（中间遇到很多坑，最终跨越）。
图片上传步骤：
1.用户选择图片
2.将图片传入后台：用户选择图片的时候选择的是各种各样的，但是我们的网页显示图片大小是有限的，所以我们就要在用户选择图片之后将图片添加到后台进行压缩，压缩成我们想要的大小，之后再显示到页面才好
3.利用jcrop裁剪工具对图片进行裁剪并且实时预览
4.点击确定按钮将裁剪用到的参数传入后台，后台图片进行剪切，之后缩放成我们需要的格式
5.最后将图片路径传到前台进行展示
前台页面代码为：
1.选择图片
2.提交：首先大家知道文件上传的时候用到的标签为：<input type="file"/> 但是有时候我们需要用ajax提交文件并且异步提交，我们如果是用form表单提交的话就不是异步，这样我们回到页面就刷新页面，非常的不方便，但是现在ajax还不能支持文件提交的方式，这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件，代码为：
这样就能将文件用ajax的方式提交到后台，注意这里用的是ajaxSubmit，这个方法对应jquery-form.js，后台代码为：
我在这规定图片在前台展示的大小为*，用到的图片裁剪压缩等的工具类为：
这样就将图片要裁剪的图片路径返回页面展示
3.之后就是图片裁剪了，图片裁剪功能我找了好多插件，最后锁定jcrop，也是因为它的demo打动了我(太好看了),之后就是导入文件，在我这里，我在页面接收后台返回来的图片路径之后启用jcrop，也就是openJcrop（）方法，这样就可以加载jcrop插件了，具体大家想进一步了解这个裁剪工具，请到官网细细的研究，我就不再做过多的谈论了。
大家注意，在这里有个大坑，真的是大坑，就是重新选择图片的时候，被jcrop加载过的img的src是不能被修改的，这个当初卡了我好长时间，被jcrop加载一次jcrop就会生成一个自己的编辑对象（我自己的理解），这时候就和原来的img没有关系了，直到最后细细研究api才找到了一个方法，唯一的方法就是将这个jcrop销毁，就是jcrop_api.destroy(),这个有很大的学问，我就提示一点，就是将jcrop_api声明为全局变量，下面贴出js代码（和上边的html是在一个文件下）：
这样我们就完成了编辑功能，之后我们点击提交就会将w,h,x,y参数传到后台。
标签: jquery jwt
本文链接地址:https://www.jiuchutong.com/biancheng/379298.html 转载请保留说明！