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、后台操作 

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

public JsonResult UploadThumbImg()
        {
            var CurrentContext = HttpContext;
            // 获取文件流
            var files = CurrentContext.Request.Files;
            
            if (files.Count > 0)
            {

                Stream stream = null;
                System.Drawing.Image originalImg = null;   //原图  
                int minWidth = 94;   //最小宽度
                int minHeight = 94;  //最小高度
                int maxWidth = 300;  //最大宽度
                int maxHeight = 300;  //最大高度
                string imageOfSize = string.Empty;  //返回信息
                try
                {
                    // 文件上传后的保存路径
                    String pathOnServer = Path.Combine(StorageRoot);//StorageRoot 路径，我写的是全局变量，因为很多地方用到
                    string filePath = pathOnServer + "/Users/" + userName.ToLower() + "/" + loginType + "/";
                    string uploadFilePath = filePath;
                    string ext = Path.GetExtension(files[0].FileName).ToLower();   //上传文件的后缀（小写）

                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    string fileName = Path.GetFileName(files[0].FileName);// 原始文件名称
                    string saveName = Guid.NewGuid().ToString() + ext; // 保存文件名称
                    string flag = "/temp" + DateTime.Now.ToFileTime() + ext;
                    if (ext == ".jpg" || ext == ".png")
                    {
                        uploadFilePath += "\\" + flag;   //图文件路径

                        stream = files[0].InputStream;
                        
                        originalImg = System.Drawing.Image.FromStream(stream);

                        if (originalImg.Width >= minWidth && originalImg.Height >= minHeight)
                        {
                            originalImg.Save(uploadFilePath);

                                imageOfSize = "Temp" + "$" + originalImg.Width + "$" + originalImg.Height;
                        }
                        else
                        {
                            return Json(new { Success = false, Message = "Image size must be larger than " + minWidth + "*" + minHeight }, JsonRequestBehavior.AllowGet);//图片尺寸必须大于
                        }
                    }
                    else
                        return Json(new { Success = false, Message = "The image format should be .jpg or .png" }, JsonRequestBehavior.AllowGet);//请输入正确图片格式
                    return Json(new { Success = true, FileName = fileName, SaveName = saveName, ShowImage = UrlBase + "/Users/" + userName.ToLower() + "/" + loginType + "/" + flag, ThumbImgPath = "/Users/" + userName.ToLower() + "/" + loginType + "/" + flag, ImageOfSize = imageOfSize });
                }
                catch (Exception ex)
                {
                    return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
                }
                finally
                {
                    if (originalImg != null)
                    {
                        originalImg.Dispose();
                    }

                    if (stream != null)
                    {
                        stream.Close();
                        stream.Dispose();
                    }


                    GC.Collect();
                }

            }
            else
            {

                return Json(new { Success = false, Message = "Please select the file to upload!" }, JsonRequestBehavior.AllowGet);//请选择要上传的文件！
            }

        }

[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