layui 图片剪切/截取

文档下载路径：https://fly.layui.com/extend/croppers/

左边是可拖动的裁剪区，右边是裁剪后的显示的区域

<div class="layui-form-item">
	<label>商品图片：(大小500*500)</label>
	<button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传图片</button>
	<div class="contentimg">
		<div style="width: 100px;height: 100px;border: 1px solid rgba(0,0,0,0.14)">
			<span style="position: absolute;margin-top: -28px;" onclick="del_span(this,'img1')">删除</span>
			<img alt class="image" id="img" src="" />
		</div>
		<div style="width: 100px;height: 100px;border: 1px solid rgba(0,0,0,0.14)">
			<span style="position: absolute;margin-top: -28px;" onclick="del_span(this,'img2')">删除</span>
			<img alt class="image" id="img1" src="" />
		</div>
		<div style="width: 100px;height: 100px;border: 1px solid rgba(0,0,0,0.14)">
			<span style="position: absolute;margin-top: -28px;" onclick="del_span(this,'img3')">删除</span>
			<img alt class="image" id="img2" src="" />
		</div>
	</div>
</div>

 

//图片上传
layui.config({
    base: './Public/layuiadmin/cropper/' //layui自定义layui组件目录
}).use(['form','croppers'], function () {
    var $ = layui.jquery
        ,form = layui.form
        ,croppers = layui.croppers
        ,layer= layui.layer;

    //创建一个头像上传组件
    croppers.render({
        elem: '#test1'
        ,saveW:500     //保存宽度（可以自己定义图片截取后的宽高）
        ,saveH:500     //保存高度
        ,mark:1/1    //选取比例
        ,area: ['60%', '98%'] //弹窗宽度
        ,url: '{:U("api/oss/upload_car")}'  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
        , done: function(res) { //上传完毕回调
            if(res.success){
                layer.msg("保存成功");
                var url=res.url;
                var img=$("#img").attr('src');
                var img1=$("#img1").attr('src');
                var img2=$("#img2").attr('src');
                if(img==""){
                    $("#img").attr('src',url);
                }else if(img1==""){
                    $("#img1").attr('src',url);
                } else if(img2==""){
                    $("#img2").attr('src',url);
                }
            }else {
                layer.msg("保存失败");
            }
        }
    });

});
 //删除当前选择的行
function del_span(t,s) {
	var img_t=s;
	if(img_t=='img1'){
        $("#img").attr('src','');
	}else if(img_t=='img2'){
        $("#img1").attr('src','');
	}else if(img_t=='img3'){
        $("#img2").attr('src','');
	}

}

以下部分是在croppers.js中自己要去更改的部分。