MVC4实现图片上传,裁剪和保存到服务器

PassPhotoController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PassPhotoMVC.Helpers;
using System.Collections;

namespace PhotoDemo.Controllers
{
    public class PassPhotoController : Controller
    {
        //初始化辅助类库和局部变量
        PhotoUtils myUtils = new PhotoUtils();
        //允许上传的最大文件大小
        int maxSize = Convert.ToInt32(Settings.AppSettings.maxuploadsize);
        // all images are normalized to this height when uploaded
        //所有图像在上传时均标准化为此高度
        //它们被放大或缩小
        int hminRaw = Convert.ToInt32(Settings.AppSettings.uploadheight);

        //最终剪裁图像的所需尺寸（w,h）
        int hminCropped = Convert.ToInt32(Settings.AppSettings.passheight);
        int wminCropped = Convert.ToInt32(Settings.AppSettings.passwidth);
        int imgUploadPreview = Convert.ToInt32(Settings.AppSettings.uploadpreviewh);
        int prevw = Convert.ToInt32(Settings.AppSettings.previewwidth);
        int prevh = Convert.ToInt32(Settings.AppSettings.previewheight);

        /// <summary>
        /// 确定默认视图的参数
        /// </summary>
        /// <param name="jsfilepath">只需要覆盖预设值</param>
        /// <returns></returns>
        public ActionResult Index(String jsFilePath="")
        {            

            String RootPath = Request.Path;
            ViewBag.RootPath = RootPath;
            ViewBag.Height = prevh.ToString();
            ViewBag.Width = prevw.ToString();
            ViewBag.PreviewJSMarkup = myUtils.UpdatePreviewJs(prevw, prevh, jsFilePath);            

            return View();
        }

        /// <summary>
        ///如果最终用户尝试使用GET而不是POST调用此操作，则重定向以启动UI的界面
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public ActionResult UploadImage()
        {
            return RedirectToAction("Index");
        }

        /// <summary>
        /// 处理上传文件并将上传的文件大小调整为标准大小
        /// </summary>
        /// <param name="mypostedfile"></param>
        /// <param name="targetfilename"></param>
        /// <param name="targetfolder"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadImage(HttpPostedFileBase myPostedFile, String targetFilename, String targetFolder = "raw", String srcimgfolder = "", String jsFilePath = "")
        {
            // This value is sent back to the view to accomodate relative URLs when in post action
            //在POST action时，此值将发回到视图以适应相关URL
            String rootPath = Request.Path.Replace("PassPhoto/UploadImage", "");
            ViewBag.RootPath = rootPath;
            if (myPostedFile != null && myPostedFile.ContentLength > 0) 
            {
                //img文件夹的默认值取自当前服务器上下文，除非在输入参数中另有说明
                if (srcimgfolder == "")
                {
                    srcimgfolder = Server.MapPath("~/uploaded_images/" + targetFolder + "/");
                }
                else
                {
                    if (!srcimgfolder.EndsWith("\\"))
                    {
                        srcimgfolder += "\\";
                    }
                    srcimgfolder += targetFolder;
                }
                // preset name of file while testing refactor after tested
                //测试后重新测试的文件的预设名称
                targetFilename = "image_upload_test.jpg";
                ViewBag.Message = myUtils.UploadImage(myPostedFile, targetFilename, srcimgfolder, maxSize, hminRaw);
                if (ViewBag.Message == "OK: File uploaded!")
                {
                    //返回修改UI必需的值
                    ViewBag.ImageName = targetFilename;
                    ViewBag.ImageUrl = "uploaded_images/" + targetFolder + "/" + targetFilename;
                    ViewBag.Height = imgUploadPreview.ToString();
                    ViewBag.Width = myUtils.CalculateResizedWidth(targetFilename, srcimgfolder, imgUploadPreview).ToString();
                    ViewBag.PreviewDisplay = "normal";
                    int jsWidth = myUtils.CalculateResizedWidth(targetFilename, srcimgfolder, hminRaw);
                    ViewBag.PreviewJSMarkup = myUtils.UpdatePreviewJs(jsWidth, hminRaw, jsFilePath);
                }
                else
                {
                    //返回默认值并显示操作结果的错误信息
                    ViewBag.ImageName = targetFilename;
                    ViewBag.Height = prevh.ToString();
                    ViewBag.Width = prevw.ToString();
                }
            }
            else
            {
                ViewBag.Message = "错误 - 文件无效 - 上传的文件为空.";
            }
            return View("Index");              
        }

