使用jcrop+springmvc实现头像上传与裁剪源码

前天实现了使用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