一哥们儿网站用到上传头像裁剪,但是不管何种比例图片总是被拉伸到200*300的比例,导致裁剪坐标出现误差。从没接触过这个插件,大体研究了下,发现在调用jcropAPI的时候,会把默认的图片传给裁剪页面,并以此复制出遮盖层、裁剪预览图,so判断问题出在这里,既然第一次调用api就会固定裁剪图片的比例,首先想到的是改变各img的比例,结果裁剪页不会被拉伸了,但是裁剪选择框还是会在200*300的比例范围内移动,看来这条路不同。既然是调用api的时候会把图片比例固定,那就在每次传完图后也调一次api,但是忘了一件事,就是调用api的时候因为上次已经生成了200*300的图,所以会导致这次新生成的和它同时出现,既然这样,索性一不做二不休,直接把裁剪页的节点在每次调用api前先给还原,果然搞定。也有个小问题就是绑定的提交坐标事件失效,简单,改用jquery的on方法搞定。
因为赶时间只想到了这最粗暴的方法,不知道是不是有终南捷径。。。
代码记下来以防忘记
function qBeforeUpImg(){
var temp = '<div class="modal-dialog">' +
'<div class="modal-content">'+
'<div class="modal-header"> <a href="#" class="close" data-dismiss="modal">×</a>'+
'<h4>裁剪图片</h4>'+
'</div>'+
'<div class="modal-body">'+
' <form class="form-horizontal" action="" method="post" role="form">'+
' <div class="zxx_main_con form-group">'+
' <div class="zxx_test_list" style="min-height:200px;">'+
' <div class="rel mb20" style="margin-left:100px;">'+
' <label class="control-label" for="source">原图</label>'+
' <img id="source" src="img/200.gif" style="width:'+$("#existPhoto img").css("width")+';height:'+$("#existPhoto img").css("height")+';" />'+
' <span id="preview_box" class="crop_preview"><img id="crop_preview" src="img/200.gif" /></span>'+
' </div>'+
' <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="submit" value="确认剪裁" id="crop_submit" />-->'+
'</div>'+
'<div class="select_list hidden">'+
' <input type="checkbox" id="can_click" /><label for="can_click">允许新的选区</label><br />'+
' <input type="checkbox" id="can_move" /><label for="can_move">选区可被移动</label><br />'+
' <input type="checkbox" id="can_size" /><label for="can_size">选区可以大小改变</label>'+
'</div>'+
'</div>'+
'<div class="modal-footer form-actions">'+
' <button type="button" class="btn btn-primary" id="crop_submit" data-dismiss="modal">确认</button>'+
'<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'+
'</div>'+
'</form>'+
'</div>'+
'</div>'+
'</div>';
$("#cutPhoto").html(temp);
$("#source").Jcrop({
aspectRatio:2/3,
onChange:showCoords,
onSelect:showCoords
})
}
$("a[href='#cutPhoto']").on("click",function(){
<span style="white-space:pre"> </span>var existPhotoSrc=$("#existPhoto").find("img").attr("src");
qBeforeUpImg();
<span style="white-space:pre"> </span>$("#cutPhoto").find("img").attr("src",existPhotoSrc);
<span style="white-space:pre"> </span>});