        /// <summary>
        /// 如果最终用户尝试使用GET而不是POST调用此操作，则重定向以启动UI的界面。
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public ActionResult CropImage()
        {
            return RedirectToAction("Index");
        }

        /// <summary>
        /// 处理剪裁文件，保持纵横比和标准尺寸
        /// </summary>
        /// <param name="filename"></param>
        /// <param name="folder"></param>
        /// <param name="X"></param>
        /// <param name="Y"></param>
        /// <param name="W"></param>
        /// <param name="H"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult CropImage(String filename, String folder, String X, String Y, String W, String H, String srcimgfolder = "", String jsFilePath = "")
        {
            String rootPath = Request.Path.Replace("PassPhoto/CropImage", "");
            ViewBag.RootPath = rootPath;
            String missingpar = "";
            //validate required post parameters and return proper error message is something is missing
            //验证必需的post参数并返回缺少参数的合适的错误消息
            if (filename == null )
            {
                missingpar = "filename";
            }
            if (folder == null)
            {
                if (missingpar != "")
                {
                    missingpar += ", ";
                }
                missingpar = "folder";
            }            
            if (missingpar.Length >0)
            {
                String ermsg1 = "Error - missing parameter";
                if (missingpar.Contains(","))
                {
                    ermsg1 += "s";
                }
                ViewBag.Message = ermsg1 + ": " + missingpar;
            }
            else
            {
                // 将post的值转换为int
                int W1 = Convert.ToInt32(W);
                int H1 = Convert.ToInt32(H);
                int X1 = Convert.ToInt32(X);
                int Y1 = Convert.ToInt32(Y);

                //srcimagefolder的默认值将在运行时从服务器上下文确定
                if (srcimgfolder == "")
                {
                    srcimgfolder = Server.MapPath("~/uploaded_images/");
                }
                else
                {
                    if (!srcimgfolder.EndsWith("\\"))
                    {
                        srcimgfolder += "\\";
                    }                   
                }
                String targetfolder = "cropped";
                ViewBag.Message = myUtils.CropImage(filename, folder, targetfolder, srcimgfolder, X1, Y1, W1, H1);
                if (ViewBag.Message == "OK - 文件裁剪完成了")
                {    
                    ViewBag.Height = imgUploadPreview.ToString();
                    ViewBag.Width = myUtils.CalculateResizedWidth(filename, srcimgfolder + targetfolder, imgUploadPreview).ToString();
                    ViewBag.ImageName = filename;
                    ViewBag.PreviewDisplay = "normal";                    
                    ViewBag.ImageUrl = "uploaded_images/cropped/" + filename;
                    ViewBag.PreviewJSMarkup = myUtils.UpdatePreviewJs(wminCropped, hminCropped, jsFilePath);
                }
            }           
            return View("Index");            
        }

    }
}

PhotoUtils.cs

using System;
using System.Web;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

namespace PhotoDemo.Helpers
{
    /// <summary>
    /// 处理上传图像的功能（调整大小/裁剪）
    /// </summary>
    /// 

    public class PhotoUtils
    {

