jcrop处理图片裁剪

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(){	

//<img src="" id="myOriginalImg" alt="裁剪图片" name="fileUrl" style="display: none">
        $("#myOriginalImg").Jcrop( {//         aspectRatio : 1,裁剪框比例            aspectRatio: 4/3,            allowResize:true,            allowSelect:true,            bgFade:true,            onChange : showCoords,            onSelect : showCoords,            minSize :[400,300]        }, function () {

	     //初始化
            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