layui 图片剪切/截取

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

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

	商品图片：(大小500*500)
	上传图片
	

		

			删除
			
		
		

			删除
			
		
		

			删除
			
		
	

 

//图片上传
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中自己要去更改的部分。