        /// <summary>
        /// Handle uploading of images, calls resizing for creating standard size images
        /// based on AppSettings parameters
        /// 处理图像的上传，根据AppSettings参数调用,调整大小以创建标准尺寸图像
        /// </summary>
        /// <param name="postedfile"></param>
        /// <param name="targetfilename"></param>
        /// <param name="folder"></param>
        /// <param name="maxsize"></param>
        /// <param name="hmindimension"></param>
        /// <returns></returns>
        public String UploadImage(HttpPostedFileBase postedfile, String targetfilename, String folder, int maxsize = 262144, int hmindimension = 0)
        {
            String result = "";
            // 如果hmindimension=0，则使用默认设置
            if (hmindimension == 0)
            {
                hmindimension = Convert.ToInt32(Settings.AppSettings.uploadheight);
            }                     
            Boolean fileOK = false;
            int fileSize = postedfile.ContentLength;            
            String maxk = ((int)((double)maxsize / 1024)).ToString();
            if  (fileSize > 0 & targetfilename.Length > 0)
            {
                String fileExtension = System.IO.Path.GetExtension(postedfile.FileName).ToLower();
                String[] allowedExtensions = { ".jpg", ".jpeg" };
                for (int i = 0; i <= allowedExtensions.Length - 1; i++)
                {
                    if (allowedExtensions[i].Equals(fileExtension))
                    {
                        fileOK = true;
                    }
                }
                if (fileOK)
                {
                    if (fileSize < maxsize)
                    {
                        try
                        {
                            result = ResizeImageUpload(postedfile.InputStream, targetfilename, folder, hmindimension);
                        }
                        catch(Exception ex)
                        {
                            result = "错误：无法上传文件<br>" + ex.Message;
                        }
                    }
                    else
                    {
                       result = "错误：文件大于 " + maxk + "K.请上传较小的图像";
                    }
                }
                else
                {
                    result = "错误：无法接受此类型的文件.";
                }
            }
            else
            {
                result = "错误：无法上传没有有效的目标文件名的照片.";
            }
            return result;
        }

        /// <summary>
        /// 处理上传图像的大小，使所有图像都缩放到标准高度
        /// </summary>
        /// <param name="inputfilestream"></param>
        /// <param name="finalfilename"></param>
        /// <param name="folderpath"></param>
        /// <param name="hmindimension"></param>
        /// <returns></returns>
        public String ResizeImageUpload(Stream inputfilestream, String finalfilename, String folderpath, int hmindimension)
        {
            String result = "";
            // 强制最终上传的图像以具有固定的高度
            int newStillWidth, newStillHeight;
            int ori1;
            Image originalimg;
            try
            {
                originalimg = System.Drawing.Image.FromStream(inputfilestream);
                if (originalimg.Width > originalimg.Height)
                {
                    //景观图片规则 
                    ori1 = originalimg.Height;
                    newStillHeight = hmindimension;
                    newStillWidth = (int)((double)originalimg.Width * hmindimension / ori1);
                }
                else
                {
                    //肖像图片规则
                    ori1 = originalimg.Width;
                    newStillHeight = hmindimension;
                    newStillWidth = (int)((double)newStillHeight * originalimg.Width / originalimg.Height);
                }
                Bitmap still = new Bitmap(newStillWidth, newStillHeight);
                Graphics gr_dest_still = Graphics.FromImage(still);
                SolidBrush sb = new SolidBrush(System.Drawing.Color.White);
                gr_dest_still.FillRectangle(sb, 0, 0, still.Width, still.Height);
                gr_dest_still.DrawImage(originalimg, 0, 0, still.Width, still.Height);
                try
                {
                    ImageCodecInfo codecencoder = GetEncoder("image/jpeg");
                    int quality = 90;
                    EncoderParameters encodeparams = new EncoderParameters(1);
                    EncoderParameter qualityparam = new EncoderParameter(Encoder.Quality, quality);
                    encodeparams.Param[0] = qualityparam;
                    still.SetResolution(96, 96);
                    if (!folderpath.EndsWith("\\")){
                        folderpath += "\\";
                    }
                    still.Save(folderpath  + finalfilename, codecencoder, encodeparams);
                    result = "OK: File uploaded!";
                }
                catch(Exception ex)
                {
                    result = "ERROR: 保存图像时出现问题. " + ex.Message;
                }
                if (still!=null)
                {
                    still.Dispose();                    
                }    
            }
            catch(Exception ex)
            {
                result = "ERROR: 这不是我们可以处理的图片. " + ex.Message;
            }
            return result;
        }

