不多说直接上代码：
前台代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="../layui/layui/css/layui.css" rel="stylesheet" /> <link href="../layui/cropper/cropper.css" rel="stylesheet" /> </head> <body> <div class="layui-form-item"> <label class="layui-form-label">头像</label> <div class="layui-input-inline"> <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input"> </div> <div class="layui-input-inline"> <div class="layui-upload-list" style="margin:0"> <img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img"> </div> </div> <div class="layui-input-inline layui-btn-container" style=" auto;"> <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button> </div> <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div> </div> <script src="../layui/layui/layui.js"></script> <link href="../layui/cropper/cropper.css" rel="stylesheet" /> <script src="../layui/cropper/croppers.js"></script> <script> layui.config({ base: '/layui/cropper/' //layui自定义layui组件目录 }).use(['form', 'croppers'], function () { var $ = layui.jquery , form = layui.form , croppers = layui.croppers , layer = layui.layer; //创建一个头像上传组件 croppers.render({ elem: '#editimg' , saveW: 150 //保存宽度 , saveH: 150 , mark: 1 / 1 //选取比例 , area: '900px' //弹窗宽度 , url: "/home/UpLoadImg" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样 , done: function (url) { //上传完毕回调 $("#inputimgurl").val(url); $("#srcimgurl").attr('src', url); } }); }); </script> </body> </html>
后台代码：
[HttpPost] public ActionResult UpLoadImg() { //HttpPostedFileBase file = Request.Files["upfile"]; HttpPostedFileBase file = Request.Files["file"]; var type = Request.Form["type"]; var filename = string.Format("{0:yyyyMMddHHmmssfffffff}", DateTime.Now) + ".jpg"; if (file != null) { string path = HttpContext.Server.MapPath("/Images/Uploads"); string filePath = Path.Combine(path, Path.GetFileName(filename)); //根据需要创建文件夹 CreateFolderIfNeeded(path); //将图片保存到IIS file.SaveAs(filePath); } return Json(new { code=0,data= filename }); }
croppers.js代码：
/*! * Cropper v3.0.0 */ layui.config({ base: '/static/cropper/' //layui自定义layui组件目录 }).define(['jquery','layer','cropper'],function (exports) { var $ = layui.jquery ,layer = layui.layer; var html = "<link rel="stylesheet" href="/static/cropper/cropper.css"> " + "<div class="layui-fluid showImgEdit" style="display: none"> " + " <div class="layui-form-item"> " + " <div class="layui-input-inline layui-btn-container" style=" auto;"> " + " <label for="cropper_avatarImgUpload" class="layui-btn layui-btn-primary"> " + " <i class="layui-icon"></i>选择图片 " + " </label> " + " <input class="layui-upload-file" id="cropper_avatarImgUpload" type="file" value="选择图片" name="file"> " + " </div> " + " <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div> " + " </div> " + " <div class="layui-row layui-col-space15"> " + " <div class="layui-col-xs9"> " + " <div class="readyimg" style="height:450px;background-color: rgb(247, 247, 247);"> " + " <img src="" > " + " </div> " + " </div> " + " <div class="layui-col-xs3"> " + " <div class="img-preview" style="200px;height:200px;overflow:hidden"> " + " </div> " + " </div> " + " </div> " + " <div class="layui-row layui-col-space15"> " + " <div class="layui-col-xs9"> " + " <div class="layui-row"> " + " <div class="layui-col-xs6"> " + " <button type="button" class="layui-btn layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="Rotate -90 degrees"> 向左旋转</button> " + " <button type="button" class="layui-btn layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="Rotate 90 degrees"> 向右旋转</button> " + " </div> " + " <div class="layui-col-xs5" style="text-align: right;"> " + " <button type="button" class="layui-btn" title="移动"></button> " + " <button type="button" class="layui-btn" title="放大图片"></button> " + " <button type="button" class="layui-btn" title="缩小图片"></button> " + " <button type="button" class="layui-btn layui-icon layui-icon-refresh" cropper-event="reset" title="重置图片"></button> " + " </div> " + " </div> " + " </div> " + " <div class="layui-col-xs3"> " + " <button class="layui-btn layui-btn-fluid" cropper-event="confirmSave" type="button"> 保存修改</button> " + " </div> " + " </div> " + " " + "</div>"; var obj = { render: function(e){ $('body').append(html); var self = this, elem = e.elem, saveW = e.saveW, saveH = e.saveH, mark = e.mark, area = e.area, url = e.url, done = e.done; var content = $('.showImgEdit') ,image = $(".showImgEdit .readyimg img") ,preview = '.showImgEdit .img-preview' ,file = $(".showImgEdit input[name='file']") , options = {aspectRatio: mark,preview: preview,viewMode:1}; $(elem).on('click',function () { layer.open({ type: 1 , content: content , area: area , success: function () { image.cropper(options); } , cancel: function (index) { layer.close(index); image.cropper('destroy'); } }); }); $(".layui-btn").on('click',function () { var event = $(this).attr("cropper-event"); //监听确认保存图像 if(event === 'confirmSave'){ image.cropper("getCroppedCanvas",{ saveW, height: saveH }).toBlob(function(blob){ var formData=new FormData(); formData.append('file',blob,'head.jpg'); $.ajax({ method:"post", url: url, //用于文件上传的服务器端请求地址 data: formData, processData: false, contentType: false, success:function(result){ if(result.code == 0){ layer.msg(result.msg,{icon: 1}); layer.closeAll('page'); return done(result.data.src); }else if(result.code == -1){ layer.alert(result.msg,{icon: 2}); } } }); }); //监听旋转 }else if(event === 'rotate'){ var option = $(this).attr('data-option'); image.cropper('rotate', option); //重设图片 }else if(event === 'reset'){ image.cropper('reset'); } //文件选择 file.change(function () { var r= new FileReader(); var f=this.files[0]; r.readAsDataURL(f); r.onload=function (e) { image.cropper('destroy').attr('src', this.result).cropper(options); }; }); }); } }; exports('croppers', obj); });
cropper插件可以直接网上下载。
基本剪切上传图片功能完成，还需要修改样式和处理返回值的需要根据自己需要改动下代码。出处x-admin-》第三方插件-》截图