首页 > > 网络编程 > Asp.Net编程 >

使用GDI对SWFUpload上传的图片进行截取头像

2018-06-22 07:47:29来源：未知阅读 ()

看此文章之前先看 SWFUpload异步上传图像

GDI对图像的处理能力非常强大相当繁琐复杂我们这次会用到关于处理IMG的一些用法

这次会用到 JqueryUI 完成一下Div的拖动和改变大小

可以到JqueryUI官网下载即可

SWFUpload基础上传就不细讲了上一篇随笔里有说到

首先实例SWFUpload对象

 1 var swfu;
 2         window.onload = function () {
 3             swfu = new SWFUpload({
 4                 // Backend Settings
 5                 upload_url: "Ashx/CutPhoto.Ashx?action=up",
 6                 post_params: {
 7                     "ASPSESSID": "<%=Session.SessionID %>"
 8                 },
 9 
10                 // File Upload Settings
11                 file_size_limit: "4 MB",
12                 file_types: "*.jpg;*.gif;*.png",
13                 file_types_description: "JPG Images",
14                 file_upload_limit: 0,    // Zero means unlimited
15 
16                 // Event Handler Settings - these functions as defined in Handlers.js
17                 //  The handlers are not part of SWFUpload but are part of my website and control how
18                 //  my website reacts to the SWFUpload events.
19                 swfupload_preload_handler: preLoad,
20                 swfupload_load_failed_handler: loadFailed,
21                 file_queue_error_handler: fileQueueError,
22                 file_dialog_complete_handler: fileDialogComplete,
23                 upload_progress_handler: uploadProgress,
24                 upload_error_handler: uploadError,
25                 //上传完成 uploadSuccess
26                 upload_success_handler: ShowData,
27                 upload_complete_handler: uploadComplete,
28 
29                 // Button settings
30                 button_image_url: "SWFUpLoad/images/XPButtonNoText_160x22.png",
31                 button_placeholder_id: "spanButtonPlaceholder",
32                 button_width: 160,
33                 button_height: 22,
34                 button_text: '<span class="button">Select Images <span class="buttonSmall">(4 MB Max)</span></span>',
35                 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
36                 button_text_top_padding: 1,
37                 button_text_left_padding: 5,
38 
39                 // Flash Settings
40                 flash_url: "SWFUpLoad/swfupload.swf",    // Relative to this file
41                 flash9_url: "SWFUpLoad/swfupload_FP9.swf",    // Relative to this file
42 
43                 custom_settings: {
44                     upload_target: "divFileProgressContainer"
45                 },
46 
47                 // Debug Settings
48                 debug: false
49             });
50         }

必要的Html

 1 <body>
 2     <div id="content">
 3         <div id="swfu_container" style="margin: 0px 10px;">
 4             <div>
 5                 <span id="spanButtonPlaceholder"></span>
 6             </div>
 7             <div id="divFileProgressContainer" style="height: 75px"></div>
 8             <div id="divContent" style="width: 300px; height: 300px">
 9                 <div id="divCut" style="width: 100px; height: 100px; border: dashed 1px #f00"></div>
10             </div>
11         </div>
12         <div>
13             <input type="button" value="截取头像" id="btnCut" />
14         </div>
15         <img id="imgSrc" />
16     </div>
17 </body>

这里 divContent用于显示上传成功的图像 divCut用于截取

JqueryUI渲染截取Div可拖动和改变大小

1 $("#divCut").draggable({ containment: 'parent' }).resizable({ containment: '#divContent' });

渲染后效果图如下

要截取头像就必须确定两个矩形

1.原图像矩形（这个可以通过服务端通过文件流确定）

2.要截取的矩形大小和位置（主要） y 为据浏览器顶端的位置 x 为浏览器据左端的位置

