jcrop图片裁剪使用踩过的坑

图片剪切，使用了jcrop。踩了不少坑，真是谁用谁知道，找到的参考也是一言难尽，各种尝试终于弄好了。最终实现效果

遇到问题

1.上传图片改变时，左侧的原始图片展示尺寸出现问题，图片尺寸与前一张图片大小一致，使得图片出现了变形。

2.解决了问题一右侧的小图尺寸不对，右侧小图大小出现异常。

解决方法

1.上传图片外部设置图片使用jcrop.setImg(imgurl)。

2.问题二是由于重置大小函数coords的大小异常，此时不能使用原图容器尺寸，要重新在该函数获取，利用jcrop.getBounds()。

js部分代码

//剪切头像
$("#portraitbtn").on("change", function (e) {
        var src, url = window.URL || window.webkitURL || window.mozURL;
        var files = e.target.files;
        var file = files[0];
            if (url) {
                src = url.createObjectURL(file);
            } else {
                src = e.target.result;
            }
           
           $('.preview').attr('src', src); //大小图添加图片地址 
           if(jcrop_api){
            	jcrop_api.setImage(src);//问题一，重选图片原始图变形
            }
		  $('#target').Jcrop({
				onChange: showPreview,
				onSelect: showPreview,
				boxWidth:280,//限制原始图片大小，外部容器设置没用
				aspectRatio: 1
			},function(){	
                //设置初始选框		
				var w = $('#target').width();
				var h = $('#target').height();					
				jcrop_api = this;
				if(w >= h){
					jcrop_api.setSelect([0,0,h,h])
				}else{
					jcrop_api.setSelect([0,0,280,280])
				}
				});	
           	
  });
var jcrop_api = null; 
function showPreview(coords){
	var rx = 100 / coords.w;
	var ry = 100 / coords.h;	
	var bounds = jcrop_api.getBounds();
	var boundx = bounds[0];
	var boundy = bounds[1];//问题二
	$('#preview').css({
		width: Math.round(rx * boundx) + 'px',
		height: Math.round(ry * boundy) + 'px',
		marginLeft: '-' + Math.round(rx * coords.x) + 'px',
		marginTop: '-' + Math.round(ry * coords.y) + 'px'
	});
}