使用技术：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. Java4Android

    变量 在计算机中存储信息需要声明变量的位置和所需的内存空间 boolean true false char ASCII字符集 计算机中所有数据都使用二进制表示 例如:a,b,c 适用七位二进制数进行表 ...

  2. WPF动画 storyboard

    <Window x:Class="StoryBoard.MainWindow" xmlns="http://schemas.microsoft.com/winfx/ ...

  3. golang的并发

    Golang的并发涉及二个概念: goroutine channel goroutine由关键字go创建. channel由关键字chan定义 channel的理解稍难点, 最简单地, 你把它当成Un ...

  4. golang初试:坑爷的

    用Golang与perl脚本比较, 初想至多差一倍吧...结果可不是一般的坑爹, 简直就是坑爷了. Perl脚本 #!/bin/bash source /etc/profile; function e ...

  5. 发现了一个制作iOS图标的利器

    我制作的第一个Swift Demo已经将近完工,今天的任务便是给它添加图标.不过Xcode中对图标尺寸的要求还真是严苛,若是制作iPhone和iPad通用的应用,总共需要12种尺寸的图标,这对于美工功 ...

  6. openSUSE install failed

    install openSUSE 13.1 with vmware play (version 6.0.0)  calling the yast module 'inst_autoinit has f ...

  7. FPGA内部信号避免高阻态

    RT,否则警告Warning: Tri-state node(s) do not directly drive top-level pin(s),会利用或门代替中间的扇出fan-out. 原因:在进行 ...

  8. MDI窗体 的再度思考

    早在敲学生管理系统的时候,青山师哥就跟我说过  MDI 窗体 跟 子窗体的事情,当时只是简单的查询.小小的用了一下,没有太在意. 当再次面对着这个东西更深层的时候才想起师哥那句话.“好好研究一下这个东 ...

  9. Querying mergeinfo requires version 3 of the FSFS filesystem schema

    环境: jdk 1.7; svn  3.0.4;  TortoiseSVN 1.7.13 Subversion 1.7.10; IntelliJ IDEA 13.1.1;win7 64位系统 之前那个 ...

  10. linux查看tomcat版本

    进入tomcat bin目录下 然后执行 ./version.sh Server version: Apache Tomcat/6.0.26Server built:   March 9 2010 1 ...