layui+croppers完成图片剪切上传
不多说直接上代码：
前台代码：
<!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-》第三方插件-》截图
