不多說直接上代碼：
前台代碼：
<!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="width: 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\">\n" + "<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" + " <div class=\"layui-form-item\">\n" + " <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;\">\n" + " <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">\n" + " <i class=\"layui-icon\"></i>選擇圖片\n" + " </label>\n" + " <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"選擇圖片\" name=\"file\">\n" + " </div>\n" + " <div class=\"layui-form-mid layui-word-aux\">頭像的尺寸限定150x150px,大小在50kb以內</div>\n" + " </div>\n" + " <div class=\"layui-row layui-col-space15\">\n" + " <div class=\"layui-col-xs9\">\n" + " <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" + " <img src=\"\" >\n" + " </div>\n" + " </div>\n" + " <div class=\"layui-col-xs3\">\n" + " <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" + " </div>\n" + " </div>\n" + " </div>\n" + " <div class=\"layui-row layui-col-space15\">\n" + " <div class=\"layui-col-xs9\">\n" + " <div class=\"layui-row\">\n" + " <div class=\"layui-col-xs6\">\n" + " <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋轉</button>\n" + " <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋轉</button>\n" + " </div>\n" + " <div class=\"layui-col-xs5\" style=\"text-align: right;\">\n" + " <button type=\"button\" class=\"layui-btn\" title=\"移動\"></button>\n" + " <button type=\"button\" class=\"layui-btn\" title=\"放大圖片\"></button>\n" + " <button type=\"button\" class=\"layui-btn\" title=\"縮小圖片\"></button>\n" + " <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\" title=\"重置圖片\"></button>\n" + " </div>\n" + " </div>\n" + " </div>\n" + " <div class=\"layui-col-xs3\">\n" + " <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" + " </div>\n" + " </div>\n" + "\n" + "</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",{ width: 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-》第三方插件-》截圖