急求在线编辑图片用于个人头像（可以放大，缩小，拖拉）

[lijun_js]

小弟现在的项目遇到一个问题，
要求用户在本地上传个人照片，用户自己可以放大，缩小，拖拉，选择好尺寸
保存生成头像就可以了，急求各位大侠们

就是csdn的头像功能修改

[jarvis_java]

百度 看有没免费开源的 东西可以使用
不行只能flex

[woshigodwolf]

我是用mootools写的，不知道可不可以？

[jenny0810]

留名

[Objector]

参考YUI 2.x 的ImageCropper

[lijun_js]

[Quote=引用 16 楼 woshigodwolf 的回复:]
HTML code<divid="imageArea" class="hide"><divid="demo-portrait"><tablestyle="-moz-user-select:none;"><tr><tdclass="t1" colspan="3"></td></tr><tr><tdclass="t2"></td><tdclass="t3"></td><tdclass="t2"></t?-
[/Quote]



对了 这个可以缩放吗
我现在在调试中 谢谢这位高手 ，以后多交流

[lijun_js]

[Quote=引用 20 楼 woshigodwolf 的回复:]
http://pic.kaixin001.com/pic/photo/56/85/694420_272568534.jpg
这个是上传东西的样子，和开心的差不多
[/Quote]


你给的js引用那些js啊 可否把你的源码发来 谢谢哦 [e-mail]

[lijun_js]

[Quote=引用 1 楼 wfg114 的回复:]
我也在找这个功能，哥们弄好后，也告诉我一下，非常的感谢
[/Quote]

这位哥们 我搞出来了 如果要的话，跟我说下

[lxp921]

jquery有这个插件

[lijun_js]

[Quote=引用 13 楼 woshigodwolf 的回复:]
我是用mootools写的，不知道可不可以？
[/Quote]

可以只要实现功能就行

[woshigodwolf]

function dragMemberImage() {
	$("imageArea").removeClass("hide");
	var img = $('demo-portrait').getElement("img");
	
	// resize new upload image
	var oldImgWidth = img.getWidth();
	var oldImgHeight = img.getHeight();
	var newImgHeight = 337;
	var newImgWidth = (337*oldImgWidth)/oldImgHeight;

	$("demo-portrait").setStyle("cursor","pointer");
	var currL = 0;
	var currImgL = 0;
	var currT = 0;
	var currImgT = 0;
	var imgLeft;
	var imgTop;
	var middleX = 168;
	var middleY = 168;
	
	$("demo-portrait").addEvent("mousedown",function(e) {
		currL = e.page.x;
		currT = e.page.y;
		currImgL = parseInt(img.getStyle("left").substring(0,img.getStyle("left").indexOf("px")));
		currImgT = parseInt(img.getStyle("top").substring(0,img.getStyle("top").indexOf("px")));;
		$("demo-portrait").addEvent("mousemove",show);
		$("demo-portrait").addEvent("mouseup",function() {
			e.stopPropagation();																   
			$("demo-portrait").removeEvent("mousemove",show);
		});
	});
	var show = function(e) {
		e.preventDefault();
		var nowL = e.page.x;
		var nowT = e.page.y;
		var realL = nowL - currL;
		var realT = nowT - currT;
		var nowLeft = currImgL + realL;
		var nowTop = currImgT + realT;
		img.setStyles({
			left:nowLeft,
			top:nowTop
		});
		imgLeft = img.getLeft();
		imgTop = img.getTop();
		middleX = img.getStyle("left").toInt() + img.getWidth().toInt()/2;
		middleY = img.getStyle("top").toInt() + img.getHeight().toInt()/2;
	}
	var flag = 0;
	$("scrollBar").setStyle("display","block");
	var scaleX = newImgWidth/70;
	var scaleY = newImgHeight/70;
	var mySlider = new Slider($('scroll-bar'), $('block-img'),{
		steps:283,
		wheel:1,
		onChange:function(step) {
			flag++;
			if(step<5) {
				step = 5;
			}
			var currW = step*scaleX;
			var currH = step*scaleY;
			// get position from the image's middle point					
			img.setStyles({
				width:currW,
				height:currH
			});
			var posX = middleX - img.getWidth()/2;
			var posY = middleY - currH/2;
			if(flag<2) {
				posX = 0;
				posY = 0;	
			}
			img.setStyles({
				left:posX,
				top:posY
			});
		}
	}).set(100);

	$("resize-s").addEvent("click",function() {
		var currH;
		var block_img_left = parseInt($("block-img").getStyle("left").substring(0,$("block-img").getStyle("left").indexOf("px")));
		if(block_img_left>30) {	
			$("block-img").setStyle("left",block_img_left-26.6);
			currH = resizePhoto(block_img_left-26.6);
		} else {
			$("block-img").setStyle("left",0);
			currH = resizePhoto(0);
		}
		img.setStyles({
			left:middleX - img.getWidth()/2,
			top:middleY - currH/2
		});
	});
	$("resize-b").addEvent("click",function() {
		var currH;
		var block_img_left = parseInt($("block-img").getStyle("left").substring(0,$("block-img").getStyle("left").indexOf("px")));
		var photo_width = parseInt(img.getStyle("width").substring(0,img.getStyle("width").indexOf("px")));
		var photo_height = parseInt(img.getStyle("height").substring(0,img.getStyle("height").indexOf("px")));
		if(block_img_left<253) {
			$("block-img").setStyle("left",block_img_left+26.5);
			currH = resizePhoto(block_img_left+26.5);
		} else {
			$("block-img").setStyle("left",272);
			currH = resizePhoto(272);
		}
		img.setStyles({
			left:middleX - img.getWidth()/2,
			top:middleY - currH/2
		});
	});
	
	var resizePhoto = function(nowEventX) {
		if(nowEventX<5) {
			nowEventX = 5;
		}
		var currWidth = nowEventX*scaleX;
		var currHeight = nowEventX*scaleY;
		img.setStyles({
			width:currWidth,
			height:currHeight
		});
		return currHeight;
	}
	
	// save resize member's head image
	$("saveHeadImg").addEvent("click",function() {
		var memberImgURL	= $("demo-portrait").getElement("img").get("src");										   
		var memberImgWidth 	= $("demo-portrait").getElement("img").getWidth();
		var memberImgHeight	= $("demo-portrait").getElement("img").getHeight();
		var memberImgX 	   	= $("demo-portrait").getElement("img").getStyle("left").toInt();
		var memberImgY 	   	= $("demo-portrait").getElement("img").getStyle("top").toInt();
		var blockX			= 121;
		var blockY			= 118;
		// the left/top of block relative  to the member's image
		var currX 			= blockX - memberImgX;
		var currY			= blockY - memberImgY;
		// ajax
		var req = new Request.JSON({
			url:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
			method:"post",
			data:{
				imgW:memberImgWidth,
				imgH:memberImgHeight,
				relX:currX,
				relY:currY,
				src:memberImgURL
			},
			onSuccess:function(responseText) {
				$("imageArea").addClass("hide");
				//console.log(responseText);
				$$(".head_pic").getElement("img").set("src",responseText.src);
			}
		}).send();
	})

}

