使用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!");}}});});
页:
[1]