        /// <summary>
        /// 处理裁剪图像，将裁剪的图像缩放到AppSettings文件中配置的标准尺寸
        /// </summary>
        /// <param name="filename"></param>
        /// <param name="sourcefolder"></param>
        /// <param name="targetfolder"></param>
        /// <param name="imgfolder"></param>
        /// <param name="X"></param>
        /// <param name="Y"></param>
        /// <param name="W"></param>
        /// <param name="H"></param>
        /// <returns></returns>
        public String CropImage(String filename, String sourcefolder, String targetfolder, String imgfolder, int X, int Y, int W, int H)
        {
            String result = "";
            // 强制最终裁剪的图像以具有固定的尺寸
            int croppedfinalw, croppedfinalh;
            croppedfinalh = Convert.ToInt32(Settings.AppSettings.passheight);
            croppedfinalw = Convert.ToInt32(Settings.AppSettings.passwidth);
            try
            {
                if (!imgfolder.EndsWith("\\"))
                {
                    imgfolder += "\\";
                }
                String sourcepath = imgfolder + sourcefolder + "\\";
                Bitmap image1 = (Bitmap)Image.FromFile(sourcepath + filename, true);
                Rectangle rect = new Rectangle(X, Y, W, H);
                Bitmap cropped = image1.Clone(rect, image1.PixelFormat);
                // 释放原始图像，以防我们需要在下面覆盖它
                if (image1 != null)
                {
                    image1.Dispose();                    
                }    
                Bitmap finalcropped= new Bitmap(croppedfinalw, croppedfinalh);
                Graphics gr_finalcropped  = Graphics.FromImage(finalcropped);
                SolidBrush sb = new SolidBrush(System.Drawing.Color.White);
                gr_finalcropped.FillRectangle(sb, 0, 0, finalcropped.Width, finalcropped.Height);
                gr_finalcropped.DrawImage(cropped, 0, 0, finalcropped.Width, finalcropped.Height);
                try
                {
                    ImageCodecInfo codecencoder  = GetEncoder("image/jpeg");
                    int quality = 92;
                    EncoderParameters encodeparams  = new EncoderParameters(1);
                    EncoderParameter qualityparam = new EncoderParameter(Encoder.Quality, quality);
                    encodeparams.Param[0] = qualityparam;
                    finalcropped.SetResolution(240, 240);
                    sourcepath = sourcepath.Replace(sourcefolder, targetfolder);
                    finalcropped.Save(sourcepath + filename, codecencoder, encodeparams);
                    result = "OK - 文件裁剪完成了";
                }
                catch(Exception ex)
                {
                    result = "ERROR: 保存图像时出现问题。 " + ex.Message;
                }
                if (cropped != null)
                {
                    cropped.Dispose();                    
                }
                if (finalcropped != null)
                {
                    finalcropped.Dispose();                    
                }
            }
            catch(Exception ex)
            {
                result = "ERROR: 这不是我们可以处理的图片. " + ex.Message;
            }
            return result;
        }

        public ImageCodecInfo GetEncoder(String mimetype)
        {
            ImageCodecInfo result = null;
            foreach (ImageCodecInfo codec in ImageCodecInfo.GetImageEncoders())
            {
                if (codec.MimeType == mimetype){
                    result = codec;
                }
            }
            return result;
        }

        public int CalculateResizedWidth(String filename, String folderpath, int newh)
        {
            int result = 0;
            if (!folderpath.EndsWith("\\"))
            {
                folderpath += "\\";
            }
            String fullpath = folderpath + filename;
            Bitmap image1 = (Bitmap)Image.FromFile(fullpath, true);
            if (image1 != null)
            {
                result = (int)((double)newh * image1.Width / image1.Height);
                image1.Dispose();                
            }    
            return result;
        }

