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=,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:};

            $(elem).on('click',function () {

                layer.open({

                    type:

                    , 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 == ){

                                    layer.msg(result.msg,{icon: });

                                    layer.closeAll('page');

                                    return done(result.data.src);

                                }else if(result.code == -){

                                    layer.alert(result.msg,{icon: });

                                }

                            }

                        });

                    });

                    //监听旋转

                }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[];

                    r.readAsDataURL(f);

                    r.onload=function (e) {

                        image.cropper('destroy').attr('src', this.result).cropper(options);

                    };

                });

            });

        }

    };

    exports('croppers', obj);

});

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

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

layui+croppers完成图片剪切上传的更多相关文章

cropper实现图片剪切上传
一.引入文件 <script src="jquery.min.js"></script> <link rel="stylesheet&quo ...
Vue项目图片剪切上传——vue-cropper的使用
最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...
分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切旋转再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...
asp.net实现图片在线上传并在线裁剪
1.说明接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
springmvc图片文件上传接口
springmvc图片文件上传用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
base64格式的图片如何上传到oss
---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤 ...
Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
PHP裁剪图片并上传完整demo
日前根据功能需求,要做一个图片裁剪上传的功能,在网上找了好久,找到了这位仁兄写的demo! 下载压缩包

随机推荐

jQuery.speech实现文本转语音播报功能
先放一个实例的地址https://github.com/wenco/speech jQuery.speech是用jQuery写的扩展插件,主要是用来语音播报. 接口调用百度翻译的接口,所以存在url参 ...
hdu多校第五场1004 （hdu6627） equation 1 计算几何
题意: 给你一个C,再给你n组a,b,让你求x取什么值的时候,$ \sum_{i=1}^n |a_i*x+b_i| =C $,要求求出解的个数,并用最简分数从小到大表示,如果有无穷多解,输出-1. 题 ...
[转] .htaccess实现www 与没有www之间的重定向
建站过程中有时候我们需要做这些设置 1.访问www 直接重定向到没有www上或者反过来,那么怎么通过.htaccess文件来实现呢. 1.首先服务器要支持Rewrite重写 2.创建.htaccess ...
MySQL数据库中，将一个字段的值分割成多条数据显示
本文主要记录如何在MySQL数据库中,将一个字符串分割成多条数据显示. 外键有时是以字符串的形式存储,例如 12,13,14 这种,如果以这种形式存储,则不能直接与其他表关联查询,此时就需要将该字段的 ...
剑指offer——11矩阵覆盖
题目描述我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题解: 使用递归或者动态规划,明显,递归没有动态规划优 ...
jquery控件的学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
sp_executeSql 用法执行有参数的sql字符串出现必须声明标量变量 "@XXX"。
今天遇到了一个难题就是把一个拼接sql语句的返回值赋值给一个变量经研究要用sp_executeSql这个存储过程据说是从sql 2005才开始有的代码如下: declare @str ...
科普帖：深度学习中GPU和显存分析
知乎的一篇文章: https://zhuanlan.zhihu.com/p/31558973 关于如何使用nvidia-smi查看显存与GPU使用情况,参考如下链接: https://blog.csd ...
Thread-per-Message 这个工作交给你了
Per是“每一”的意思,所以thread per message解释过来就是“每个消息一个线程”,message在这里可以看做是“命令”或“请求”的意思,对每隔命令或请求,分配一个线程,有这个线程执行 ...
bcolz
raise Exception("this is an ex") bcolz总结: 0.需要用bcolz的columns需要为ndarray的列,不能直接拿list去赋值,因为我发 ...

layui+croppers完成图片剪切上传

layui+croppers完成图片剪切上传的更多相关文章

随机推荐

热门专题