jquery.imgareaselect.js使用和一些问题

最近做了一下头像截取上传，其实以前做过的，只不过没这么详细去做。

用到的JS：

jquery-1.8.0.js
ajaxfileupload.js
jquery.imgareaselect.js

参数这些我这里都不介绍了，网上很多，这里只说一些问题和解决方法：

• 初始化时默认把截取框显示出来（以下为一个100PX的正方形）：

show : true, // 可以不填写
x1 : 0,
y1 : 0,
x2 : 100,
y2 : 100,

如果你需要图片居中截取，注意一定要在图片已经加载完成：

var rw = $("#图片选择器").width(); // 图片的宽度
var rh = $("#图片选择器").height(); // 图片的高度
var bx1 = (rw - 100) / 2;
var by1 = (rh - 100) / 2;
var bx2 = bx1 + 100;
var by2 = by1 + 100;

• 有时候发现初始化时，截取的图和预览不一样，但是一拖动就一样了。这个问题是开始时预览的img没有添加宽度和高度的原因，你可以看看是不是你的CSS写了图片的最大高度/宽度或最小高度/宽度。

• 上传后如何去掉截取的框？设置截取对象的remove属性为true即可：

obj.imgAreaSelect({remove:true});

• 有时候发现第二次添加图片后，还是之前的信息。要在onInit初始化时，修改一下参数：

onInit : function(img, selection){
    var scaleX = 100 / (selection.width || 1); // 100 为默认的截取框的宽度
    var scaleY = 100 / (selection.height || 1);
    $("#image_cut .preview_head img").css({
        width : Math.round(scaleX * rw) + 'px',
        height : Math.round(scaleY * rh) + 'px',
        marginLeft : '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop : '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}