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

2019-03-26 11:12|来源: 领悟书生

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

相关问答

更多

我应该如何使用jcrop在客户端裁剪图像并上传它?(How should I crop the image at client side using jcrop and upload it?)

Seahorsepip的回答非常棒。 我在非备用答案上做了很多改进。 http://jsfiddle.net/w1Lh4w2t/ 我会建议不要做那种奇怪的隐藏png的东西,当一个Image对象工作的时候也一样(只要我们不支持后备)。 var jcrop_api; var canvas; var context; var image; var prefsize; 尽管如此,尽管如此,最好还是将最终的数据从画布中提取出来,然后放在该字段中。 function loadImage(input) { ...

用jcrop预览裁剪图像(Cropping an image with a preview using jcrop)

计算选择大小和预览区域大小之间的水平和垂直比率: var rW = pW / c.w; var rH = pH / c.h; 然后将它们应用于background-size和background-position : preview.css("background-size", (oW*rW) + "px" + " " + (oH*rH) + "px"); preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + ...

使用JCrop保存裁剪的图像(save cropped image using JCrop)

它只是使用 margin-left: -25px; margin-top: -6px; 所以图像出现在一个较小的div内。 所以它实际上并没有裁剪它。 如果是垂直裁剪,它也会重新调整照片的大小并修改margin-top 。 因此,如果您实际上保存了img的宽度,高度和边距,那么如果再次应用它,您将获得裁剪后的图像。 it just uses margin-left: -25px; margin-top: -6px; so the image appear cropped inside a sm ...

使用Jcrop裁剪上传的图像(Cropping Uploaded Image using Jcrop)

图像显示为黑色的问题正在发生,因为您在实际加载之前在图像上调用jCrop。 您可以在reader.onload调用之后将调用放入jCrop,以便在图像加载后运行。 看到这个: reader.onload = function (e) { $('#blah').attr('src', e.target.result); $('.crop').Jcrop({ onSelect: updateCoords, bgOpacity: ...

jcrop - 中心的默认裁剪选择(jcrop - default crop selection at center)

可能未设置属性“width”和“height”。 我宁愿使用$('#img_crop')。width()和$('#img_crop')。height()来查看是否有效。 The attributes 'width' and 'height' are probably not set. I would rather use $('#img_crop').width() and $('#img_crop').height() instead, to see if that works.

JCrop没有正确裁剪图像(JCrop not cropping image properly)

我尝试使用您的代码并遇到了类似的问题。 使用https://rubyplus.com/articles/3951-Cropping-Images-using-jCrop-jQuery-plugin-in-Rails-5教程中的代码为我工作,它应该像下面的标准jQuery一样: var ImageCropper, bind = function(fn, me){ return function(){ return fn.apply(me,arguments); }; }; jQuery(func ...

JCrop没有按预期裁剪图像(JCrop not cropping image as intended)

您应该将实际大小添加到Jcrop设置: trueSize: [imgwidth, imgheight], You should add the true size to the Jcrop settings: trueSize: [imgwidth, imgheight],

jcrop是否在上传之前通过发送xy到php来裁剪?(Does jcrop work before uploading by sending the xy to php to crop?)

我决定采用另一种适用于我的应用程序的裁剪程序。 I decided to go with another cropping program that worked better for my application.

亚马逊S3 + Jcrop裁剪图像(Amazon S3 + Jcrop Cropping Images)

您可以使用另一个变量作为名称访问对象中的成员变量: $元素; //打印“aMemberVar成员变量”?> 或使用功能: You can access member variables in an object using another variable as name: $element; // prints "aMemberVar Member Variable" ?> or use functions:

jcrop全宽/高与比例裁剪(jcrop full width/height with ratio crop)

我不确定如何在脚本的服务器端部分裁剪图像,但你可以做的是添加一个名为“使用完整图像”的额外按钮,其中发布数据(x,y,宽度,高度)将是图像的完整大小。 然后,如果比率高于预期,您只需创建与您想要的尺寸相同的图像,按宽度调整图像大小并将其放在新图像的中间。 所以下面的代码只是“伪代码”来显示我正在谈论的内容。 因此,假设用户想要上传1000px * 200px的图像,并且您想要的比例为200px * 150px。 用户选择“完整图像大小”,因此您发送的数据非常类似:0,0,1000,200(位置:0 ...