使用技术：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. 会写网页 就会写手机APP -- Hybrid Mobile Apps for ASP.NET Developers

    您好,这篇文章是我的BLOG发出,原始出处在此: 会写网页 就会写手机APP -- Hybrid Mobile Apps for ASP.NET Developers http://www.dotbl ...

  2. C# 截取带路径的文件名字,扩展名,等等 的几种方法

    C#对磁盘IO操作的时候,经常会用到这些,路径,文件,文件名字,文件扩展名. 之前,经常用切割字符串来实现, 可是经常会弄错. 尤其是启始位置,多少个字节,经常弄晕. 下面这种方法貌似比较简便: st ...

  3. python实现决策树

    1.决策树的简介 http://www.cnblogs.com/lufangtao/archive/2013/05/30/3103588.html 2.决策是实现的伪代码 “读入训练数据” “找出每个 ...

  4. python 爬虫-sohu抓小说

    #coding:utf-8 import urllib2 import sys import re '): realurl = "%s%s%s" %(url,offset,'.sh ...

  5. hdu 1496 Equations

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1496 Equations Description Consider equations having ...

  6. hdu 1880 魔咒词典

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1880 魔咒词典 Description 哈利波特在魔法学校的必修课之一就是学习魔咒.据说魔法世界有10 ...

  7. SQLite之写一个表

    1.首先你需要一个路径. 获取document目录并返回数据库目录 - (NSString *)dataFilePath{ NSArray *paths = NSSearchPathForDirect ...

  8. 如何在ios 系统 中抓包？？

    为了实现在ios系统上抓包,如下步骤: 1,设备越狱 2,在cydia-软件源-设置中改为开发者,否则有些deb搜索不到 安装如下软件:OpenSSH,OpenSSL,wget (下载工具) Apti ...

  9. Linux I/O总结

    文件流 标准I/O文件流可用于单字节或多字节字符集.流的定向决定了所读写的是单字节还是多字节.流在最初创建时,并没有定向,此时如果在为定向的流上使用多字节I/O函数,那么该流被设置为宽定向的:如果在为 ...

  10. [转]rpcndr.h和wtypes.h冲突Bug的解决方案

    [转]rpcndr.h和wtypes.h冲突Bug的解决方案 http://blog.csdn.net/tzwh_86/article/details/9495133 rpcndr.h和wtypes. ...