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; // 上面参数的x1,后面依次都为上面的参数
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'
    });
}

Done