使用JCrop裁剪图片

JCrop是一个基本JQuery的图像裁剪插件，其主页在此。关于JCrop的使用主页上中丰富的例子，这里要实际图片上传及裁剪的功能。

?

第一步，实现图片上传，上传完成时页面不能刷新。通常不刷新页面会使用AJAX技术，但是AJAX不能发送multipart/form-data格式的数据，这时就只能使用iframe了，可以参见这篇文章。

?

<div id="avator-croper">    <div><!-- upload form -->        <form id="upload-form" target="upload_target" method="post" action="/uploadAvator">            <input type="file" name="file" /> <input type="submit" id='upload-avator' value="Upload" />        </form>        <iframe id="upload_target" name="upload_target" src="" style="display:none"></iframe>    </div>    <div id="crop-area" style="display: none">        <div>            <img id="cropbox" src="" /><!-- original image -->        </div>        <div style="width: 150px; height: 150px; overflow: hidden; margin-left: 5px; margin-top: 10px">            <img id="preview" src=""><!-- preview image -->        </div>    </div>        <div>        <form action="/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" />            <button type="submit" id="submit-avatar">Crop Image</button>        </form>    </div></div>

?

上面的HTML分为三部分，第一部分定义了图片上传的form和一个隐藏的iframe，form的target定义成iframe的id。第二部分是图片的裁剪及预览区域。第三部分是定义裁剪区域参数，包括裁剪区域左上角位置、裁剪区域宽度和高度，确认裁剪时这些参数需要传递到服务器端。下面是处理图片上传的JavaScript代码，它处理了iframe的onload事件。

?

$('#upload-form').submit(function(e) {$('#upload_target').one('load', function() {var ret = $('body', frames['upload_target'].document).html();var data = eval("(" + ret + ")");if (data.Status == 'OK') {var imageUrl = data.ImageUrl;// ...} else {alert("Upload Failed!");}});});

?

其中省略的代码是交由JCrop处理的部分，其主要内容是设置待裁剪和预览图片的src属性，并调用JCrop方法。

?

if (data.Status == 'OK') {var imageUrl = data.ImageUrl;$('#cropbox').attr('src', imageUrl);$('#preview').attr('src', imageUrl);$("#cropbox").Jcrop({onChange: showPreview,onSelect: showPreview,aspectRatio: 1});$('#crop-area').show();}

?

?

showPreview函数如下：

?

    function showPreview(coords) {        var rx = 150 / coords.w;        var ry = 150 / coords.h;        $('#preview').css({            width: Math.round(rx * 500) + 'px',            height: Math.round(ry * 370) + '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);    };

?

用户选择裁剪区域并点击确定按钮后，选择区域参数传给服务器，并返回裁剪后的图片URL，并更新avator，也使用AJAX完成。

?

$('#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.Status == 'OK') {$('#avatar-image').attr('src', data.ImageUrl);} else {alert("Server Error!");}}});});

?

?

?

?

LZ。有DEMO发一份给我么。zhd0608@vip.qq.com 谢啦 楼主，给我发一个Demo吧。love_vip_vip@qq.com，谢谢啊！！ 12 楼 chuangzaoxingfu 2012-09-18 求demo
action代码没贴
chuangzaoxingfuvip@gmail.com