cropper使用

1、基础实例

注意，一定要引入cropper.js和croppers.js这两个文件
html代码

<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="123.jpg" 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>
</div>

js部分

layui.config({
	 base: '/resource/cropper/'
    }).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: "/TravellerWebsite/traveller/headIcon.do"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            ,done: function(url){ //上传完毕回调
                $("#inputimgurl").val(url);
                $("#srcimgurl").attr('src',url);
            }
        });

    });

注意，可能会出现cropper.css加载失败的情况，可以到croppers.js中更改下图cropper.css的路径

  var html = "<link rel=\"stylesheet\" href=\"/resource/cropper/cropper.css\">\n" +

使用cropper携带额外的数据到后台

js代码

layui.config({
	 base: '/resource/cropper/'
    }).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'  //弹窗宽度
            ,data:{"id":1234,'name':'we'} //传入的数据一定要为这种格式，才能解析
            ,url: "/headIcon.do"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            ,done: function(url){ //上传完毕回调
                $("#inputimgurl").val(url);
                $("#srcimgurl").attr('src',url);
            }
        });

    });

然后在croppers.js中修改以下两处代码

 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,
                data = e.data,  //要额外携带传入后台的数据
                done = e.done;

  $(".layui-btn").on('click',function () {
                var event = $(this).attr("cropper-event");
                //监听确认保存图像
                if(event === 'confirmSave'){
                	/**
                	 * 可以将要额外携带的数据转换成json格式
                	 * 然后遍历加入到formData中
                	 * 这里没有转换为json格式
                	 */
                //	 var result = $.parseJSON(data);
                	 var formData=new FormData();
                	 $.each(data, function(k, v) {
                		 formData.append(k,v);
                     });
                	 
                    image.cropper("getCroppedCanvas",{
                        width: saveW,
                        height: saveH
                    }).toBlob(function(blob){
          
                        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});
                                }

                            }
                        });
                    });

后面持续更新中…