throw ‘Please notice that this jquery plguin only could be applied to img and the src of img could not be null!’;
}
var defaults = {
//原图路径
imagePath: this.attr(‘src’),
//缩放级别
zoomLevel: 1,
//图片相对于截取框是否居中
center: false,
//截取框与图片的相对位置
left: 0, top: 0,
//截取框的大小
width: 200, height: 200,
//工作区大小
cropWorkAreaSize: { width: 600, height: 400 },
//截取框相对于工作区的位置
cropFrameRect: { center: true, top: 0, left: 0 },
//缩放范围
zoom: { min: 0, max: 2, step: 0.01 },
//回调函数
callbacks: {
//移动图片后
dragging: false,
//缩放后
zoomed: false
}
};
if (options) {
defaults = $.extend(defaults, options);
}
return new imageCropper(this, defaults);
}
});
function imageCropper(image, settings) {
this.init(image, settings);
};
imageCropper.prototype = {
settings: false,
wrapper: $(‘<div class=”image-cropper-wrapper”/>’),
zoomWrapper: $(‘<div class=”zoom-wrapper”><div class=”zoom-out-button”/><div class=”zoom-scrollbar”><div class=”zoom-scroller”/></div><div class=”zoom-in-button”/></div>’),
img: false,
init: function(image, settings) {
var context = this;
this.settings = settings;
image.addClass(‘background-img’);
//生成html
image.wrap(this.wrapper).wrap(‘<div class=”crop-work-area”/>’).wrap(‘<div class=”crop-background”/>’);
this.wrapper = $(‘.image-cropper-wrapper’);
$(‘.crop-work-area’, this.wrapper).append(‘<div class=”crop-frame”><img class=”foreground-img” src=”” /></div><div class=”drag-containment”/>’);
this.wrapper.append(this.zoomWrapper);
$(‘.image-cropper-wrapper’, this.wrapper).disableSelection();
this.reset();
//图片的拖动
$(‘.crop-background’, this.wrapper).draggable({
containment: $(‘.drag-containment’, this.wrapper),
cursor: ‘move’,
drag: function(event, ui) {
var self = $(this).data(‘draggable’);
//同时移动前景图
$(‘.foreground-img’, this.wrapper).css({
left: (parseInt(self.position.left) – context.settings.cropFrameRect.left – 1) + ‘px’,
top: (parseInt(self.position.top) – context.settings.cropFrameRect.top – 1) + ‘px’
});
//得到截图左上点坐标
context.settings.left = context.settings.cropFrameRect.left – parseInt($(this).css(‘left’));
context.settings.top = context.settings.cropFrameRect.top – parseInt($(this).css(‘top’));
//移动图片的callback