        /// <summary>
        /// Updates the javascript code sent to the view to handle the cropping
        /// based on the dimensions of the source image used for cropping.
        /// 更新发送到视图的JavaScript代码，以根据用于裁剪的源图像的尺寸来处理裁剪。
        /// </summary>
        /// <param name="neww"></param>
        /// <param name="newh"></param>
        /// <param name="filepath"></param>
        /// <returns></returns>
        public String UpdatePreviewJs(int neww, int newh, String filepath="")
        {
            String result = "";
            //读取默认的js源文件
            //该结构允许通过在单元测试中传递测试文件路径进行单元测试
            if (filepath == "" || filepath==null)
            {
                HttpContext ctx = HttpContext.Current;
                if (ctx != null)
                {
                    filepath = ctx.Server.MapPath("~/js/tiffjcroppreset.js");
                }                
            }            
            result = System.IO.File.ReadAllText(filepath);
            int startselect = result.IndexOf("width: Math.round");
            int startvalue = result.IndexOf("(", startselect);
            int endvalue = result.IndexOf(")", startvalue);
            String selectvalue = result.Substring(startvalue, endvalue - startvalue + 1);
            String newvalue = "(rx*" + neww.ToString() + ")";
            result = result.Replace(selectvalue, newvalue);
            //根据源图像改变高度
            startselect = result.IndexOf("height: Math.round");
            startvalue = result.IndexOf("(", startselect);
            endvalue = result.IndexOf(")", startvalue);
            selectvalue = result.Substring(startvalue, endvalue - startvalue + 1);
            newvalue = "(ry*" + newh.ToString() + ")";
            result = result.Replace(selectvalue, newvalue);
            //配置前置宽高比
            //从设置确定固定图像比例
            String ratio = Settings.AppSettings.passwidth + "/" + Settings.AppSettings.passheight;
            startselect = result.IndexOf("aspectRatio:");
            startvalue = result.IndexOf(" ", startselect);
            endvalue = result.IndexOf(",", startvalue);
            selectvalue = result.Substring(startvalue, endvalue - startvalue + 1);
            newvalue = " " + ratio + ",";
            result = result.Replace(selectvalue, newvalue);
            //配置rx的默认值
            startselect = result.IndexOf("var rx");
            startvalue = result.IndexOf("=", startselect);
            endvalue = result.IndexOf(";", startvalue);
            selectvalue = result.Substring(startvalue, endvalue - startvalue + 1);
            newvalue = "= " + Settings.AppSettings.previewwidth + " / c.w;";
            result = result.Replace(selectvalue, newvalue);
            // 配置ry的默认值
            startselect = result.IndexOf("var ry ");
            startvalue = result.IndexOf("=", startselect);
            endvalue = result.IndexOf(";", startvalue);
            selectvalue = result.Substring(startvalue, endvalue - startvalue + 1);
            newvalue = "= " + Settings.AppSettings.previewheight + " / c.h;";
            result = result.Replace(selectvalue, newvalue);
            //Configure Explicit Resizing 
            //配置显式调整大小
            startselect = result.IndexOf("trueSize:");
            startvalue = result.IndexOf("[", startselect);
            endvalue = result.IndexOf("]", startvalue);
            selectvalue = result.Substring(startvalue, endvalue - startvalue + 1);
            newvalue = "[" + neww.ToString() + ", " + newh.ToString() + "]";
            result = result.Replace(selectvalue, newvalue);  
            return result;
        }      

    }   
}

PassPhoto视图文件夹

Index.cshtml

