MVC 上传图片,裁剪头像

头次写博客,有什么问题多指教。

最近在做一个网站用户上传头像(可裁剪)功能,整理成文,如下:

1、选择插件,引用JS

(1)选上传图片的插件:我用的是=> fileupload ,网上下载包里面会有很多文件,这边引用了3个文件(最重要的 jquery 记得引)

jquery.iframe-transport.js

jquery.ui.widget.js

jquery.fileupload.js

(2)截取图片 cutpic.js

2、写前台上传图片 AJAX 语句

<input type="file" id="fileupload" name="files[]" multiple style="position: absolute; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 1px;direction: ltr;cursor: pointer;margin-left: -50px;width: 100px; direction: ltr; cursor: pointer;">


$(function () {
    $("#tripMsg").hide();
    $("#removeMsgerror").hide();
    $("#fileupload").fileupload({
        url: "/FileUpload/UploadThumbImg",//后台操作路径
        dataType: 'json',
        add: function (e, data) {
            $("#removeMsgerror").hide();
            data.submit();
        },
        done: function (e, data) {
            //done方法就是上传完毕的回调函数
            //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息  
            //返回的数据在result.result中,假设我们服务器返回了一个json对象  
            var res = data.result;
            
            if (res.Success) {
               //上传好图片只有做的一些操作
                    ShowImg(res.ShowImage, result[1], result[2]);       //在截图区显示
                }
            }
            else {
                $("#hidErr").val()
                alert(res.Message);
            }
        }
//移动要裁剪图片的区域之后点保存的操作
$("#btnSave").click(function () {
        $.ajax({
            type: "POST",
            url: "/FileUpload/UploadImg",
            data: { imgUrl: $('#hidImageUrl').val(), pointX: $("#x").val(), pointY: $("#y").val(), maxVal: $("#maxVal").val() },
            success: function (msg) {
                if (msg.Success) {
                 
                }
                else {
                    alert(msg.ReturnData);
                }
            },
            error: function (xhr, msg, e) {
                alert("error");
            }
        });
    });
    });
function ShowImg(imagePath, imgWidth, imgHeight) {
    var imgPath = imagePath != "" ? imagePath : "!images/ef_pic.jpg";
    var ic = new ImgCropper("bgDiv", "dragDiv", imgPath, imgWidth, imgHeight, null);
}

 

 

3、后台操作 

传好图片保存,获得截图并保存

 1   public JsonResult UploadThumbImg()
 2         {
 3             var CurrentContext = HttpContext;
 4             // 获取文件流
 5             var files = CurrentContext.Request.Files;
 6             
 7             if (files.Count > 0)
 8             {
 9 
10                 Stream stream = null;
11                 System.Drawing.Image originalImg = null;   //原图  
12                 int minWidth = 94;   //最小宽度
13                 int minHeight = 94;  //最小高度
14                 int maxWidth = 300;  //最大宽度
15                 int maxHeight = 300;  //最大高度
16                 string imageOfSize = string.Empty;  //返回信息
17                 try
18                 {
19                     // 文件上传后的保存路径
20                     String pathOnServer = Path.Combine(StorageRoot);//StorageRoot 路径,我写的是全局变量,因为很多地方用到
21                     string filePath = pathOnServer + "/Users/" + userName.ToLower() + "/" + loginType + "/";
22                     string uploadFilePath = filePath;
23                     string ext = Path.GetExtension(files[0].FileName).ToLower();   //上传文件的后缀(小写)
24 
25                     if (!Directory.Exists(filePath))
26                     {
27                         Directory.CreateDirectory(filePath);
28                     }
29                     string fileName = Path.GetFileName(files[0].FileName);// 原始文件名称
30                     string saveName = Guid.NewGuid().ToString() + ext; // 保存文件名称
31                     string flag = "/temp" + DateTime.Now.ToFileTime() + ext;
32                     if (ext == ".jpg" || ext == ".png")
33                     {
34                         uploadFilePath += "\\" + flag;   //图文件路径
35 
36                         stream = files[0].InputStream;
37                         
38                         originalImg = System.Drawing.Image.FromStream(stream);
39 
40                         if (originalImg.Width >= minWidth && originalImg.Height >= minHeight)
41                         {
42                             originalImg.Save(uploadFilePath);
43 
44                                 imageOfSize = "Temp" + "$" + originalImg.Width + "$" + originalImg.Height;
45                         }
46                         else
47                         {
48                             return Json(new { Success = false, Message = "Image size must be larger than " + minWidth + "*" + minHeight }, JsonRequestBehavior.AllowGet);//图片尺寸必须大于
49                         }
50                     }
51                     else
52                         return Json(new { Success = false, Message = "The image format should be .jpg or .png" }, JsonRequestBehavior.AllowGet);//请输入正确图片格式
53                     return Json(new { Success = true, FileName = fileName, SaveName = saveName, ShowImage = UrlBase + "/Users/" + userName.ToLower() + "/" + loginType + "/" + flag, ThumbImgPath = "/Users/" + userName.ToLower() + "/" + loginType + "/" + flag, ImageOfSize = imageOfSize });
54                 }
55                 catch (Exception ex)
56                 {
57                     return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
58                 }
59                 finally
60                 {
61                     if (originalImg != null)
62                     {
63                         originalImg.Dispose();
64                     }
65 
66                     if (stream != null)
67                     {
68                         stream.Close();
69                         stream.Dispose();
70                     }
71 
72 
73                     GC.Collect();
74                 }
75 
76             }
77             else
78             {
79 
80                 return Json(new { Success = false, Message = "Please select the file to upload!" }, JsonRequestBehavior.AllowGet);//请选择要上传的文件!
81             }
82 
83         }

[HttpPost]
public JsonResult UploadImg(string pointX, string pointY, string imgUrl, string maxVal) { //Bitmap bitmap = null; //按截图区域生成Bitmap Image thumbImg = null; //被截图 //Graphics gps = null; //存绘图对象 Image cutImage = null; Image finalImg = null; //最终图片 string savePath = string.Empty; string msg = string.Empty; string fileName = string.Empty; bool result=true; if (!string.IsNullOrEmpty(pointX) && !string.IsNullOrEmpty(pointY) && !string.IsNullOrEmpty(imgUrl)) { try { int finalWidth = 94; int finalHeight = 94; var userName = Request.Cookies["userName"].Value; var loginType = Request.Cookies["loginType"].Value; ClientSiteUser cMod = bll.GetClientUserById(userName); int X = Convert.ToInt32(pointX); int Y = Convert.ToInt32(pointY); string ext = System.IO.Path.GetExtension(imgUrl).ToLower(); //上传文件的后缀(小写) string pathOnServer = Path.Combine(StorageRoot); string documentUrl = "/Users/" + userName.ToLower() + "/" + loginType;//存放文件夹 string docStr = pathOnServer + documentUrl;//上传路径 if (!string.IsNullOrWhiteSpace(userName) && cMod != null) { //获取截图 1、创建画布 //bitmap = new System.Drawing.Bitmap(Convert.ToInt32(maxVal), Convert.ToInt32(maxVal)); thumbImg = System.Drawing.Image.FromFile(pathOnServer + imgUrl); //System.Drawing.Rectangle rl = new System.Drawing.Rectangle(Convert.ToInt32(pointX), Convert.ToInt32(pointY), Convert.ToInt32(maxVal), Convert.ToInt32(maxVal)); //得到截图矩形 //gps = System.Drawing.Graphics.FromImage(bitmap); //// 在指定位置并且按指定大小绘制指定的 Image 的指定部分,获得到截图 //gps.DrawImage(thumbImg, 0, 0, rl, System.Drawing.GraphicsUnit.Pixel); cutImage = GetCutImage(Convert.ToInt32(pointX), Convert.ToInt32(pointY), thumbImg, Convert.ToInt32(maxVal)); //截图等比例缩放得到最终图片 finalImg = GetThumbImage(cutImage, finalWidth, finalHeight); fileName = "/Img" + DateTime.Now.ToFileTime() + ext; savePath = docStr + fileName; if (!string.IsNullOrWhiteSpace(cMod.UrlOfAvatarPicture)) { FileDel(cMod.UrlOfAvatarPicture); } msg = UrlBase + documentUrl + fileName; cMod.UrlOfAvatarPicture = documentUrl + fileName; //将图片路径保存至数据库 if (bll.UpdateUrlOfAvatarPicture(cMod)) { if (!System.IO.Directory.Exists(docStr)) { System.IO.Directory.CreateDirectory(docStr); } finalImg.Save(savePath); } else result = false; //显示释放资源 //bitmap.Dispose(); thumbImg.Dispose(); //gps.Dispose(); cutImage.Dispose(); finalImg.Dispose(); GC.Collect(); FileDel(imgUrl); } } catch (Exception ex) { result = false; msg = ex.Message; } } return Json(new { Success = result,ReturnData=msg }); } ///<summary> /// 裁剪图片 ///</summary> ///<param name="originalImage">原始图片</param> ///<param name="thumMaxWidth">裁剪后需要显示的宽度</param> ///<param name="thumMaxHeight">裁剪后需要显示的高度</param> ///<returns>返回裁剪后的Image对象</returns> public static System.Drawing.Image GetThumbImage(Image originalImage, int thumMaxWidth, int thumMaxHeight) { Image newImage = originalImage; Graphics graphics = null; try { // 创建画布 newImage = new Bitmap(originalImage.Width, originalImage.Height); graphics = Graphics.FromImage(newImage); // 指定高质量、低速度呈现。 graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality; // 指定高质量的双三次插值法。执行预筛选以确保高质量的收缩。此模式可产生质量最高的转换图像。 graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; // 用白色清空 graphics.Clear(System.Drawing.Color.Transparent); // 在指定位置并且按指定大小绘制指定的 Image 的指定部分。 graphics.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, thumRealSize.Width, thumRealSize.Height), new System.Drawing.Rectangle(0, 0, originalImage.Width, originalImage.Height), System.Drawing.GraphicsUnit.Pixel); } catch { } finally { if (graphics != null) { //显示释放资源 graphics.Dispose(); graphics = null; } } return newImage; }

上传成功显示到裁剪区

 裁剪保存成功,右上角是裁剪后的图片

 

参考自:https://www.cnblogs.com/wifi/articles/2573131.html

posted on 2018-10-22 16:44  只是一个路人  阅读(372)  评论(0编辑  收藏  举报

导航