开源插件应用

领悟书生java教程网提供最新开源插件应用教程,最经典的开源插件应用教程,jquery插件教程,深入理解jquery插件教程,深入浅出插件开发教程,日期插件系列教程,经典图片滚动教程等教程

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

2013-05-26| 发布: 领悟书生| 浏览: 11580 |保存PDF

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

大家都在看

热门访问