类似csdn中我的社区的上传头像功能是如何实现的？

Question

点我的社区-上传头像，上传一个后会出现一个裁减的功能。我想问下这个功能如何实现？
我还想给他加一个旋转。^_&我的想法是这样的：用js操作这个图像，产生要剪贴的坐标和区域（增加旋转角度），确定后在服务器端操作生成不知道这样行否。
期望csdn高人回答。如果给源码参考就更好咯&_^

Answer 1

http://www.defusion.org.uk/demos/060519/cropper.php前台剪裁图片，向后台传入剪裁的参数。后台直接剪裁，然后保存

Answer 2

http://www.defusion.org.uk/demos/060519/cropper.php
这个没旋转...

Answer 3

嗯，我正在剽窃中。我的js也有点差，准备找csdn上经常开除那个小子，让他看看

Answer 4

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);
很多人都知道上面这段代码，看看能不能改造一下...

Answer 5

你可以先去http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/下载压缩包，里面有好多demo,你可以选一种你想要的。我选定的是example-Previewok.htm 带有图片预览的。你可以在 onEndCrop获得参数. function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
} 
如果要剪裁图片，需要的参数为4个：
 $( 'x1' ).value = coords.x1;
 $( 'y1' ).value = coords.y1;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;传入后台之后，后台处理的方法为：
从网上找的。 /// <summary>
    /// 剪裁 -- 用GDI+
    /// </summary>
    /// <param name="b">原始Bitmap</param>
    /// <param name="StartX">开始坐标X</param>
    /// <param name="StartY">开始坐标Y</param>
    /// <param name="iWidth">宽度</param>
    /// <param name="iHeight">高度</param>
    /// <returns>剪裁后的Bitmap</returns>
    public static Bitmap KiCut(Bitmap b, int StartX, int StartY, int iWidth, int iHeight)
    {
        if (b == null)
        {
            return null;
        }        int w = b.Width;
        int h = b.Height;        if (StartX >= w || StartY >= h)
        {
            return null;
        }        if (StartX + iWidth > w)
        {
            iWidth = w - StartX;
        }        if (StartY + iHeight > h)
        {
            iHeight = h - StartY;
        }        try
        {
            Bitmap bmpOut = new Bitmap(iWidth, iHeight, PixelFormat.Format24bppRgb);            Graphics g = Graphics.FromImage(bmpOut);
            g.DrawImage(b, new Rectangle(0, 0, iWidth, iHeight), new Rectangle(StartX, StartY, iWidth, iHeight), GraphicsUnit.Pixel);
            g.Dispose();            return bmpOut;
        }
        catch
        {
            return null;
        }
    }调用： 
  //要剪裁的照片名 imgName
  Bitmap bit = new Bitmap(imgName);
  // 参数为 找剪裁的照片，及其坐标
  Bitmap myBit = KiCut(bit, int.Parse(x), int.Parse(y), int.Parse(width), int.Parse(heigth));
 //剪裁之后新照片存放的位置及其名称
  string strSaveImage = Server.MapPath("~/uploadImage/" + myImgName);
  //保存照片
  myBit.Save(strSaveImage);

Answer 6

一个方便使用的在线截图Web控件－WebImageMaker:
http://www.cnblogs.com/cclinux/archive/2006/11/21/567489.html