浏览 4265 次
锁定老帖子 主题:Ext 图片剪裁器
该帖已经被评为新手帖
|
|
---|---|
作者 | 正文 |
发表时间:2010-09-25
最后修改:2010-09-25
在网上找了半天,但是没有找到我想要的(大多都是jquery的,ext的似乎不多或者是太复杂),没有办法,花了两天自己实现了一个比较粗糙的,当然本着够用就好的原则,这个东西只有一个js文件(ext当然是必须要有的),调用方法也很简单:
Ext.onReady(function(){ var ic = new Ext.ux.ImageCuter({ baseImgX:150, //设置图片框的位置x baseImgY:100, //设置图片框的位置y baseImgWidth:100, //图片剪裁框的宽度度 baseImgHeight:100, //图片剪裁框的高度 baseImgBorder:true, //图像剪裁框是否有边框 imageUrl:"aa.jpg", //加载图片的路径 opacity:80, //图片蒙版透明度 imgWidth:600, //图片原始宽度 imgHeight:375, //图片原始高度 onClickOKButton:function(x,y,w,h){ alert("x:"+x+" y:"+y+" w:"+w+" h:"+h); }, onClickCancelButton:function(){ alert("cancel"); } }); ic.show(); }); 好了,不多说了,上几张图和源码,有时间的同学请帮忙测试一下,有bug请贴出,有修改兴趣的同学也可以修改玩玩, 后台我就不写了,java php 一些都是可以的
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-09-26
楼主注意clip样式
|
|
返回顶楼 | |
发表时间:2010-09-26
binlaniua 写道 楼主注意clip样式
没明白你说的什么意思? |
|
返回顶楼 | |
发表时间:2010-09-27
其实楼主可以写得更详细点,或者讲讲大体原理,总比这样直接贴代码好 呵呵 并非挑刺。
|
|
返回顶楼 | |
发表时间:2010-10-07
CSS样式 clip可以用于剪切
|
|
返回顶楼 | |
发表时间:2010-10-11
最后修改:2010-10-11
binlaniua 写道 CSS样式 clip可以用于剪切
我以为是ext里的什么属性,你应该没有下载附件仔细看我做的东西,这个和clip没有什么关系, 这个效果和腾讯qq校友添加头像的插件差不多,只是那个插件是flash的; 图片现在的框不动,动的是后面的背景图片,图片是背景显示只需要定义css的 background-position 样式 有时候我们上传一个图片,但是我们需要这个图片在网络上面显示不会变形(在网络上面这种图片的宽和高往往是定死的),所以需要经过特殊的剪裁,这个只能通过服务器后台去剪裁,javascript并没有这个功能,这个工具只是获得我们剪裁的图片的长和宽以及开始剪裁位置的坐标然后传入后台进行剪裁操作 |
|
返回顶楼 | |