使用技术：Asp.net MVC与jquery.uploadify,Jcrop

首先上页面

01 <strong><!DOCTYPE html>
02  <html>
03  <head>
04      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
05      <title>Index</title>
06      <link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css"/>
07      <script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js"type="text/javascript"></script>
08      <script src="http://www.cnblogs.com/Js/uploadify/swfobject.js"type="text/javascript"></script>
09      <script src="http://www.cnblogs.com/Js/uploadify/jquery.uploadify.v2.1.4.min.js"type="text/javascript"></script>
10      <link href="http://www.cnblogs.com/Js/uploadify/uploadify.css" rel="stylesheet"type="text/css" />
11      <script src="http://www.cnblogs.com/Js/crop/jquery.Jcrop.min.js"type="text/javascript"></script>
12      <link href="http://www.cnblogs.com/Js/crop/jquery.Jcrop.css" rel="stylesheet"type="text/css" />
13      <style type="text/css">
14  /* 上传按钮 */
15          #uploadifyUploader
16  {
17              margin-top: 235px;
18  }
19  /* 加载条 */
20          .uploadifyQueueItem
21  {
22              margin: 0 auto;
23  }
24          #img-up
25  {
26              width: 700px;
27              height: 500px;
28              background-color: #e8f0f6;
29              text-align: center;
30  }
31          #img-prev-container
32  {
33              width: 200px;
34              height: 200px;
35              overflow: hidden;
36              clear: both;
37  }
38          #img-crop
39  {
40              display: none;
41  }
42  </style>
43  </head>
44  <body>
45      <div id="img-up">
46          <input type="file" id="uploadify" name="uploadify" />
47          <div id="fileQueue">
48          </div>
49      </div>
50      <div id="img-crop">
51          <div id="img-prev-container">
52              <img id="img-preview" />
53          </div>
54          <img id="img-uploadify" />
55          <form action="/Crop/tryCrop" method="post">
56          <input type="hidden" name="x" id="x" />
57          <input type="hidden" name="y" id="y" />
58          <input type="hidden" name="w" id="w" />
59          <input type="hidden" name="h" id="h" />
60          <input type="hidden" name="img" id="img" />
61          <input type="submit" value="剪裁" />
62          </form>
63      </div>
64  </body>
65  </html></strong>

JS

01 <script type="text/javascript">
02      $(function () {
03          var jcrop_api, boundx, boundy;
04   
05          function updateCoords(c) {
06              $('#x').val(c.x);
07              $('#y').val(c.y);
08              $('#w').val(c.w);
09              $('#h').val(c.h);
10          };
11          function updatePreview(c) {
12              if (parseInt(c.w) > 0) {
13                  /* 商必须与img-preview宽高一致 */
14                  var rx = 200 / c.w;
15                  var ry = 200 / c.h;
16   
17                  $('#img-preview').css({
18                      width: Math.round(rx * boundx) + 'px',
19                      height: Math.round(ry * boundy) + 'px',
20                      marginLeft: '-' + Math.round(rx * c.x) + 'px',
21                      marginTop: '-' + Math.round(ry * c.y) + 'px'
22                  });
23              }
24          };
25   
26          $("#uploadify").uploadify({
27              'uploader': 'http://www.cnblogs.com/Js/uploadify/uploadify.swf',
28              'script': '/Crop/upload',
29              'cancelImg': 'http://www.cnblogs.com/Js/uploadify/cancel.png',
30              'folder': 'Images',
31              'queueID': 'fileQueue',
32              'auto': true,
33              'buttonText': 'upload image',
34              'queueSizeLimit': 1,
35              'multi': false,
36              'fileDesc': 'jpg,gif',
37              'fileExt': '*.jpg;*.gif',
38              'sizeLimit': '819200',
39              'onComplete': function (event, queueID, fileObj, response, data) {
40                  var result = eval('(' + response + ')');
41                  if ('0' == result.id) {
42                      $('#img-up').remove();
43                      $('#img-crop').css("display", "block");
44                      /* 绑定图片名称 */
45                      variname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
46                      $('#img').val(iname);
47                      /* 加载原始图片 */
48                      $('#img-preview,#img-uploadify').attr("src", result.mess);
49                      /* 加载剪裁插件 */
50                      $('#img-uploadify').Jcrop({
51                          onChange: updatePreview,
52                          onSelect: updatePreview,
53                          aspectRatio: 1,
54                          onSelect: updateCoords,
55                          setSelect: [0, 0, 200, 200]
56                      }, function () {
57                          var bounds = this.getBounds();
58                          boundx = bounds[0];
59                          boundy = bounds[1];
60                          jcrop_api = this;
61                      });
62                  } else if ('1' == result.id) {
63                      /* 异常信息提示 */
64                      alert(result.mess)
65                  }
66              }
67          });
68      });   
69  </script>
01 public class CropController : Controller
02      {
03          public ActionResult Index()
04          {
05              return View();
06          }
07   
08          [HttpPost]
09          public ActionResult upload(HttpPostedFileBase Filedata)
10          {
11              try
12              {
13                  Image image = Image.FromStream(Filedata.InputStream);
14                  stringipath = Path.Combine("Images", Path.GetFileName(Filedata.FileName));
15                  string spath = Path.Combine(HttpContext.Server.MapPath("~"), ipath);
16                  image.Save(spath);
17   
18                  return Json(new{ id = "0", mess = string.Format("{0}{1}/{2}", BaseUrl, "Images", Filedata.FileName), iw = image.Width, ih = image.Height });
19              }
20              catch (Exception ex)
21              {
22                  return Json(new { id = "1", mess = ex.Message });
23              }
24          }
25   
26          public void tryCrop(string img, int x, int y, int w, int h)
27          {
28              Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", img));
29              Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Images", "v"+ img));
30   
31              Response.Redirect(string.Format("{0}{1}/{2}", BaseUrl, "Images", "v"+ img));
32          }
33   
34          [NonAction]
35          public string BaseUrl
36          {
37              get
38              {
39                 return Request.Url.Scheme + "://"+ Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + '/';
40              }
41          }
42   
43          [NonAction]
44          public static Image Crop(Image image, int width, int height, int x, int y)
45          {
46              Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb);
47              bmp.SetResolution(image.HorizontalResolution, image.VerticalResolution);
48   
49              using (Graphics graphic = Graphics.FromImage(bmp))
50              {
51                  graphic.SmoothingMode = SmoothingMode.AntiAlias;
52                  graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
53                  graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
54                  graphic.DrawImage(image, newRectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);
55              }
56   
57              return bmp;
58          }
59      }

