asp.net实现图片在线上传并在线裁剪

最新推荐文章于 2022-09-09 16:43:58 发布
最新推荐文章于 2022-09-09 16:43:58 发布
阅读量513 收藏 1
点赞数 1
分类专栏： ASP.Net

1、说明

　　接上一篇文章uploadify实现多附件上传完成后，又突然用到头像上传并在线裁剪。在网上找个众多例子都没有符合要求的，有一篇文章写的不错，就是文旺老兄写的这篇Asp.Net平台下的图片在线裁剪功能的实现，大家可以看一下，写的真不错。我就是在参考了他的代码下，结合uploadify使用一般处理程序实现了这个功能，写下了这篇在asp.net实现图片在线上传并在线裁剪，有点绕口哈，废话不多说，现奉上代码，供同学们交流参考，有什么不对的地方，望请大家多多提提建议，多谢！多谢！

2、组成

　　首先说明一下代码实现所用到的技术，仅供参考：

　　　　开发工具：vs2010

　　　　目标框架：.NET Framework3.5

　　　　jcrop：Jcrop.js v0.9.12

　　　　Uploadify：uploadify-v3.1

　　　　Jquery：jquery-1.9.0.js

　　最后我会将整个Demo上传，如果同学们的电脑上有开发环境可直接打开项目解决方案运行。

3、代码

　　Default.aspx（测试页面）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<%@ Page Language= "C#"  AutoEventWireup= "true"  CodeBehind= "Default.aspx.cs"  Inherits= "ImgJcrop._Default"  %>
 
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head runat= "server" >
     <title>在线裁剪</title>
     <link href= "Scripts/jcrop/jquery.Jcrop.css"  rel= "stylesheet"  type= "text/css"  />
     <link href= "Scripts/uploadify-v3.1/uploadify.css"  rel= "stylesheet"  type= "text/css"  />
     <script src= "Scripts/jquery.1.9.0.min.js"  type= "text/javascript" ></script>
     <script src= "Scripts/jcrop/jquery.Jcrop.js"  type= "text/javascript" ></script>
     <script src= "Scripts/uploadify-v3.1/jquery.uploadify-3.1.js"  type= "text/javascript" ></script>
     <script type= "text/javascript" >
         $(function () {
             var  jcrop_api, boundx, boundy;
 
             $( "#file_upload" ).uploadify({
                 "auto" :  true ,
                 "buttonText" :  "选择图片" ,
                 "swf" :  "Scripts/uploadify-v3.1/uploadify.swf" ,
                 "uploader" :  "App_Handler/Uploadify.ashx?action=upload" ,
                 "fileTypeExts" :  "*.jpg; *.jpeg; *.gif; *.png; *.bmp" ,
                 "fileTypeDesc" :  "支持的格式：" ,
                 "multi" :  false ,
                 "removeCompleted" :  false ,
                 "onUploadStart" : function (file) {
                     $( "#file_upload-queue" ).hide();
                 },
                 "onUploadSuccess" : function (file, data, response) {
                     var  row = eval( "["  + data +  "]" );
                     if  (row[0][ "status" ] == 0) {
                         $( "#cutimg" ).html( "<img id=\"imgOriginal\" name=\"imgOriginal\" /><div style=\"overflow: hidden; margin-top: 20px;\"><div style=\"width: 120px; height: 120px; overflow: hidden;\"><img id=\"imgPreview\" /></div><br /><input type=\"button\" id=\"btnImgCut\" onclick=\"cutSaveImg()\" value=\"裁剪并保存图片\" /></div>" );
                         $( "#cutimg img" ).each(function () { $( this ).attr( "src" , row[0][ "message" ]); });
                         $( "#hidImgUrl" ).val(row[0][ "message" ]);
                         $( '#imgOriginal' ).Jcrop({
                             onChange: updatePreview,
                             onSelect: updatePreview,
                             aspectRatio: 1,
                             //maxSize: [120, 120],
                             setSelect: [0, 0, 120, 120]
                         }, function () {
                             var  bounds =  this .getBounds();
                             boundx = bounds[0];
                             boundy = bounds[1];
                             jcrop_api =  this ;
                         });
                     }  else  {
                         alert(row[0][ "message" ]);
                     }
                 }
             });
 
             function updatePreview(c) {
 
                 if  (parseInt(c.w) > 0) {
                     var  rx = 120 / c.w;
                     var  ry = 120 / c.h;
 
                     $( "#imgPreview" ).css({
                         width: Math.round(rx * boundx) +  "px" ,
                         height: Math.round(ry * boundy) +  "px" ,
                         marginLeft:  "-"  + Math.round(rx * c.x) +  "px" ,
                         marginTop:  "-"  + Math.round(ry * c.y) +  "px"
                     });
                 }
                 $( "#hidXone" ).val(c.x);
                 $( "#hidYone" ).val(c.y);
                 $( "#hidXtwo" ).val(c.hidXtwo);
                 $( "#hidYtwo" ).val(c.hidYtwo);
                 $( "#hidImgWidth" ).val(c.w);
                 $( "#hidImgHeight" ).val(c.h);
             };
         });
 
         function cutSaveImg() {
             $.ajax({
                 type:  "post" ,
                 url:  "App_Handler/Uploadify.ashx?action=cutsaveimg" ,
                 data: { strImgUrl: $( "#imgOriginal" )[0].src, hidXone: $( "#hidXone" ).val(), hidYone: $( "#hidYone" ).val(), hidImgWidth: $( "#hidImgWidth" ).val(), hidImgHeight: $( "#hidImgHeight" ).val() },
                 dataType:  "html" ,
                 success: function (data) {
                     var  row = eval( "["  + data +  "]" );
                     if  (row[0][ "status" ] == 0) { }
                     alert(row[0][ "message" ]);
                 }
             });
         }
     </script>
