当前位置：Gxlcms > asp.net > 基于asp.net实现图片在线上传并在线裁剪功能

基于asp.net实现图片在线上传并在线裁剪功能

时间：2021-07-01 10:21:17 帮助过：6人阅读

1、说明

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

Uploadify.ashx（一般处理程序）

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

4、最后奉上Demo

　　ImgJcrop

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持脚本之家！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！