Jcrop文檔:http://code.ciaoca.com/jquery/jcrop/
C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/2932145.html

上傳圖片思路:
　　

1.file選擇圖片:
<input type="file" class="file" accept="image/gif,image/jpeg,image/png" />

2.上傳圖片--接口返回上傳後服務器圖片路徑到前端

3.將圖片展示出來

4. 啟用裁剪

  var core = {
        showCoords: function
 
 (c) {
           //存儲裁剪信息
            vm.imgX(c.x);
            vm.imgX2(c.x2);
            vm.imgY(c.y);
            vm.imgY2(c.y2);
            vm.imgHeight(c.h);
            vm.imgWidth(c.w);
        },
}

     var jcropApi;
     var jm = {
        allowSelect: true,
        allowMove: 
 
true,
        allowResize: true,
        bgOpacity: 0.3,
        aspectRatio: 1,
        minSize: [30, 30],
        maxSize: [1000, 1000],
        onChange: core.showCoords,
        onSelect: core.showCoords
       }  
        //啟用裁剪
            $("#defaultImg").Jcrop(jm, function () {
                jcropApi 
 
= this;
                //是否初始選框
                    jcropApi.setSelect([0, 0, 140, 140]);
            });   

5.將裁剪信息與圖片路徑傳入後臺進行處理保存到服務器並返回裁剪後的圖片路徑

提示:
更換圖片
jcropApi.setImage(新的圖片路徑, function () {
                jcropApi = this;
                jcropApi.setSelect([0, 0, 140, 140]);
            });

上傳、裁剪圖片-----Jcrop圖片裁剪插件