上周需要做一个图片上传并且将上传的图片在线可以裁剪展示,觉得这个功能很有用，但是找参考资料的时候却并不是很多，因此来将我用到的总结总结，也让有需要的博友们直接借鉴。
首先环境介绍：
1、asp.net mvc网站，用到的前端插件是JCrop和Bootstrap-fileinput，在后端用框架自带的一些类库进行处理即可。
JCrop插件是用来裁剪图片的，页面上裁剪就是保存裁剪的位置信息，然后将位置信息转给后台在后台进行实际图片裁剪功能。
插件地址：http://code.ciaoca.com/jquery/jcrop/demo/
Bootstrap-fileinput插件是Bootstrap下的文件上传的插件，功能强大，我将依靠这个完成文件的上传，当然也能够使用其他的文件上传工具。
插件地址：http://plugins.krajee.com/file-input
文件上传后页面上展示的图片是以Data URI Scheme方式进行展示的。
Data URI Scheme知识点：https://blog.csdn.net/aoshilang2249/article/details/51009947
2、asp.net core mvc网站，前端插件不变，但是在后端不能够使用自带类库了，core下面的图片处理相关的类库还没有完全移植过来，只能够借用第三方类库SixLabors.ImageSharp。
快速浏览
@{ ViewBag.Title = "文件上传"; } <link href="@Url.Content("~/Content/Jcrop/jquery.Jcrop.css")" rel="stylesheet" /> <link href="@Url.Content("~/Content/bootstrap-fileinput/fileinput.css")" rel="stylesheet" /> <br /> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">头像</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">图片上传</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6" style="width: 300px;"> <img id="cut-img" class="thumbnail" style="width: 300px;height:300px;" src="~/Content/defaultAvatar.jpg"><br /> </div> <div class="col-md-5"> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /><br /> <h4>图片说明：</h4> <p>1、图片格式需要jpg、gif、png为后缀名.</p> <p>2、图片可以在线裁剪大小,以裁剪后为最终结果.</p> <p>3、图片上传完毕即可关闭窗口.</p> </div> </div> </div> </div> </div> </div> @section scripts{ <script src="@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.js")"></script> <script src="@Url.Content("~/Scripts/bootstrap-fileinput/fileinput.js")"></script> <script src="@Url.Content("~/Scripts/bootstrap-fileinput/zh.js")"></script> <script type="text/javascript"> //http://code.ciaoca.com/jquery/jcrop/ //http://code.ciaoca.com/jquery/jcrop/demo/animation //http://plugins.krajee.com/file-input //http://plugins.krajee.com/file-advanced-usage-demo#advanced-example-5 var tailorInfo = ""; //初始化fileinput function FileInput() { var oFile = new Object(); oFile.Init = function (ctrlName, uploadUrl) { var control = $(‘#‘ + ctrlName); //初始化上传控件的样式 control.fileinput({ language: ‘zh‘, //设置语言 browseLabel: ‘选择‘, browseIcon: "<i class=\\"glyphicon glyphicon-picture\\"></i> ", browseClass: "btn btn-primary", //按钮样式 uploadUrl: uploadUrl, //上传的地址 allowedFileExtensions: [‘jpg‘, ‘gif‘, ‘png‘],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: false,//是否显示标题 showPreview: false,//隐藏预览 dropZoneEnabled: false,//是否显示拖拽区域 uploadAsync: true,//采用异步 autoReplace: true, //minImageWidth: 50, //minImageHeight: 50, //maxImageWidth: 1000, //maxImageHeight: 1000, //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount: 1, //表示允许同时上传的最大文件个数 enctype: ‘multipart/form-data‘, validateInitialCount: true, previewFileIcon: "<i class=‘glyphicon glyphicon-king‘></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", uploadExtraData: function () { return { "tailorInfo": tailorInfo } } }); } return oFile; }; function PageInit() { var jcorp = null; var _this = this; var fileInput = new FileInput(); fileInput.Init("txt_file", "@Url.Action("UpLoadFile")"); var input = $(‘#txt_file‘); //图片上传完成后 input.on("fileuploaded", function (event, data, previewId, index) { if (data.response.success) { jcorp.destroy(); $(‘#cut-img‘).attr(‘src‘, data.response.newImage);//Data URI Scheme形式 //$(‘#cut-img‘).attr(‘src‘, data.response.newImage + "?t=" + Math.random());//加尾巴解决缓存问题 } alert(data.response.message); }); //选择图片后触发 input.on(‘change‘, function (event, data, previewId, index) { var img = $(‘#cut-img‘); if (input[0].files && input[0].files[0]) { var reader = new FileReader(); reader.readAsDataURL(input[0].files[0]); reader.onload = function (e) { img.removeAttr(‘src‘); img.attr(‘src‘, e.target.result); img.Jcrop({ setSelect: [0, 0, 260, 290], handleSize: 10, aspectRatio: 1,//选框宽高比 bgFade: false, bgColor: ‘black‘, bgOpacity: 0.3, onSelect: updateCords }, function () { jcorp = this; }); }; if (jcorp != undefined) { jcorp.destroy(); } } function updateCords(obj) { tailorInfo = JSON.stringify({ "PictureWidth": $(‘.jcrop-holder‘).css(‘width‘), "PictureHeight": $(‘.jcrop-holder‘).css(‘height‘), "CoordinateX": obj.x, "CoordinateY": obj.y, "CoordinateWidth": obj.w, "CoordinateHeight": obj.h }); console.log(tailorInfo); } }); //上传出现错误 input.on(‘fileuploaderror‘, function (event, data, msg) { alert(msg); //jcorp.destroy(); //$(‘#cut-img‘).attr(‘src‘, ‘/Content/defaultAvatar.jpg‘); return false; }); //移除图片 input.on(‘fileclear‘, function (event) { console.log("fileclear"); jcorp.destroy(); $(‘#cut-img‘).attr(‘src‘, ‘/Content/defaultAvatar.jpg‘); }); }; $(function () { PageInit(); }); </script> }
public class FileInputController : Controller { [HttpGet] public ActionResult UpLoadFile() { return View(); } [HttpPost] public ActionResult UpLoadFile(string tailorInfo) { var success = false; var message = string.Empty; var newImage = string.Empty; try { var tailorInfoEntity = JsonConvert.DeserializeObject<TailorInfo>(tailorInfo); tailorInfoEntity.PictureWidth = tailorInfoEntity.PictureWidth.Replace("px", ""); tailorInfoEntity.PictureHeight = tailorInfoEntity.PictureHeight.Replace("px", ""); var file = HttpContext.Request.Files[0]; if (file != null && file.ContentLength != 0) { newImage = ImageHelper.TailorImage(file.InputStream, tailorInfoEntity); success = true; message = "保存成功"; } } catch (Exception ex) { message = "保存失败" + ex.Message; } return Json(new { success = success, message = message, newImage = newImage }); } }
/// <summary> /// 前端裁剪信息及前端图片展示规格 /// </summary> public class TailorInfo { public string PictureWidth { get; set; } public string PictureHeight { get; set; } public int CoordinateX { get; set; } public int CoordinateY { get; set; } public int CoordinateWidth { get; set; } public int CoordinateHeight { get; set; } }
/// <summary> /// 图片处理 /// </summary> public static class ImageHelper { /// <summary> /// 图片按照实际比例放大 /// </summary> /// <param name="content"></param> /// <param name="tailorInfo"></param> /// <returns></returns> public static string TailorImage(Stream content, TailorInfo tailorInfo) { var scaleWidth = Convert.ToInt16(tailorInfo.PictureWidth); var scaleHeight = Convert.ToInt16(tailorInfo.PictureHeight); Bitmap sourceBitmap = new Bitmap(content); double scaleWidthPercent = Convert.ToDouble(sourceBitmap.Width) / scaleWidth; double scaleHeightPercent = Convert.ToDouble(sourceBitmap.Height) / scaleHeight; double realX = scaleWidthPercent * tailorInfo.CoordinateX; double realY = scaleHeightPercent * tailorInfo.CoordinateY; double realWidth = scaleWidthPercent * tailorInfo.CoordinateWidth; double realHeight = scaleHeightPercent * tailorInfo.CoordinateHeight; return CropImage(content, (int)realX, (int)realY, (int)realWidth, (int)realHeight); } /// <summary> /// 生成新图片 /// </summary> /// <param name="content"></param> /// <param name="x"></param> /// <param name="y"></param> /// <param name="cropWidth"></param> /// <param name="cropHeight"></param> /// <returns></returns> public static string CropImage(byte[] content, int x, int y, int cropWidth, int cropHeight) { using (MemoryStream stream = new MemoryStream(content)) { return CropImage(stream, x, y, cropWidth, cropHeight); } } /// <summary> /// 生成新图片 /// </summary> /// <param name="content"></param> /// <param name="x"></param> /// <param name="y"></param> /// <param name="cropWidth"></param> /// <param name="cropHeight"></param> /// <returns></returns> public static string CropImage(Stream content, int x, int y, int cropWidth, int cropHeight) { using (Bitmap sourceBitmap = new Bitmap(content)) { Bitmap bitSource = new Bitmap(sourceBitmap, sourceBitmap.Width, sourceBitmap.Height); Rectangle cropRect = new Rectangle(x, y, cropWidth, cropHeight); using (Bitmap newBitMap = new Bitmap(cropWidth, cropHeight)) { newBitMap.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution); using (Graphics g = Graphics.FromImage(newBitMap)) { g.InterpolationMode = InterpolationMode.HighQualityBicubic; g.SmoothingMode = SmoothingMode.HighQuality; g.PixelOffsetMode = PixelOffsetMode.HighQuality; g.CompositingQuality = CompositingQuality.HighQuality; g.DrawImage(bitSource, new Rectangle(0, 0, newBitMap.Width, newBitMap.Height), cropRect, GraphicsUnit.Pixel); return BitmapToBytes(newBitMap); } } } } /// <summary> /// 图片转到byte数组 /// </summary> /// <param name="source"></param> /// <returns></returns> public static string BitmapToBytes(Bitmap source) { ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4]; EncoderParameters parameters = new EncoderParameters(1); parameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L); using (MemoryStream tmpStream = new MemoryStream()) { source.Save(tmpStream, codec, parameters); byte[] data = new byte[tmpStream.Length]; tmpStream.Seek(0, SeekOrigin.Begin); tmpStream.Read(data, 0, (int)tmpStream.Length); return SaveImageToLocal(data); } } /// <summary> /// 存储图片到本地文件系统 /// </summary> /// <param name="binary"></param> public static string SaveImageToLocal(byte[] binary) { //根据用户信息生成图片名 todo var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Content\\avatar.png"); File.WriteAllBytes(path, binary); return "data:images/png;base64," + Convert.ToBase64String(binary);//Data URI Scheme形式 //return @"/Content/avatar.png";//Url形式 } }
git地址：https://gitee.com/530521314/TailorImage.git
步骤：
一、引用前端插件
加入JCrop插件，在官网下载或是git上下载均可,引用这两个文件即可，注意引用地址正确哈。
<link href="@Url.Content("~/Content/Jcrop/jquery.Jcrop.css")" rel="stylesheet" /> <script src="@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.js")"></script>
加入Bootstrap插件，同样下载或是git上下载，不建议通过nuget或是bower下载，会下载一大堆的东西，很多用不到的。引用如下文件。
<link href="@Url.Content("~/Content/bootstrap-fileinput/fileinput.css")" rel="stylesheet" /> <script src="@Url.Content("~/Scripts/bootstrap-fileinput/fileinput.js")"></script> <script src="@Url.Content("~/Scripts/bootstrap-fileinput/zh.js")"></script>
我是直接在页面上引用的并没有将其移动到模板上出于一些因素，暂时可以不讨论这里，页面引用结构：
二、前端文件上传页面设计
加入文件上传元素，一行代码即可，没错就一行：
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /><br />
加入文件上传相关的js代码：
//初始化fileinput function FileInput() { var oFile = new Object(); oFile.Init = function (ctrlName, uploadUrl) { var control = $(‘#‘ + ctrlName); //初始化上传控件的样式 control.fileinput({ language: ‘zh‘, //设置语言 browseLabel: ‘选择‘, browseIcon: "<i class=\\"glyphicon glyphicon-picture\\"></i> ", browseClass: "btn btn-primary", //按钮样式 uploadUrl: uploadUrl, //上传的地址 allowedFileExtensions: [‘jpg‘, ‘gif‘, ‘png‘],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: false,//是否显示标题 showPreview: false,//隐藏预览 dropZoneEnabled: false,//是否显示拖拽区域 uploadAsync: true,//采用异步 autoReplace: true, //minImageWidth: 50, //minImageHeight: 50, //maxImageWidth: 1000, //maxImageHeight: 1000, //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount: 1, //表示允许同时上传的最大文件个数 enctype: ‘multipart/form-data‘, validateInitialCount: true, previewFileIcon: "<i class=‘glyphicon glyphicon-king‘></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", uploadExtraData: function () { return { "tailorInfo": tailorInfo } } }); } return oFile; };
然后实例化一个fileinput
var fileInput = new FileInput(); fileInput.Init("txt_file", "@Url.Action("UpLoadFile")");
至此文件上传前端页面已经OK了，接下来加入图片裁剪功能。
三、前端图片裁剪页面设计
裁剪的话不能够在文件上传的框中进行直接裁剪，而是通过一个图片标签进行裁剪，因此加入一个图片标签
<img id="cut-img" class="thumbnail" style="width: 300px;height:300px;" src="~/Content/defaultAvatar.jpg"><br />
裁剪的js代码
var input = $(‘#txt_file‘); //选择图片后触发 input.on(‘change‘, function (event, data, previewId, index) { var img = $(‘#cut-img‘); if (input[0].files && input[0].files[0]) { var reader = new FileReader(); reader.readAsDataURL(input[0].files[0]); reader.onload = function (e) { img.removeAttr(‘src‘); img.attr(‘src‘, e.target.result);
//关键在这里 img.Jcrop({ setSelect: [0, 0, 260, 290], handleSize: 10, aspectRatio: 1,//选框宽高比 bgFade: false, bgColor: ‘black‘, bgOpacity: 0.3, onSelect: updateCords }, function () { jcorp = this; }); }; if (jcorp != undefined) { jcorp.destroy(); } } function updateCords(obj) { tailorInfo = JSON.stringify({ "PictureWidth": $(‘.jcrop-holder‘).css(‘width‘), "PictureHeight": $(‘.jcrop-holder‘).css(‘height‘), "CoordinateX": obj.x, "CoordinateY": obj.y, "CoordinateWidth": obj.w, "CoordinateHeight": obj.h }); console.log(tailorInfo); } });
至此前端页面文件上传和裁剪可以直接使用了。
四、后端文件上传和裁剪设计
将裁剪信息传递到后端，前端可以使用到Bootstrap-fileinput的一个属性uploadExtraData，可以传递除文件外的一些信息过来。当然如果看了Bootstrap-fileinput，其实是有两种模式，模式一是直接表单提交，额外属性直接用相关字段即可保存提交，我用的是模式二，异步上传，额外的信息只能通过属性uploadExtraData来保存提交。
获得上传过来的图片信息，通过图片辅助类的处理得到图片的的地址，这个是用的DataURI Scheme协议，可以直接在图片上展示图片，而不需要用相对/绝对路径的形式，某宝好像就是这样。这样一来，小图片可以直接转换成Base64的形式保存在数据库，而不需要依赖本地的文件系统了，不错额。
[HttpPost] public ActionResult UpLoadFile(string tailorInfo) { var success = false; var message = string.Empty; var newImage = string.Empty; try { var tailorInfoEntity = JsonConvert.DeserializeObject<TailorInfo>(tailorInfo); tailorInfoEntity.PictureWidth = tailorInfoEntity.PictureWidth.Replace("px", ""); tailorInfoEntity.PictureHeight = tailorInfoEntity.PictureHeight.Replace("px", ""); var file = HttpContext.Request.Files[0]; if (file != null && file.ContentLength != 0) { newImage = ImageHelper.TailorImage(file.InputStream, tailorInfoEntity); success = true; message = "保存成功"; } } catch (Exception ex) { message = "保存失败" + ex.Message; } return Json(new { success = success, message = message, newImage = newImage }); }
图片辅助类
/// <summary> /// 图片处理 /// </summary> public static class ImageHelper { /// <summary> /// 图片按照实际比例放大 /// </summary> /// <param name="content"></param> /// <param name="tailorInfo"></param> /// <returns></returns> public static string TailorImage(Stream content, TailorInfo tailorInfo) { var scaleWidth = Convert.ToInt16(tailorInfo.PictureWidth); var scaleHeight = Convert.ToInt16(tailorInfo.PictureHeight); Bitmap sourceBitmap = new Bitmap(content); double scaleWidthPercent = Convert.ToDouble(sourceBitmap.Width) / scaleWidth; double scaleHeightPercent = Convert.ToDouble(sourceBitmap.Height) / scaleHeight; double realX = scaleWidthPercent * tailorInfo.CoordinateX; double realY = scaleHeightPercent * tailorInfo.CoordinateY; double realWidth = scaleWidthPercent * tailorInfo.CoordinateWidth; double realHeight = scaleHeightPercent * tailorInfo.CoordinateHeight; return CropImage(content, (int)realX, (int)realY, (int)realWidth, (int)realHeight); } /// <summary> /// 生成新图片 /// </summary> /// <param name="content"></param> /// <param name="x"></param> /// <param name="y"></param> /// <param name="cropWidth"></param> /// <param name="cropHeight"></param> /// <returns></returns> public static string CropImage(byte[] content, int x, int y, int cropWidth, int cropHeight) { using (MemoryStream stream = new MemoryStream(content)) { return CropImage(stream, x, y, cropWidth, cropHeight); } } /// <summary> /// 生成新图片 /// </summary> /// <param name="content"></param> /// <param name="x"></param> /// <param name="y"></param> /// <param name="cropWidth"></param> /// <param name="cropHeight"></param> /// <returns></returns> public static string CropImage(Stream content, int x, int y, int cropWidth, int cropHeight) { using (Bitmap sourceBitmap = new Bitmap(content)) { Bitmap bitSource = new Bitmap(sourceBitmap, sourceBitmap.Width, sourceBitmap.Height); Rectangle cropRect = new Rectangle(x, y, cropWidth, cropHeight); using (Bitmap newBitMap = new Bitmap(cropWidth, cropHeight)) { newBitMap.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution); using (Graphics g = Graphics.FromImage(newBitMap)) { g.InterpolationMode = InterpolationMode.HighQualityBicubic; g.SmoothingMode = SmoothingMode.HighQuality; g.PixelOffsetMode = PixelOffsetMode.HighQuality; g.CompositingQuality = CompositingQuality.HighQuality; g.DrawImage(bitSource, new Rectangle(0, 0, newBitMap.Width, newBitMap.Height), cropRect, GraphicsUnit.Pixel); return BitmapToBytes(newBitMap); } } } } /// <summary> /// 图片转到byte数组 /// </summary> /// <param name="source"></param> /// <returns></returns> public static string BitmapToBytes(Bitmap source) { ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4]; EncoderParameters parameters = new EncoderParameters(1); parameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L); using (MemoryStream tmpStream = new MemoryStream()) { source.Save(tmpStream, codec, parameters); byte[] data = new byte[tmpStream.Length]; tmpStream.Seek(0, SeekOrigin.Begin); tmpStream.Read(data, 0, (int)tmpStream.Length); return SaveImageToLocal(data); } } /// <summary> /// 存储图片到本地文件系统 /// </summary> /// <param name="binary"></param> public static string SaveImageToLocal(byte[] binary) { //根据用户信息生成图片名 todo var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Content\\avatar.png"); File.WriteAllBytes(path, binary); return "data:images/png;base64," + Convert.ToBase64String(binary);//Data URI Scheme形式 //return @"/Content/avatar.png";//Url形式 } }
最后这一步可以控制你需要的形式，是要使用路径形式还是Data URI Scheme形式。
第一个方法将图片根据获得的位置信息，进行比例缩放,然后一系列处理得到新图片。再将图片返回给前端展示。
裁剪信息的类我是这样设计的，但是里面的内容可以全部自定义，是由前端传递过来的信息决定的，应该属于ViewModel这一类的。
/// <summary> /// 前端裁剪信息及前端图片展示规格 /// </summary> public class TailorInfo { public string PictureWidth { get; set; } public string PictureHeight { get; set; } public int CoordinateX { get; set; } public int CoordinateY { get; set; } public int CoordinateWidth { get; set; } public int CoordinateHeight { get; set; } }
五、成果展示
至此图片的在线裁剪搞定了。
六、 asp.net core下的后端设计
由于core并还没有将图片相关的类库移植到core下，但是社区上有大神们已经完成了core下的图片处理的类库，我使用的是SixLabors.ImageSharp
地址：https://www.nuget.org/packages/SixLabors.ImageSharp其中介绍了怎么样安装的方法，不再陈述。
在asp.net core下，我只实现了一个图片缩放的代码，如有更多需要，可以联系我，我将尝试尝试。
前端页面无需做改动，后端代码我们需要改变了，需要用到ImageSharp中的一些方法和属性。
asp.net core取文件的方式变了。
var file = HttpContext.Request.Form.Files["txt_file"];
pictureUrl = "data:images/png;base64," + ImageHelper.ImageCompress(file.OpenReadStream());//图片缩放到一定规格
在图片辅助类中，通过ImageSharp进行处理即可将图片缩放，当然也可以裁剪，但是我没有去设计了：
public static string ImageCompress(Stream content) { var imageString = string.Empty; using (Image<Rgba32> image = Image.Load(content)) { image.Mutate(x => x .Resize(image.Width / 5, image.Height / 5) .Grayscale()); imageString = image.ToBase64String(ImageFormats.Bmp); } return imageString; }
在此，感谢几位博友的文章:
@梦游的龙猫 https://www.cnblogs.com/wuxinzhe/p/6198506.html
https://yq.aliyun.com/ziliao/1140
2018-3-31,望技术有成后能回来看见自己的脚步