使用jcrop对上传的图片进行裁剪时，只能选择部分图片，如下图所示：
如上图所示，虽然可以选择红色矩形中的图片部分，但无法从图片中裁剪。这里有什么问题？
我的 HTML 代码：
<div class="span9">
<div class="heading-banner">
<h2 style="font-size:20px">我的头像</h2>
</div>
<div class="row">
<label><span class="label">当前头像：</span></label>
<img id="avatar" src="<?php echo base_url('/images/default.gif')?>" />
</div>
<div class="row">
<label><span class="label">上传图片：</span></label>
<input type="text" id="avatarUpload" value="" />
<input type="hidden" id="img" name="img" />
<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" />
<div style="padding-top:-10px;">
<a href="javascript:$('#avatarUpload').uploadify('upload','*')">开始上传</a> |
<a href="javascript:$('#avatarUpload').uploadify('cancel', '*')">取消上传</a>
</div>
</div>
<div class="imgchoose">编辑头像：<br /><img src="" id="target" /></div>
<div class="row imgchoose" style="display:none;">
头像预览：<br />
<div style="width:200px;height:200px;margin:10px 10px 10px 0;overflow:hidden; float:left;"><img class="preview" id="preview3" src="" /></div>
<div style="width:130px;height:130px;margin:80px 0 10px;overflow:hidden; float:left;"><img class="preview" id="preview2" src="" /></div>
<div style="width:112px;height:112px;margin:98px 0 10px 10px;overflow:hidden; float:left;"><img class="preview" id="preview" src="" /></div>
</div>
<div class="row">
<input type="button" class="btn_submit" value="" id="avatar_submit" style="display:none;" />
</div>
</div>
<div class="span3">
<ul id="profile-list" class="nav nav-list">
<li><a href="<?php echo base_url('user/basic')?>">我的个人资料</a></li>
<li><a href="<?php echo base_url('user/avatar');?>">修改头像</a></li>
</ul>
</div>
还有我的js代码：
<script type="text/javascript">
$(function() {
//首页轮播图1
$("#avatarUpload").uploadify({
'auto' : false,
'multi' : false,
'uploadLimit' : 1,
'formData' : {'uid':'18'},
'buttonText' : '请选择图片',
'height' : 20,
'width' : 120,
'removeCompleted' : false,
'swf' : "<?php echo base_url('uploadify/uploadify.swf') ?>",
'uploader' : "<?php echo base_url('user/do_avatar');?>",
'fileTypeExts' : '*.gif; *.jpg; *.jpeg; *.png;',
'fileSizeLimit' : '1024KB',
'debug':true,
'onUploadSuccess' : function(file, data, response) {
var msg = $.parseJSON(data);
alert(msg.result_des);
if( msg.result_code == 1 ){
$("#img").val(msg.result_des );
$("#target").attr("src",msg.result_des);
$(".preview").attr("src",msg.result_des);
$('#target').Jcrop({
minSize: [50,50],
setSelect: [0,0,200,200],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
$(".imgchoose").show(1000);
$("#target").show(1000);
$("#avatar_submit").show(1000);
} else {
alert('上传失败');
}
},
'onClearQueue' : function(queueItemCount) {
alert( $('#img1') );
},
'onCancel' : function(file) {
alert('The file ' + file.name + ' was cancelled.');
}
});
//头像裁剪
var jcrop_api, boundx, boundy;
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('请选择图片上合适的区域');
return false;
};
function updatePreview(c){
if (parseInt(c.w) > 0){
var rx = 112 / c.w;
var ry = 112 / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 130 / c.w;
var ry = 130 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 200 / c.w;
var ry = 200 / c.h;
$('#preview3').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
$("#avatar_submit").click(function(){
var img = $("#img").val();
var x = $("#x").val();
var y = $("#y").val();
var w = $("#w").val();
var h = $("#h").val();
if( checkCoords() ){
$.ajax({
type: "POST",
url: "resize.php",
data: {"img":img,"x":x,"y":y,"w":w,"h":h},
dataType: "json",
success: function(msg){
if( msg.result_code == 1 ){
$('html,body').animate({scrollTop:$('#avatar').offset().top-150},1000,'swing',function(){
$('#avatar_msg').show();
$('#avatar').attr('src',msg.result_des.small);
});
} else {
alert("失败，傻逼铁道部");
}
}
});
}
});
});
</script>