确定数据异步发送

 1 $(function () {
 2              
 3             //确定要截取的范围
 4             $("#btnCut").click(function () {
 5                 // offset 获取元素的绝对坐标
 6                 var y = $("#divCut").offset().top - $("#divContent").offset().top;//纵坐标
 7                 var x = $("#divCut").offset().left - $("#divContent").offset().left;//横坐标
 8                 var width = $("#divCut").width();//宽度
 9                 var height = $("#divCut").height();//高度
10                 //将截取的数据发到服务端做处理
11                 $.post("Ashx/CutPhoto.Ashx", {
12                     "action": "cut",
13                     "x": parseInt(x),
14                     "y": parseInt(y),
15                     "width": parseInt(width),
16                     "height": parseInt(height),
17                     "imgSrc": d[1]
18                 }, function (data) {
19                     $("#imgSrc").attr("src", data);
20                 });
21             });
22         });

定义一般处理程序处理图片处理图像的一些细节原理写在注释里

因为所显示图片的Div里面要在放个Div进行完成截取所以这里一半处理程序需要回发图片的宽高（上传时）

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Drawing;
 4 using System.IO;
 5 using System.Linq;
 6 using System.Web;
 7 
 8 namespace SWFUpLoad.Ashx
 9 {
10     /// <summary>
11     /// CutPhoto 的摘要说明
12     /// </summary>
13     public class CutPhoto : IHttpHandler
14     {
15 
16         public void ProcessRequest(HttpContext context)
17         {
18             context.Response.ContentType = "text/plain";
19             //判断操作
20             string action = context.Request["action"];
21             if (action.Equals("up"))//上传
22             {
23                 HttpPostedFile file = context.Request.Files["Filedata"];//接收文件
24                 string fileName = Path.GetFileName(file.FileName);//获取文件名
25                 string FileExt = Path.GetExtension(fileName);//获取文件类型
26                 if (FileExt == ".jpg" || FileExt == ".png" || FileExt == ".JPG")
27                 {
28                     //通过文件流 或者物理路径 创建Image实体
29                     using (Image img = Image.FromStream(file.InputStream))
30                     {
31                         string imgSrc = DateTime.Now.ToString("yyyyMMddHHmmss") + FileExt;
32                         file.SaveAs(context.Server.MapPath("/UploadPhoto/" + imgSrc));
33                         context.Response.Write("ok:/UploadPhoto/" + imgSrc + ":" + img.Width + ":" + img.Height);
34                     }
35                 }
36             }
37             else if (action.Equals("cut"))//头像截取
38             {
39                 //接收数据
40                 int x = Convert.ToInt32(context.Request.Form["x"]);
41                 int y = Convert.ToInt32(context.Request.Form["y"]);
42                 int width = Convert.ToInt32(context.Request.Form["width"]);
43                 int height = Convert.ToInt32(context.Request.Form["height"]);
44                 string imgSrc = context.Request.Form["imgSrc"];//接受保存的图片
45                 //将传递过来的范围，画在画布上，在保存画布
46                 using (Bitmap map = new Bitmap(width, height))
47                 {
48                     //为画布创建画笔
49                     using (Graphics g = Graphics.FromImage(map))
50                     {
51                         //创建图片
52                         using (Image img = Image.FromFile(context.Server.MapPath(imgSrc)))
53                         {
54                             //第11的重载 将图片画到画布上
55                             //img 对哪张图片进行操作
56                             //Rectangle 画布大小
57                             //Rectangle 画的部分
58                             g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
59                             //定义图片名称
60                             string newimgSrc = DateTime.Now.ToString("yyyyMMddHHmmss") + "_Cut" + ".JPG";
61                             map.Save(context.Server.MapPath("/UploadPhoto/" + newimgSrc));
62                             context.Response.Write("/UploadPhoto/" + newimgSrc);
63                         }
64                     }
65                 }
66             }
67         }
68 
69         public bool IsReusable
70         {
71             get
72             {
73                 return false;
74             }
75         }
76     }
77 }

定义上传成功后的函数这是显示上传后的图片截取后的头像将会在$.ajax里面

1 var d;
2         //上传成功
3         function ShowData(file, serverData) {
4             d = serverData.split(":");
5             if (d[0] == "ok") {
6                 //$("#imgSrc").attr("src", d[1]);
7                 $("#divContent").css("backgroundImage", "url(" + d[1] + ")").css("width", d[2] + "px").css("height", d[3] + "px");
8             }
9         }

注意这里 d 设为全局变量用于接收图片信息