图片压缩和在线裁剪总结

上周需要做一个图片上传并且将上传的图片在线可以裁剪展示,觉得这个功能很有用，但是找参考资料的时候却并不是很多，因此来将我用到的总结总结，也让有需要的博友们直接借鉴。

 

首先环境介绍：

1、asp.net mvc网站，用到的前端插件是JCrop和Bootstrap-fileinput，在后端用框架自带的一些类库进行处理即可。

　　JCrop插件是用来裁剪图片的，页面上裁剪就是保存裁剪的位置信息，然后将位置信息转给后台在后台进行实际图片裁剪功能。

　　插件地址：

　　Bootstrap-fileinput插件是Bootstrap下的文件上传的插件，功能强大，我将依靠这个完成文件的上传，当然也能够使用其他的文件上传工具。

　　插件地址：

　　文件上传后页面上展示的图片是以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="http://www.likecs.com/@Url.Content("~/Content/Jcrop/jquery.Jcrop.css")" /> <link href="http://www.likecs.com/@Url.Content("~/Content/bootstrap-fileinput/fileinput.css")" /> <br /> <button data-toggle="modal" data-target="#myModal">头像</button> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <h4>图片上传</h4> </div> <div> <div> <div> <img src="http://www.likecs.com/~/Content/defaultAvatar.jpg"><br /> </div> <div> <input type="file" multiple /><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="http://www.likecs.com/@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.js")"></script> <script src="http://www.likecs.com/@Url.Content("~/Scripts/bootstrap-fileinput/fileinput.js")"></script> <script src="http://www.likecs.com/@Url.Content("~/Scripts/bootstrap-fileinput/zh.js")"></script> <script type="text/javascript"> // // // //#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></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> }