</head>
<body>
     <form id= "form1"  runat= "server" >
     <div>
         <input type= "file"  id= "file_upload"  name= "file_upload"  />
     </div>
     <div id= "cutimg" >
     </div>
     <asp:HiddenField ID= "hidXone"  runat= "server"  />
     <asp:HiddenField ID= "hidYone"  runat= "server"  />
     <asp:HiddenField ID= "hidXtwo"  runat= "server"  />
     <asp:HiddenField ID= "hidYtwo"  runat= "server"  />
     <asp:HiddenField ID= "hidImgWidth"  runat= "server"  />
     <asp:HiddenField ID= "hidImgHeight"  runat= "server"  />
     <asp:HiddenField ID= "hidImgUrl"  runat= "server"  />
     </form>
</body>
</html>

　　

Uploadify.ashx（一般处理程序）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<%@ WebHandler Language= "C#"  Class= "UploadifyUpload"  %>
 
using  System;
using  System.Collections;
using  System.Data;
using  System.Web;
using  System.Linq;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  System.Web.SessionState;
using  System.IO;
using  System.Collections.Generic;
using  System.Web.UI.WebControls;
using  System.Text;
using  System.Drawing;
using  System.Drawing.Imaging;
 
public  class  UploadifyUpload : IHttpHandler, IRequiresSessionState
{
 
     public  void  ProcessRequest(HttpContext context)
     {
         context.Response.ContentType =  "text/plain" ;
         context.Response.Charset =  "utf-8" ;
 
         string  action = context.Request[ "action" ];
         switch  (action)
         {
             case  "upload" :
                 //上传图片
                 upload(context);
                 break ;
             case  "cutsaveimg" :
                 //裁剪并保存
                 cutsaveimg(context);
                 break ;
         }
         context.Response.End();
     }
 
