上传图片回显，头像截取 SWFload areaSelect插件

  1 @{
  2     ViewBag.Title = "Index";
  3     Layout = "~/Views/Shared/_LayoutPage.cshtml";
  4 }
  5 
  6 @section head{
  7 
  8 <script src="~/Content/SWFUpload/swfupload.js"></script>
  9 <script src="~/Content/SWFUpload/handlers.js"></script>
 10 <link href="~/Content/CSS/imgareaselect-default.css" rel="stylesheet" />
 11 <script src="~/Scripts/jquery.imgareaselect.min.js"></script>
 12 <script type="text/javascript">
 13         var swfu;
 14         window.onload = function () {
 15             swfu = new SWFUpload({
 16                 // Backend Settings
 17                 upload_url: "/UserInfoManager/Upload",
 18                 post_params: {
 19                     "ASPSESSID": "@{
 20                         try
 21                         {
 22                             @Session.SessionID;
 23                         }
 24                         catch
 25                         {
 26                             
 27                         }
 28                     }"
 29                 },
 30 
 31                 // File Upload Settings
 32                 file_size_limit: "2 MB",
 33                 file_types: "*.jpg;*.gif;",
 34                 file_types_description: "JPG Images",
 35                 file_upload_limit: 0,    // Zero means unlimited
 36 
 37                 // Event Handler Settings - these functions as defined in Handlers.js
 38                 //  The handlers are not part of SWFUpload but are part of my website and control how
 39                 //  my website reacts to the SWFUpload events.
 40                 swfupload_preload_handler: preLoad,
 41                 swfupload_load_failed_handler: loadFailed,
 42                 file_queue_error_handler: fileQueueError,
 43                 file_dialog_complete_handler: fileDialogComplete,
 44                 upload_progress_handler: uploadProgress,
 45                 upload_error_handler: uploadError,
 46                 upload_success_handler: showImage,
 47                 upload_complete_handler: uploadComplete,
 48 
 49                 // Button settings
 50                 button_image_url: "/Content/SWFUpload/images/XPButtonNoText_160x22.png",
 51                 button_placeholder_id: "spanButtonPlaceholder",
 52                 button_width: 160,
 53                 button_height: 22,
 54                 button_text: ‘<span class="button">请选择图片<span class="buttonSmall">(2 MB Max)</span></span>‘,
 55                 button_text_style: ‘.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }‘,
 56                 button_text_top_padding: 1,
 57                 button_text_left_padding: 5,
 58 
 59                 // Flash Settings
 60                 flash_url: "/Content/SWFUpload/swfupload.swf",    // Relative to this file
 61                 flash9_url: "/Content/SWFUpload/swfupload_FP9.swf",    // Relative to this file
 62 
 63                 custom_settings: {
 64                     upload_target: "divFileProgressContainer"
 65                 },
 66 
 67                 // Debug Settings
 68                 debug: false
 69             });
 70         }
 71     $(function () {
 72         $("#btnCut").click(function () {
 73             cutPhoto();
 74         });
 75     });
 76    
 77     //上传成功后
 78     function showImage(file, serverData) {
 79         var DataArray = serverData.split(":");
 80         if (DataArray[0] == "ok") {
 81             $("#selectbanner").attr("src", DataArray[1]);
 82             $(‘#selectbanner‘).imgAreaSelect({
 83                 selectionColor: ‘blue‘, x1: 0, y1: 0, x2: 50,
 84 
 85              y2: 50, selectionOpacity: 0.2, onSelectEnd: preview
 86             });
 87         }  
 88         else
 89         {
 90             alert(DataArray[1]);
 91         }
 92     }
 93     
 94     //头像截取
 95     function cutPhoto()
 96     {
 97         var params={
 98             x:$("#selectbanner").data("x"),
 99             y:$("#selectbanner").data("y"),
100             width:$("#selectbanner").data("w"),
101             height:$("#selectbanner").data("h"),
102             imgUrl:$("#selectbanner").attr("src")
103         };
104         $.post("/UserInfoManager/CutPhoto",params, function (url) {
105             $("#cutPhoto").attr("src",url);
106         });
107     }
108 
109     //截图完毕
110     function preview(img, selection) {
111 
112         $(‘#selectbanner‘).data(‘x‘, selection.x1);
113 
114         $(‘#selectbanner‘).data(‘y‘, selection.y1);
115 
116         $(‘#selectbanner‘).data(‘w‘, selection.width);
117 
118         $(‘#selectbanner‘).data(‘h‘, selection.height);
119 
120     }
121 
122     //头像截取
123 </script>
124 }
125 <div id="content">
126     <div id="swfu_container" style="margin: 0px 10px;">
127         <div>
128             <span id="spanButtonPlaceholder"></span>
129         </div>
130         <div id="divFileProgressContainer" style="height: 75px;"></div>
131         <div id="thumbnails"></div>        
132         <img id="selectbanner"/>
133         <input type="button" id="btnCut" value="头像截取" />
134         <br />
135             <img id="cutPhoto" />
136         
137     </div>
138 </div>

 1    #region 文件上传
 2         public ActionResult Upload()
 3         {
 4             //接受文件数据
 5               HttpPostedFileBase file=Request.Files["FileData"];
 6             
 7             //获得文件名和文件扩展名
 8               string fileName = Path.GetFileName(file.FileName);
 9               string fileExt = Path.GetExtension(fileName);
10 
11             if(fileExt==".jpg")
12             {
13                 //创建文件夹
14                 string dir = "D:/VS 2013/图书商城/WHL.BookShop.WebUI/UploadImage/" + DateTime.Now.Year + "/"+DateTime.Now.Month + "/"+DateTime.Now.Day+"/";
15                 DirectoryInfo d= Directory.CreateDirectory(Path.GetDirectoryName(dir));
16                 string fullDir = dir + StreamExtension.GetMD5(file.InputStream) + ".jpg";
17                 //保存原图
18                 file.SaveAs(fullDir);
19                 string thumbPath =Guid.NewGuid().ToString();
20                 //缩略图
21                 Common.ImageClass.MakeThumbnail(fullDir, Request.MapPath("/UploadImage/"+thumbPath) + ".jpg", 200, 300, "w");
22                 //文字
23                 Common.ImageClass.LetterWatermark(Request.MapPath("/UploadImage/"+thumbPath+".jpg"),20,"翠氛围范文芳花",System.Drawing.Color.Red,"180");
24                 using(Image pic=Image.FromFile(Request.MapPath("/UploadImage/"+thumbPath+".jpg")))
25                 {
26                     return Content("ok:"+"/UploadImage/"+thumbPath+".jpg"+":"+pic.Width+":"+pic.Height);
27                 }
28                
29             }
30             else
31             {
32                 return Content("error:文件格式错误！");
33             }
34 
35         }
36         #endregion
37 
38         #region 头像截取
39         public ActionResult CutPhoto()
40         {
41             int x = string.IsNullOrEmpty(Request["x"]) ? 0 : Convert.ToInt32(Request["x"]);
42             int y = string.IsNullOrEmpty(Request["y"]) ? 0 : Convert.ToInt32(Request["y"]);
43             int width = string.IsNullOrEmpty(Request["width"]) ? 0 : Convert.ToInt32(Request["width"]);
44             int height = string.IsNullOrEmpty(Request["height"]) ? 0 : Convert.ToInt32(Request["height"]);
45             string imgUrl = string.IsNullOrEmpty(Request["imgUrl"])? "" : Request["imgUrl"];
46 
47             //先创建指定宽高的画布
48             //创建图片，并在画布上根据 图片指定绘制部分 绘制新的图片
49             //将画布保存起来，并且指定图片类型（减少图片的大小）
50             using(Bitmap map=new Bitmap(width,height)){
51                 using(Graphics g=Graphics.FromImage(map))
52                 {
53                     using (Image img = Image.FromFile(Request.MapPath(imgUrl)))
54                     {
55                         g.DrawImage(img,new Rectangle(0,0,width,height),new Rectangle(x,y,width,height),GraphicsUnit.Pixel);
56                     }
57                 }
58                 string guid=Guid.NewGuid().ToString();
59                 map.Save(Request.MapPath("/UploadImage/" + guid + ".jpg"), System.Drawing.Imaging.ImageFormat.Jpeg);
60                 return Content("/UploadImage/"+guid+".jpg");
61             }
62         }
63         #endregion