Ext 图片剪裁器

在网上找了半天，但是没有找到我想要的（大多都是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 一些都是可以的

 

 

评论

5 楼 Cindy_Lee 2010-10-11  

binlaniua 写道

CSS样式 clip可以用于剪切

我以为是ext里的什么属性，你应该没有下载附件仔细看我做的东西，这个和clip没有什么关系，
这个效果和腾讯qq校友添加头像的插件差不多，只是那个插件是flash的；
图片现在的框不动，动的是后面的背景图片，图片是背景显示只需要定义css的 background-position 样式

有时候我们上传一个图片，但是我们需要这个图片在网络上面显示不会变形（在网络上面这种图片的宽和高往往是定死的），所以需要经过特殊的剪裁，这个只能通过服务器后台去剪裁，javascript并没有这个功能，这个工具只是获得我们剪裁的图片的长和宽以及开始剪裁位置的坐标然后传入后台进行剪裁操作

4 楼 binlaniua 2010-10-07  

CSS样式 clip可以用于剪切

3 楼 makemyownlife 2010-09-27  

其实楼主可以写得更详细点，或者讲讲大体原理，总比这样直接贴代码好 呵呵 并非挑刺。

2 楼 Cindy_Lee 2010-09-26  

binlaniua 写道

楼主注意clip样式

没明白你说的什么意思？

1 楼 binlaniua 2010-09-26  

楼主注意clip样式