[转载]jquery.bitmapcutter(图片裁剪插件) 与 jquery1.4.2 配合 – 此地民风淳朴,一心向善 – 博客园.
滚滚长江东逝水,浪花淘尽英雄, 听着苏山大叔的的歌,灵感来了。
在博问中问了许久的问题,一直没有人帮我解决,我郁闷,我压抑,我无奈,在经过三天的假期的等待,回答数依据保持为0。
于是今天来了,下了决定自己解决。
我到底是遇到了什么问题呢?
问题就是:JQuery.bitmapcutter与JQuery1.4.2配合时,发现裁剪框无法移动。
JQuery.bitmapcutter:这个东东就是老外写的一个,可以实现异步上传头像,而且可以移动,旋转,载剪。(说心里话,老外真的是聪明,要是开发语言是中文的话,我其实也很聪明)。
为了解决问题,我默默的读了好些遍他的js原码,于是,于是,我………………………………………………..就这样。
(1)、下面代码是 jQuery.bitmapcutter中,装载裁剪的容器DIV ,要知道,他以前是没有id的,比如id=”cutterDiv” ,这个是我自己加的。
//cutter
var $cutter = $(‘<div id=”cutterDiv” class=”jQuery-bitmapcutter-cutter” > </div>’)
.css(ps.cutterSize)
.css({
‘opacity’: .4,
‘left’: (ps.holderSize.width – ps.cutterSize.width) / 2,
‘top’: (ps.holderSize.height – ps.cutterSize.height) / 2
}).appendTo($holder);
(2)、我们在来看看代码事件绑定的代码块。你可以在jquery.bitmapcutter 的js文件中找到。
dragndrop: function(setting) {
var ps = $.fn.extend({
limited: {
lw: { min: 0, max: 100 },
th: { min: 0, max: 100 }
},
handler: null,
callback: function(e) { }
}, setting);
var dragndrop = {
drag: function(e) {
var d = e.data.d;
var p = {
left: Math.min(Math.max(e.pageX + d.left, ps.limited.lw.min), ps.limited.lw.max),
top: Math.min(Math.max(e.pageY + d.top, ps.limited.th.min), ps.limited.th.max),
target: d.target
};
ps.callback(p);
},
drop: function(e) {
$(“#cutterDiv”).unbind(‘mousemove’, dragndrop.drag).unbind(‘mouseup’, dragndrop.drop);
}
};
return this.each(function() {
if (ps.handler == null) { ps.handler = $(this) };
var handler = (typeof ps.handler == ‘string’ ? $(ps.handler) : ps.handler);
handler.bind(‘mousedown’, function(e) {
var data = {
target: $(this),
left: $(this).f(‘left’) – e.pageX,
top: $(this).f(‘top’) – e.pageY
};
$(“#cutterDiv”).bind(‘mousemove’, { d: data }, dragndrop.drag).bind(‘mouseup’, dragndrop.drop);
});
});
}
这个就是主要用来处理拖动裁剪框的移动的代码。(注意以下两行代码,这是我改造过的)
$(“#cutterDiv”).unbind(‘mousemove’, dragndrop.drag).unbind(‘mouseup’, dragndrop.drop);
$(“#cutterDiv”).bind(‘mousemove’, { d: data }, dragndrop.drag).bind(‘mouseup’, dragndrop.drop);
来看看上而两行代码的原型:
$().unbind(‘mousemove’, dragndrop.drag).unbind(‘mouseup’, dragndrop.drop);
$().bind(‘mousemove’, { d: data }, dragndrop.drag).bind(‘mouseup’, dragndrop.drop);
是的,他们的区别在于:我用了元素的id来锁定div,而前者没有用。
是作者写错了吗?当然不是,因为jquery1.4.2 和jquery1.3.1 中,元素选择器由1.3.1 – 1.4.2 发展的过程中,发生了变化。这就是原因喽!简单吧!作者还是很厉害的,js写的特别的好。赞一个。
终述一下:首先给裁剪框容器增加id,然后在事件绑定中,将元素的选定方式改为依靠id 来选择,你明白了吗?
来个截图:
好了,就写到这里了,谢谢大家的观赏。
我是百灵。