jquery.Jcrop结合结合JAVA后台实现图片裁剪上传实例后台实现图片裁剪上传实例
本文介绍了头像裁剪上传功能,用到的技术有 jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越)。
图片上传步骤:
1.用户选择图片
2.将图片传入后台:用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户
选择图片之后将图片添加到后台进行压缩,压缩成我们想要的大小,之后再显示到页面才好
3.利用jcrop裁剪工具对图片进行裁剪并且实时预览
4.点击确定按钮将裁剪用到的参数传入后台,后台图片进行剪切,之后缩放成我们需要的格式
5.最后将图片路径传到前台进行展示
前台页面代码为:
<script src="js-jcrop/jquery.min.js"></script>
<script src="js-jcrop/jquery.Jcrop.js"></script>
<script src="js/jquery-form.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
/* 控制预览区域大小*/
#preview-pane .preview-container {
width: 110px;
height: 110px;
overflow: hidden;
}
#targetDiv{
width: 400px;
height: 400px;
background-color:#f7fdff;
}
</style>
<dl class="dialogBox D_uploadLogo">
<dt class="dialogHeader">
<span class="title">头像上传</span>
</dt>
<dd class="dialogBody">
<dl class="bisinessLogo">
<dt class="title">预览</dt>
<dd class="img">
<div id="preview-pane">
<div class="preview-container">
<img src="" id="target2" class="jcrop-preview" alt="未选择图片" />
</div>
</div>
</dd>
<dd class="tc">尺寸:110*110px</dd>
</dl>
<dl class="bisinessInfo">
<dt class="btnBox02">
<form id="fileUp" action="/file/img/upload" method="post" enctype="multipart/form-data" target="ifm">
<a class="btnGray" href="javascript:;">
<span class="text" id="format">选择图片</span>
<b class="bgR"></b>
<input type="file" id="file_upload" class="inputFile" name="userphoto"/>
<input type="hidden" id="w" name="w"/>
<input type="hidden" id="h" name="h"/>
<input type="hidden" id="x" name="x"/>
<input type="hidden" id="y" name="y"/>
</a>
</form>
</dt>
<dd class="info">
请从本地选择一张照片,支持jpg,png格式 <span id="msg"></span>