[转载]jquery.bitmapcutter(图片裁剪插件) 与 jquery1.4.2 配合

baacloud免费翻墙vpn注册使用

[转载]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” >&nbsp</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 来选择,你明白了吗?

来个截图:

好了,就写到这里了,谢谢大家的观赏。

我是百灵。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