     /// <summary>
     /// 上传图片
     /// </summary>
     /// <param name="context"></param>
     private  void  upload(HttpContext context)
     {
         HttpPostedFile postedFile = context.Request.Files[ "Filedata" ];
         if  (postedFile !=  null )
         {
             string  fileName, fileExtension;
             int  fileSize;
             fileName = postedFile.FileName;
             fileSize = postedFile.ContentLength;
             if  (fileName !=  "" )
             {
 
                 fileExtension = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf( '.' ));
                 string  strPath = context.Server.MapPath( "/" ) +  "\\App_File\\Upload\\" ; //设置文件的路径
                 string  strFileName =  "upload"  + DateTime.Now.ToString( "yyyyMMddHHmmss" ) + fileExtension;
                 string  strFileUrl = strPath + strFileName; //保存文件路径
                 if  (!Directory.Exists(strPath))
                 {
                     Directory.CreateDirectory(strPath);
                 }
                 postedFile.SaveAs(strFileUrl); //先保存源文件
 
                 context.Response.Write( "{\"status\":0,\"message\":\"/App_File/Upload/"  + strFileName +  "\"}" );
             }
             else
             {
                 context.Response.Write( "{\"status\":1,\"message\":\"上传失败！\"}" );
             }
         }
         else
         {
             context.Response.Write( "{\"status\":1,\"message\":\"上传失败！\"}" );
         }
     }
 
     /// <summary>
     /// 裁剪并保存图片
     /// </summary>
     /// <param name="context"></param>
     private  void  cutsaveimg(HttpContext context)
     {
         string  strImgUrl = context.Request[ "strImgUrl" ];
         string  strXone = context.Request[ "hidXone" ];
         string  strYone = context.Request[ "hidYone" ];
         string  strImgWidth = context.Request[ "hidImgWidth" ];
         string  strImgHeight = context.Request[ "hidImgHeight" ];
 
         string [] urls = strImgUrl.Split( '/' );
         string  str_url = urls.Last();
 
         try
         {
             string  strOldFiel = context.Server.MapPath( "~/App_File/Upload/" );
             string  strNewFiel = context.Server.MapPath( "~/App_File/Cut/" );
             string  strOldUrl = Path.Combine(strOldFiel, str_url);
             string  strNewUrl = Path.Combine(strNewFiel,  "cut"  + DateTime.Now.ToString( "yyyyMMddHHmmss" ) +  "."  + str_url.Split( '.' )[1]);
             if  (!Directory.Exists(strNewFiel))
             {
                 Directory.CreateDirectory(strNewFiel);
             }
             int  intStartX =  int .Parse(strXone);
             int  intStartY =  int .Parse(strYone);
             int  intWidth =  int .Parse(strImgWidth);
             int  intHeight =  int .Parse(strImgHeight);
             CutGeneratedImage(intStartX, intStartY, intWidth, intHeight, strOldUrl, strNewUrl);
             context.Response.Write( "{\"status\":0,\"message\":\"裁剪成功并保存！\"}" );
         }
         catch
         {
             context.Response.Write( "{\"status\":1,\"message\":\"裁剪失败！\"}" );
         }
     }
     /// <summary>
     /// 裁剪图片
     /// </summary>
     /// <param name="intWidth">要缩小裁剪图片宽度</param>
     /// <param name="intHeight">要缩小裁剪图片长度</param>
     /// <param name="strOldImgUrl">要处理图片路径</param>
     /// <param name="strNewImgUrl">处理完毕图片路径</param>
     public  void  CutGeneratedImage( int  intStartX,  int  intStartY,  int  intWidth,  int  intHeight,  string  strOldImgUrl,  string  strNewImgUrl)
     {
         //上传标准图大小
         int  intStandardWidth = 120;
         int  intStandardHeight = 120;
 
         int  intReduceWidth = 0;  // 缩小的宽度
         int  intReduceHeight = 0;  // 缩小的高度
         int  intCutOutWidth = 0;  // 裁剪的宽度
         int  intCutOutHeight = 0;  // 裁剪的高度
         int  level = 100;  //缩略图的质量 1-100的范围
 
         //获得缩小，裁剪大小
         if  (intStandardHeight * intWidth / intStandardWidth > intHeight)
         {
             intReduceWidth = intWidth;
             intReduceHeight = intStandardHeight * intWidth / intStandardWidth;
             intCutOutWidth = intWidth;
             intCutOutHeight = intHeight;
         }
         else  if  (intStandardHeight * intWidth / intStandardWidth < intHeight)
         {
             intReduceWidth = intStandardWidth * intHeight / intStandardHeight;
             intReduceHeight = intHeight;
             intCutOutWidth = intWidth;
             intCutOutHeight = intHeight;
         }
         else
         {
             intReduceWidth = intWidth;
             intReduceHeight = intHeight;
             intCutOutWidth = intWidth;
             intCutOutHeight = intHeight;
         }
 
         //通过连接创建Image对象
         //System.Drawing.Image oldimage = System.Drawing.Image.FromFile(strOldImgUrl);
         //oldimage.Save(Server.MapPath("tepm.jpg"));
         //oldimage.Dispose();
 
         //缩小图片
         Bitmap bm =  new  Bitmap(strOldImgUrl);
 
         //处理JPG质量的函数
         ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
         ImageCodecInfo ici =  null ;
         foreach  (ImageCodecInfo codec  in  codecs)
         {
             if  (codec.MimeType ==  "image/jpeg" )
             {
                 ici = codec;
                 break ;
             }
 
         }
         EncoderParameters ep =  new  EncoderParameters();
         ep.Param[0] =  new  EncoderParameter(System.Drawing.Imaging.Encoder.Quality, ( long )level);
 
         //裁剪图片
         Rectangle cloneRect =  new  Rectangle(intStartX, intStartY, intCutOutWidth, intCutOutHeight);
         PixelFormat format = bm.PixelFormat;
         Bitmap cloneBitmap = bm.Clone(cloneRect, format);
 
         //保存图片
         cloneBitmap.Save(strNewImgUrl, ici, ep);
         bm.Dispose();
     }
 
     public  bool  IsReusable
     {
         get
         {
             return  false ;
         }
     }
}

　　