@{
    //从设置中读取已裁剪图像的默认值
    // 缩小到一半
    var prevw = Settings.AppSettings.previewwidth + "px";
    var prevh = Settings.AppSettings.previewheight + "px";
    //处理从控制器发回的值，以刷新UI
    ViewBag.Title = "照片上传 - MVC";
    var Image1W = prevw;
    var Image1H = prevh;
    var Image1src = "uploaded_images/raw/invalid.jpg";
    var Imagename = "invalid.jpg";
    var croppedpreviewLiteral = "";
    var previewsrc = "uploaded_images/raw/invalid.jpg";
    var displaypreview = "none";
    var message = "";
    var defaultfolder = "raw";
    var uploadaction = "PassPhoto/UploadImage";
    var cropaction = "PassPhoto/CropImage";
    //消息确定清除，否则在UI中显示错误消息
    if (ViewBag.Message != null)
    {
        message = ViewBag.Message;
        if (message.StartsWith("OK"))
        {
            message = "";
        }
    }
    if (ViewBag.Height != null)
    {
        Image1H = ViewBag.Height;
    }
    if (ViewBag.Width != null)
    {
        Image1W = ViewBag.Width;
    }
    if (ViewBag.ImageUrl != null)
    {
        Image1src = ViewBag.ImageUrl;
        previewsrc = ViewBag.ImageUrl;
    }
    if (ViewBag.ImageName != null)
    {
        Imagename = ViewBag.ImageName;
    }
    if (ViewBag.PreviewDisplay != null)
    {
        displaypreview = ViewBag.PreviewDisplay;
        if (displaypreview == "normal")
        {
            croppedpreviewLiteral = "预览图片:";
        }
    }
    if (Image1src.ToLower().Contains("cropped"))
    {
        defaultfolder = "cropped";
    }
    if (ViewBag.rootPath != null)
    {
        Image1src = ViewBag.RootPath + Image1src;
        previewsrc = ViewBag.RootPath + previewsrc;
        uploadaction = ViewBag.RootPath + uploadaction;
        cropaction = ViewBag.RootPath + cropaction;
    }

}

<div>
    <h3>概念证明 - 在线图像裁剪</h3>
    使用下面的"浏览..."按钮选择图像，并在准备好后单击"上传图像"。
    <br />
    <span id="errorLiteral" style="font-size:14px; color:Red; font-weight:bold">
        @message
    </span>
    <br />
    <form action="@uploadaction" method="post" enctype="multipart/form-data">
        <input id="fileupload" name="mypostedfile" type="file" />
        <input type="submit" id="uploadfileButton" value="上传图片" />
    </form>
    <br />
    <br />
    <table>
        <tr>
            <td style="width:400px;">
                <div id="imagenameLiteral">@Imagename</div>
                <br /><br />
                <div>
                    <img id="Image1" width="@Image1W" height="@Image1H" src="@Image1src" />
                    <br />
                </div>
            </td>
            <td style="width:400px;">
                <div id="croppedpreviewLiteral">@croppedpreviewLiteral</div>
                <div style="width:@prevw;height:@prevh;overflow:hidden;background-color:#ffffff;display:@displaypreview">
                    <img id="preview" width="@prevw" height="@prevh" src="@previewsrc" />
                </div>
            </td>
        </tr>
    </table>

    <form action="@cropaction" method="post" enctype="multipart/form-data">

        <input id="X1value" name="X" type="hidden" />
        <input id="Y1value" name="Y" type="hidden" />
        <input id="X2value" name="X2" type="hidden" />
        <input id="Y2value" name="Y2" type="hidden" />
        <input id="Wvalue" name="W" type="hidden" />
        <input id="Hvalue" name="H" type="hidden" />
        <input id="filename" name="filename" value="@Imagename" type="hidden" />
        <input id="folder" name="folder" value="@defaultfolder" type="hidden" />

        <div id="cropinstructions" style="width:400px">
            移动或重新排列原始图像内的选择工具，直到预览选项显示了你想保留的图像。准备好后，点击裁剪按钮，您的选择将会永久保存
            <br /><br />
            <input type="submit" id="cropimageButton" value="裁剪图像" />
        </div>

    </form>
</div>

@section scripts{
    <script lang="Javascript">
        @Html.Raw(ViewBag.PreviewJSMarkup)
    </script>
}     

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 我的ASP.NET应用程序</title>
    @Styles.Render("~/bundles/css")  

</head>
<body>    
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Wu</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jcrop")    
    @RenderSection("scripts", required: false)
</body>
</html>

运行结果如图:

---

---

---