转自：http://www.cnblogs.com/yoer/archive/2012/02/18/asp_net_mvc_image_upload_crop.html

Asp.net MVC 实现图片上传剪切的更多相关文章

  1. 简单2步实现 asp.net mvc ckeditor 图片上传

    1.打开ckeditor 包下的  config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...

  2. c# ASP.NET MVC easyui-filebox 图片上传和显示

    原文:https://www.cnblogs.com/huatao/p/4727398.html https://www.cnblogs.com/weiweithe/p/4363458.html 表单 ...

  3. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  4. ASP.NET MVC+LayUI视频上传

    前言: 前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的 ...

  5. Asp.net mvc 大文件上传 断点续传

    Asp.net mvc 大文件上传 断点续传 进度条   概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这 ...

  6. 探索Asp.net mvc 的文件上传

    (转自:http://www.cnblogs.com/n-pei/archive/2010/10/15/1852635.html) 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Goo ...

  7. 探索Asp.net mvc 的文件上传(由浅入深)

    代码下载:http://files.cnblogs.com/n-pei/mvcfileupload.zip 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Google了很多资料,和大家 ...

  8. ASP.NET MVC HttpPostedFileBase文件上传

    HttpPostedFileBase文件上传,支持多文件一次上传,如有图片,则支持略缩图保存 文件传输信息封装 /// <summary> /// 文件生成方式 /// </summ ...

  9. Mvc 批量图片上传

    首先导入文件(官网上下载 kindeditor ): <link href="~/kindeditor-4.1.11-zh-CN/kindeditor/themes/default/d ...

随机推荐

  1. 生产WCF客户端类文件的命令格式

    生产WCF客户端类文件的命令格式: svcutil.exe net.tcp://127.0.0.1:8732/ChromaMI.Remote.ConfigService/RemoteConfigSer ...

  2. STL之迭代器

    容器支持的迭代器类型  STL Container  Type of Iterators Supported   vector  random access iterators 元素严格有序(类似数组 ...

  3. 一幅图证明chrome的由来和目的

  4. shell字符串的截取

    1.变量 var 从 npos ∈ [0, length-1] 位开始,从左->右截取 num 个字符: ${var:npos:num} / ${var:npos} 小结:若 npos < ...

  5. Should .close() be put in finally block or not?

    The following are 3 different ways to close a output writer. The first one puts close() method in tr ...

  6. ListView的动态刷新问题——用notifyDataSetChanged没作用

    也许很多开发的朋友,尤其是Android初学者(笔者也是个初学者),在动态刷新ListView时,使用notifyDataSetChanged并没有起到作用.有时会被困扰得很痛苦. 其实,在使用not ...

  7. hdu 1303 Doubles

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1303 Doubles Description As part of an arithmetic com ...

  8. Java之HttpURLConnection的变态事: Keep-Alive

    HttpURLConnection的变态事: Keep-Alive JDK自带的HttpURLConnection默认启动Keep-Alive, 使用后的HttpURLConnection会放入池里重 ...

  9. [ios]ios-Demo4脱衣服/刮奖app-专业

    普通版本完成的锯齿很严重 但是Ios系统中仅CGContextClearRect 并不存在cyclo等方法. 网上查了一些资料. 发现还是利用到了CG 中的Mask来实现效果图: 这种效果可以自定义画 ...

  10. App_Store - IOS应用审核的时隐私政策模板

    隐私政策  Poposoft尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,Poposoft会按照本隐私权政策的规定使用和披露您的个人信息.但Poposoft将以高度的勤 ...