layui 图片剪切/截取

左手的ㄟ右手 2021-11-29 05:14 589阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 3][]

[https_fly.layui.com_extend_croppers]: https://fly.layui.com/extend/croppers/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20211129/7444ab0d2ab242199f1f82bf6d1802ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1]: /images/20211129/ed5d0b544bc240bfb743ab2f49ea0357.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 2]: /images/20211129/ad418c2a77cd4ae1b0477b3e5b491ce1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 3]: /images/20211129/9e9f1ea8333f4292973f7ca694bd580e.png