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);
});

View Code

cropper插件可以直接网上下载。

基本剪切上传图片功能完成，还需要修改样式和处理返回值的需要根据自己需要改动下代码。出处x-admin-》第三方插件-》截图

转载于:https://www.cnblogs.com/zhuyapeng/p/11270657.html

layui+croppers完成图片剪切上传相关推荐

结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
vue 实现ps图片编辑_Vue项目图片剪切上传——vue-cropper的使用
选择图片 ref="cropper":img="option.img":outputSize="option.size":outputTyp ...
利用jquery插件的图片剪切上传功能
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图, ...
ssm+layui实现图片的上传与读取
ssm+layui实现图片的上传与读取图片上传确实是一个项目比较核心的技术,我的项目并没有用到传统的富文本上传,而是将图片先热部署到tomcat,在上存储到数据库,读取的时候同样使用此方法. 图片上 ...
html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
Tornado+Layui（九）Tornado+Layui 前后端分离头像上传
目的:添加人员信息和头像同时上传过程: 1.Layui头像界面 <!DOCTYPE html> <html> <head><meta charset=&qu ...

layui+croppers完成图片剪切上传

layui+croppers完成图片剪切上传相关推荐

最新文章

热门文章