急求在线编辑图片用于个人头像（可以放大，缩小，拖拉）
小弟现在的项目遇到一个问题，
要求用户在本地上传个人照片，用户自己可以放大，缩小，拖拉，选择好尺寸
保存生成头像就可以了，急求各位大侠们
就是csdn的头像功能修改
[解决办法]
参考这个：http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html
将弄好的位置和大小和图片传到服务器来裁切
[解决办法]
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(); })}