4、最后奉上Demo

　　ImgJcrop 

 

作者：小路 QQ：2490024434 
出处：http://www.cnblogs.com/lengzhan/ 
本文版权归【冷战】和博客园所有，欢迎转载收藏，未经作者同意须保留此段声明，否则保留追究法律责任的权利。

my98800
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
我见过最好的.NET/C#图片工具(裁剪、缩放、与加水印)
.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造
01-04 947
回复'wpf'，领取高薪热门【WPF上位机+工业互联网】从零手写实战。回复'面试'，获取C#/.NET/.NET Core面试宝典。回复'Modbus'，领取初识C#+上位机Modbus通信。回复'blazor'，领取blazor从入门到实战。回复'Linux'，领取Linux从入门到精通。回复'MongoDB'，领取MongoDB实战。回复'NET'，领取.NET零基础入门到实战。回复'vue'，领取vue前端从入门到精通。回复'加群'，进.NET技术社区交流群。回复'C#'，领取零基础学习C#编程。
基于asp.net实现图片在线上传并在线裁剪功能
10-20
在ASP.NET环境中，实现图片在线上传并在线裁剪的功能是一个常见的需求，这通常涉及到前端与后端的交互以及图像处理技术。以下是一个基于ASP.NET、jQuery、Jcrop和Uploadify的实现步骤： 1. **前端界面**： - 使用...
asp.net图片上传、剪裁生成头像缩略图源代码
08-01
asp.net图片上传、剪裁生成头像缩略图源代码，使用jquery，可以对图片放大缩小，移动剪裁区域。简单易懂，分三步操作： 第一步：上传图片文件，验证文件格式、限制文件大小 第二步：剪裁，可以放大缩小（有限制），移动剪裁区域 第三步：预览保存
asp.net 头像上传及预览剪裁实例源码
01-25
【工控老马出品，必属精品，亲测校正，质量保证】 资源名：asp.net 头像上传及预览剪裁实例源码 资源类型：程序源代码 源码说明： 1.上传并预览，用户可以任意选择区域，支持头像旋转 2.支持上传成功，js 回调函数 3.无论图片过大还是过小，都可以按照固定大小显示 4.支持亮度，对比度，饱和度修饰 5.支持头像拍照保存 6.支持php，asp，jsp 调用 7.兼容性好，任何浏览器都正常使用 适合人群：新手及有一定经验的开发人员
使用asp.net上传图片并且裁剪的方法
weixin_34087307的博客
01-06 196
工欲善其事，必先利其器，坚持才能更好 这篇文章主要是强调怎么使用asp.net上传图片并且能够裁剪，这个功能主要使用在注册信息的时候需要上传头像并且图片格式很大的时候能够把图片裁剪成更小的图片。下面来看一下具体的实现过程。 第一步，首先利用vs创建一个webform页面。 第二步，在uploadimg.aspx中加入一个upload控件，一个上传按钮，一个显示图片的控件，一个重置按钮，一...
使用.Net对图片进行裁剪、缩放、与加水印
biyusr的专栏
09-09 529
图片的裁剪、缩放、与加水印，是任何系统经常要用到的功能，它们现已集成到IUtility工具中，使用十分简便。（具体代码将在文末给出，支持.NET/.NET Framework/.NET Core）注意：X、Y坐标，是以图片左上角为原点而定，单位是像素。加文字水印的方法使用说明如下：​​​​​​​。以上4个实验的具体代码如下：​​​​​​​。缩略的方法使用说明如下：​​​​​​​。
【ASP.NET编程知识】基于asp.net实现图片在线上传并在线裁剪功能.docx
最新发布
05-21
在ASP.NET编程中，实现图片在线上传并在线裁剪功能是一项常见的需求，尤其在网站开发中，比如用户头像设置、产品图片处理等场景。本文将介绍如何使用ASP.NET结合JavaScript库Jcrop和Uploadify来实现这一功能。 首先...
Asp.Net平台下的图片在线裁剪功能的实现
12-16
在Asp.Net平台下实现图片在线裁剪功能是一项结合了前端与后端技术的任务，主要涉及到了jQuery插件、HTML/CSS以及C#语言的应用。本文将深入解析如何利用jQuery的Jcrop插件和System.Drawing.Image类来实现这一功能。 ...
jQuery+ASP.NET在线裁剪图片
03-16
总结来说，jQuery+ASP.NET在线裁剪图片的实现结合了前端和后端的技术，通过jQuery的交互性和ASP.NET的服务器处理能力，为用户提供了一个便捷的图片编辑体验。这个过程中涉及到了Ajax异步通信、图片处理、JavaScript...
一个基于C#+ASP.NET实现的图片裁剪Image Cropping 处理控件代码
10-02
一个基于C#+ASP.NET实现的图片裁剪 image cropping 处理控件代码。
C# Asp.net编写实现图片缩放及裁剪例题，头像裁剪例题
04-12
C# Asp.net编写实现图片缩放及裁剪例题，头像裁剪例题。可以浏览图片后进行裁剪，裁剪时可以根据操作移动位置和区域，且可以缩放大小等进行裁剪操作。 自己编写了一段时间，供大家分享交流学习。
ASP.NET头像前剪切
11-01
ASP.NET下里用Jcrop+swfupload实现头像在线剪切。
js+asp.net裁剪图片并上传的例子
12-19
解决上传图片需要裁剪的功能。 js+asp.net。 js解决裁剪问题， 此例子跟C#完美结合，实现美图裁剪上传功能。
ASP.NET+FLASH头像裁剪
01-18
相信有一部分开发人员，都在苦苦寻找 ASP.NET 头像裁剪，例子虽然很多（比如JQuery ，flash） 但是源码改动太大，失去了快捷开发的意义了，不如自己重写了，此代码稍作修改，即可使其他开发人员能够在短短几分钟的时间内就能集成到自己的项目中。。。。 注意： 该Flash界面无任何logo或者任何广告信息，纯白界面，适合任何网站的插入引用。
.net 头像上传及裁剪实例
07-01
头像上传及裁剪
ASP.NET使用Jcrop插件实现图片上传裁剪功能
cgs的博客
06-22 1297
一、需求 1.需求：在Web端实现上传图片功能的基础上，增加预览图片并裁剪图片功能。 2.未更改之前如下图所示： 3.更改后的功能，当点击浏览(原生input type='file'控件)选择图片上传后，可以调整裁剪框大小及位置，点击上传按钮实现裁剪并上传，点击确定后将裁剪后的图片路径赋值给父页面的文章缩略图后的input。 二、实现 1.思路：使用input type='hid
asp.net 头像上传裁剪模块
记录、分享
12-13 1137
asp.net 头像上传裁剪模块<br /> <br /><br /> <br />1.界面演示<br />2.代码下载地址<br /> <br /><br /> 1.界面演示<br /> <br /><br /> 2.代码下载地址<br /> <br />http://xuqianghit.download.csdn.net/
.net 裁剪图片（不压缩）
swjian1997的博客
12-20 1019
命名空间： using System.Drawing; using System.Drawing.Imaging; /// &lt;summary&gt; /// 生成图片缩略文件 /// &lt;/summary&gt; /// &lt;param name="originalImage"&gt;图片源文...
ASP.NET实现实时图片上传与在线裁剪：代码与Demo
在本文档中，我们将深入...总结起来，这篇文档涵盖了ASP.NET开发中图片在线上传与裁剪功能的全面教程，包括技术选型、代码实现和实际操作步骤，对于想要在项目中引入这类功能的开发者来说，是一份非常实用的参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值