MVC保存并压缩图片【base64】(ASP.NET Web)

MVC在项目中保存图片的几种方式

1.在控制器转换IO最后保存

2.直接储存图片路径进行保存

目标功能：新增人员档案时需要对人员的照片进行保存

当时第一想法是用老师交的把图片传入控制器然后进行io流转换最后保存进数据库，然而我感觉这样写似乎有点复杂。

//处理图片
public ActionResult UpEeditorFile(HttpPostedFileBase upload)                                                                
{
    try
    {
        if (upload != null)
        {
            //返回后缀。GetExtension    upload.FileName获取文件的全名  判断是否为图片
            string fileExtension = Path.GetExtension(upload.FileName);
            //ToLower将字符串转换为小写形式地副本
            fileExtension = fileExtension.ToLower();
            //判断上传的附件格式 Contains筛选
            if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
            {
                //检查目录是否存在,不存在就创建文件夹Server.MapPath
                if (!Directory.Exists(Server.MapPath("~/Document/Notice/")))
                {
                    //在项目所在的位置添加它的子目录
                    Directory.CreateDirectory(Server.MapPath("~/Document/Notice/"));
                }

                //拼接文件名====当前日期+全球唯一标识符+后缀（目的是区分上传的图片）+Guid. NewGuid随机数 + 文件后缀
                string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;
                //获取物理路径===也就是绝对路径
                string filePath = Server.MapPath("~/Document/Notice/") + fileName;
                //把文件保存到物理路径当中
                upload.SaveAs(filePath);

                //获取上传的临时文件表(未保存的)
                List<string> tempFile = new List<string>();
                if (Session["tempEditorFile"] != null)
                {
                    tempFile = Session["tempEditorFile"] as List<string>;
                }
                //未保存公告的临时文件
                tempFile.Add(fileName);
                //保存到session
                Session["tempEditorFile"] = tempFile;

                string url = "/Document/Notice/" + fileName;
                var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];
                // 上传成功后，我们还需要通过以下的一个脚本把图片返回到ckeditor第一个 tab(图像信息) 选项页
                return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
            }
            else
            {
                //判断后缀发现不是图片，提示用户
                return Content("<script>alert('只能上传图片', { icon: 0, title: '提示' });</script>");
            }
        }
    }
    catch (Exception)
    {
        throw;
    }
    return Content("<script>alert('上传图片失败！', { icon: 5, title: '提示' });</script>");
}

只是想简单的保存图片，能不能直接在页面处理好数据在控制器就直接保存？

当然是可以的，最近在制作H5的过程中发现图片可以转换成base64的格式进行保存，这个方法同样也可以用于解决这个需求。

通过base64 实现图片的保存

实现思路：通过js在页面将图片处理为base64格式，然后在提交至控制器保存到数据库。回填时只需要将对应的base64编码查出来就能直接回填图片。

1.将图片转成base64编码

var imgReaderI = new FileReader();
//图片显示
imgReaderI.onload = function (evt) {
    $("#Head").attr('src', evt.target.result);
}
//文件上传事件
$('#txss').on('change', function () {
    var file = document.getElementById('txss').files[0];
    imgReaderI.readAsDataURL(file);
    var size=file.size;
    imgReaderI.onloadend = function (evt) {
         //判断图片大小是否需要进行压缩
        if (size > 600) {
            dealImage(this.result, { width: 180 });
        } else {
           //$('#ryglfo [name="Head"]')是一个隐藏的input方便提交base64数据
           //this.result 就是图片的base64编码
          $('#ryglfo [name="Head"]').val(this.result);
        }
    }
});
//图片压缩转换
function dealImage(path, obj) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        var w = that.width, 
        h = that.height,
        scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.85; //压缩质量 1是不压缩
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw); 
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        var base64 = canvas.toDataURL('image/jpeg', quality);
        //最后返回压缩后的base64编码
        $('#ryglfo [name="Head"]').val(base64)
    }
}

base64编码

img标签的路径可以直接用base64编码显示图片

数据提交到控制器代码
这里使用的是ajax提交，用jgetjson提交会存在大小限制的问题

  $("#ryglfo").ajaxSubmit(function (msg) {});

保存到数据库的数据
这里直接当做字符串对图片的base64编码进行存储

图片的显示
图片要显示时直接将查询到的base64编码作为图片路径即可

  $("#Head").attr("src", data.Head);