之前专门写的一个基于Jcrop图片裁剪实现的插件文章,希望对你有帮助
创新互联专业为企业提供通州网站建设、通州做网站、通州网站设计、通州网站制作等企业网站建设、网页设计与制作、通州企业网站模板建站服务,十余年通州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
一般的头像上传大小的缩放都是由后端处理的。
jquery jcrop
是用来做图片剪切的(但图片的剪切实际也是由后端处理的)jcrop只是提供了要剪切的坐标。
最新版的jcrop接口只提供了 四种事件
crop.activate Active widget has changed
crop.update Widget dragging or resizing (frequent!)
crop.change Widget dragging or resizing finished
crop.remove Widget removed from stage
双击事件的话可以使用
jcp.listen("dblclick", (widget, e) = { console.log(e);})
来捕捉事件,但这个widget一直是undefined,没法直接获取到当前widget,
但是可以获取直接获取当前活动的widget(stage.active)
位置就在active.pos
老版本的jcrop 直接在onDblClick绑定事件就好
这个用JQUERY自己写比较方便,
MOUSEDOWN时间记录下鼠标的XY坐标,MOUSEUP时间记录下XY坐标,然后根据这两个点创建一个层,然后在层的4个角,也设置刚才说的时间,你就知道,左上,右上,左下,右下便宜多少,层根据这个变换大小,就OK了。