[woshigodwolf]

					  <div id="imageArea" class="hide">
						  <div id="demo-portrait">
							<table style="-moz-user-select:none;">
								<tr>
									<td class="t1" colspan="3"></td>
								</tr>
								<tr>
									<td class="t2"></td>
									<td class="t3"></td>
									<td class="t2"></td>
								</tr>
								<tr>
									<td class="t1" colspan="3"></td>
								</tr>
							</table>
							<img id="img1" src="/Files/member/company/620_200906302351141AEJE.jpg" />
						  </div>
						  <table id="scrollBar">
							<tr>
								<td><a id="resize-s" href="javascript:void(0);"></a></td>
								<td>
									<span id="scroll-bar"><span id="block-img"></span></span>
								</td>
								<td><a id="resize-b" href="javascript:void(0);"></a></td>
							</tr>
						  </table>
						  <input id="saveHeadImg" type="button" name="Submit2" value="保存" />
						</div>

[woshigodwolf]

[清风水岸]

一般只能在服务器端来真正的做图片的剪裁工作，客户端用JS在目前开来还不行。前台传递裁剪范围过去吧

[woshigodwolf]

http://pic.kaixin001.com/pic/photo/56/85/694420_272568534.jpg
这个是上传东西的样子，和开心的差不多

[kaishiyouxi]

哦~

[qq349438551]

楼主能分享下么[e-mail]

[wangchenyi2007]

楼主能分享下么[e-mail]

[sunyanjie359576870]

[Quote=引用 22 楼 的回复:]
引用 16 楼 woshigodwolf 的回复:
HTML code<divid="imageArea" class="hide"><divid="demo-portrait"><tablestyle="-moz-user-select:none;"><tr><tdclass="t1" colspan="3"></td></tr><tr><tdclass="t2"></td><tdclass=……
[/Quote]

方便的话js给兄弟发一份吧。。谢谢啦。。
现在也是在为这个东西头疼呢。。

[geyuliu]

[Quote=引用 24 楼 的回复:]

引用 1 楼 wfg114 的回复:
我也在找这个功能，哥们弄好后，也告诉我一下，非常的感谢


这位哥们 我搞出来了 如果要的话，跟我说下
[/Quote]
正在做这个功能，lz提供一下完整的代码吧

[yang_jing_jun]

你好,能分享下么? 我也要这个... [e-mail] 谢谢..