allowSelect – 指定用户是否可以重新指定选择区（默认的值是true）
minSelect – 一个新的选择区最小的大小（默认的大小是[0, 0]）
outlineOpacity – 轮廓的透明度（默认的值是0.5）
overlayOpacity – 覆盖层的透明度（默认的值是0.5）
selectionPosition – 选择区得位置（默认的是[0, 0]）
selectionWidth – 选择区得宽度（默认的值是0）
selectionHeight – 选择区的长度（默认的值是0）
第五步：建立图像层
这一步我们将改变文档的结构，以此来为下一步做准备：插件的表面
// 初始化图像层
var $image = $(object);
// 初始化一个图像支持层
var $holder = $(‘<div />’)
.css({
position: ‘relative’
})
.width($image.width())
.height($image.height());
// imag包含在holder层里面 .wrap()函数
$image.wrap($holder)
.css({
position: ‘absolute’
});
正如你所见，包含层和图像具有同样的大小并且包含层和图像是相对定位。然后我们使用.wrap函数使得图像包含在其中
在图像的上面是覆盖层：
//初始化一个覆盖层，并将其置于图像之上
var $overlay = $(‘<div id=”image-crop-overlay” />’)
.css({
opacity: options.overlayOpacity,
position: ‘absolute’
})
.width($image.width())
.height($image.height())
.insertAfter($image);
这个层同样和图像一样大，但是是绝对定位。我们从options.outlineOpacity得到透明度。这个元素拥有一个Id，所以我们可以改变通过插件的css来改变它的样式。在最后我们用.insertAfter($image)方法将覆盖层恰好放在图像层的下面。
下面一层是触犯器层
// 初始化一个触发器层，并将其放在覆盖层的上面
var $trigger = $(‘<div />’)
.css({
backgroundColor: ‘#000000’,
opacity: 0,
position: ‘absolute’
})
.width($image.width())
.height($image.height())
.insertAfter($overlay);
这一次对于用户来说是不可见的，但是它会处理一些事件。
接下来是边框层和选择层
// 初始化一个边框层，将其放在触发器层的上面
var $outline = $(‘<div id=”image-crop-outline” />’)
.css({
opacity: options.outlineOpacity,
position: ‘absolute’
})
.insertAfter($trigger);
// 初始化一个选择层，将其置于边框层的上面
var $selection = $(‘<div />’)
.css({
background: ‘url(‘ + $image.attr(‘src’) + ‘) no-repeat’,
