相关文章
更多最近更新
更多使用jcrop+springmvc实现头像上传与裁剪源码
2019-03-26 11:12|来源: 领悟书生
前天实现了使用jcrop+springmvc实现头像上传与裁剪,发布之后,有些人还是需要源码的。
1.先上传一张源图,上传后我把他等比例压缩成300*300大小。
<div style="float: left;margin-left: 50px;"> <form id="upload-form" target="upload_target" method="post" action="/member/uploadAvatar" enctype="multipart/form-data"> <input type="file" name="file"/> <button type="submit" id='upload-avator' class="pn pnc" value="true"> <strong>上传</strong> </button> </form> <iframe id="upload_target" name="upload_target" src="" style="display:none"></iframe> </div>
上传其实是上传到id=upload_target的iframe中,所以才不会出现刷新。
上传的ajax方法
$('#upload-form').submit(function(e) { $('#upload_target').one('load', function() { var ret = $('body', frames['upload_target'].document).html(); var data = eval("(" + ret + ")"); if (data.success == true) { var imageUrl = "/xxxx/xxxx/"+data.imgUrl+"?"+new Date(); $('#cropcontainer').empty(); $('#cropcontainer').append('<img id="cropbox" src="" />'); $('#cropbox').attr('src', imageUrl); $('#preview').attr('src', imageUrl); $('#imgName').val(data.imgUrl); $("#cropbox").Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 1, setSelect: [ 60, 60, 240, 240 ] }); } else { alert("Upload Failed!"); } }); });
知道为什么在返回的图片URL中我加了一个日期的参数不?因为一个用上传上去的图片保存名称是一样的,也就是覆盖之前的,所以返回来是一样,有时会出现不刷新的情况。
这里还要说的一咪,就是
$("#cropbox").Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 1, setSelect: [ 60, 60, 240, 240 ] });
要使用Jcrop,要引入以下两个文件,css不一定要引入,但是引入后效果会好看一些
<link rel="stylesheet" type="text/css" href="/resources/jcrop/css/jquery.Jcrop.min.css" />
<script type="text/javascript" src="/resources/jcrop/js/jquery.Jcrop.min.js"></script>
setSelect是图片加载后,会默认选中的一个区域
如果重新选择或者改变选框的大小时,会执行showPreview
function showPreview(coords) { var rx = 180 / coords.w; var ry = 180 / coords.h; $('#preview').css({ width : Math.round(rx * $("#cropbox").width()) + "px", height : Math.round(rx * $("#cropbox").height()) + "px", marginLeft: '-' + Math.round(rx * coords.x) + 'px', marginTop: '-' + Math.round(ry * coords.y) + 'px' }); $('#x').val(coords.x); $('#y').val(coords.y); $('#w').val(coords.w); $('#h').val(coords.h); };
这个function,就是获取原图片(cropbox)中的位置,显示在预览框中
<div style="border: 1px solid #ccc;height: 180px; width: 180px;overflow: hidden;"> <img id="preview" src=''> </div>
图片也选择好,也在预览中看到了,就到保存了
看到上面代码中有以下四个赋值吗?他们就是给一个表单中的元素赋值
$('#x').val(coords.x); $('#y').val(coords.y); $('#w').val(coords.w); $('#h').val(coords.h);
请看保存表单的代码?
<form action="/member/cropAvator" method="post"> <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" /> <input type="hidden" id="imgName" name="imgName" /> <button id="submit-avatar" class="pn pnc" value="true"> <strong>保存</strong> </button> </form>
再来看看表单提交的代码:
$('#submit-avatar').click(function(e) { e.preventDefault(); var form = $(this).closest('form'); $.ajax({ type: 'POST', url: form.attr('action'), dataType: 'json', data: form.serialize(), success: function(data) { if (data.success == true) { var imageUrl = "/xxx/xxx/"+data.obj+"?"+new Date(); $('#preview').attr('src', imageUrl); alert("保存成功!"); } else { alert("保存失败!"); } } }); return false; });
提交后,后面的事交给JAVA了,首先获取坐标,然后根据坐标把原图片截取想要的大小,由于网上关于JAVA操作图片的代码太多了,在这里就不贴代一了。
本文链接:使用jcrop+springmvc实现头像上传与裁剪源码,转载请注明出处:http://www.656463.com/article/505