1、导入相关css和js
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jcrop/jquery.Jcrop.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jcrop/common.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/check.js"></script> <script src="${pageContext.request.contextPath}/js/cutImg/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="${pageContext.request.contextPath}/js/cutImg/js/jquery.form.js" type="text/javascript"></script> <script src="${pageContext.request.contextPath}/js/cutImg/js/jquery-custom-file-input.js" type="text/javascript"></script> <script src="${pageContext.request.contextPath}/js/cutImg/js/jquery.Jcrop.js" type="text/javascript"></script> <script src="${pageContext.request.contextPath}/js/cutImg/js/jquery.rollbar.min.js" type="text/javascript"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/dialog/dialog.js?lib=false"></script>
2、相关功能js
//裁剪图像 function cutImage(){
$("#myOriginalImg").Jcrop( {// aspectRatio : 1,裁剪框比例 aspectRatio: 4/3, allowResize:true, allowSelect:true, bgFade:true, onChange : showCoords, onSelect : showCoords, minSize :[400,300] }, function () {//<img src="" id="myOriginalImg" alt="裁剪图片" name="fileUrl" style="display: none">
//初始化 jcrop_api = this; jcrop_api.animateTo([30, 40, 400,300]); }); } //简单的事件处理程序,响应自onChange,onSelect事件,按照上面的Jcrop调用 function showCoords(obj) { $("#x").val(obj.x); $("#y").val(obj.y); $("#w").val(obj.w); $("#h").val(obj.h); if (parseInt(obj.w) > 0) { //计算预览区域图片缩放的比例,通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到 var rx = $("#preview_box").width() / obj.w; var ry = $("#preview_box").height() / obj.h; //通过比例值控制图片的样式与显示,预览 $("#previewImg").css( { width : Math.round(rx * $("#srcImg").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积 height : Math.round(rx * $("#srcImg").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积 marginLeft : "-" + Math.round(rx * obj.x) + "px", marginTop : "-" + Math.round(ry * obj.y) + "px" }); } }
//文件上传,不裁剪,使用等比例压缩 function fileSelect(){ $("#fileToUpload").click(); } function fileSelected(){ var imgFlag=true; if (imgFlag){ //等比例压缩上传 var optionsSave={ type: "POST", url: "${pageContext.request.contextPath}/Enterprise/submitCompressionWebImage", data:$('#addImg').serialize(), success: function (data) { if (data.code == 0) { $("#imgId").val(data.result.id); $("#imgUrl").val(data.result.url); $("#myOriginalImg").attr('src',data.result.url); $("#originalImg").attr('style',"display: none"); $("#myOriginalImg").attr('style',"display: block"); cutImage(); // window.location.reload(); } else if(data.code == -1){ alert("图片尺寸不能小于400*300!"); }else { alert("上传图片失败!"); } }, error: function (data) { } } $('#addImg').ajaxSubmit(optionsSave); } } function uploadLogo(){ var imgFlag=true; if (imgFlag){ //裁剪图片 var optionsSave={ type: "POST", url: "${pageContext.request.contextPath}/Enterprise/submitCropWebImage", data:$('#addImg').serialize(), success: function (data) { if (data.code == 0) { parent.document.getElementById("imgUrl").src = data.result.url; parent.document.getElementById("imgId").value = data.result.id; Close('a1'); } else { alert("上传图片失败"); } }, error: function (data) { alert("上传图片失败"); } } $('#addImg').ajaxSubmit(optionsSave); } }
//更多详情请下载demo