Javascript jquery cropbox更改选项

这是“cropbox”JavaScript代码的源代码

这一切都很好，但我使用它在一个页面上的两个不同的图像，当页面加载它调用这个

$(window).on('load', function() {
    var options = {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    }
    var cropper;
    $('#file').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $('#btnCrop').on('click', function() {
        var img = cropper.getDataURL()
        $('.cropped').append('<img src="' + img + '">');
    })
    $('#btnZoomIn').on('click', function() {
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function() {
        cropper.zoomOut();
    })
});

及

但似乎没有什么能改变选择

---

有人能告诉我我做错了什么吗？

我改为使用文档就绪事件处理程序，并注释掉了

this.files=[]因为它产生了一个错误（检查控制台日志以了解该错误）


/**
*由EZK于2014年9月14日创建。
*/
“严格使用”；
（功能（工厂）{
if（typeof define=='function'&&define.amd）{
定义（['jquery']，工厂）；
}否则{
工厂（jQuery）；
}
}（函数（$）{
var cropbox=函数（选项，el）{
var el=el | |$（options.imageBox），
obj={
国家：{}，
比率：1，
选项：选项，
图像框：el，
thumbBox:el.find（options.thumbBox），
微调器：el.find（options.spinner），
图像：新图像（），
getDataURL:函数（）{
var width=this.thumbBox.width（），
高度=this.thumbBox.height（），
canvas=document.createElement（“canvas”），
dim=el.css（“背景位置”）。拆分（“”），
大小=el.css（“背景大小”）。拆分（“”），
dx=parseInt（dim[0]）-el.width（）/2+width/2，
dy=parseInt（尺寸[1]）-el.height（）/2+height/2，
dw=parseInt（大小[0]），
dh=parseInt（大小[1]），
sh=parseInt（this.image.height），
sw=parseInt（this.image.width）；
画布宽度=宽度；
canvas.height=高度；
var context=canvas.getContext（“2d”）；
context.drawImage（this.image，0，0，sw，sh，dx，dy，dw，dh）；
var imageData=canvas.toDataURL（'image/png'）；
返回图像数据；
},
getBlob:function（）{
var imageData=this.getDataURL（）；
var b64=imageData.replace（'data:image/png；base64'，''）；
var二进制=atob（b64）；
var数组=[]；
对于（var i=0；i0 | | e.OriginaleEvent.detail<0？obj.ratio*=1.1:obj.ratio*=0.9；
挫折（）；
}
obj.spinner.show（）；
obj.image.onload=函数（）{
obj.spinner.hide（）；
挫折（）；
el.bind（'mousedown'，imgMouseDown）；
el.bind（'mousemove'，imgMouseMove）；
$（窗口）.bind（'mouseup'，imgMouseUp）；
el.bind（'mousewheel DOMMouseScroll'，缩放图像）；
};
obj.image.src=options.imgSrc；
el.on（'remove'，function（）{
$（窗口）.unbind（'mouseup'，imgMouseUp）
});
返回obj；
};
jQuery.fn.cropbox=函数（选项）{
返回新的cropbox（选项，此项）；
};
}));
$（文档）.ready（函数（）{
变量选项={
thumbBox:“.thumbBox”，
微调器：'.spinner'，
imgSrc:'avatar.png'
}
var croper=$（'.imageBox'）.cropbox（选项）；
console.log（“裁剪器选项：”，crapper.options）；//现在未定义
$（crapper.options.spinner）.html（“加载…”）.fadeOut（2000）；
$（'#file'）。在（'change'，function（）上{
var reader=new FileReader（）；
reader.onload=函数（e）{
options.imgSrc=e.target.result；
裁剪器=$（'.imageBox'）.cropbox（选项）；
}
reader.readAsDataURL（this.files[0]）；
控制台。日志（裁剪器）；
//this.files=[]；
});
$（'btnCrop'）。在（'click'，function（）上{
var img=crapper.getDataURL（）
$（'.crapped'）。追加（''）；
});
$（'btnZoomIn'）。在（'click'，function（）上{
crapper.zoomIn（）；
});
$（'btnZoomOut'）。在（'click'，function（）上{
cropper.zoomOut（）；
});
});
.imageBox{
位置：相对位置；
高度：400px；
宽度：400px；
边框：1px实心#aaa；
背景：#fff；
溢出：隐藏；
背景重复：无重复；
光标：移动；
}
.imageBox.thumbBox{
位置：绝对位置；
最高：50%；
左：50%；
宽度：200px；
高度：200px；
利润上限：-100px；
左边距：-100px；
框大小：边框框；
边框：1px实心rgb（102102102）；
盒影：0.1000px rgba（0,0,0,0.5）；
背景：无重复滚动0%0%透明；
}
.imageBox.spinner{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
文本对齐：百分位
options = {
    thumbBox: '.smallThumbBox',
    spinner: '.spinner',
    imgSrc: 'avatar.png'
}

jQuery.fn.cropbox.options = {
    thumbBox: '.smallThumbBox',
    spinner: '.spinner',
    imgSrc: 'avatar.png'
}