layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)

cropper.js组件，弹出图片裁剪窗口，支持图片缩放、移动、旋转，将裁剪后的图片以base64的格式传给后端。

• 支持Promise API
• 支持移动触摸事件
• 基于canvas技术，支持canvas的浏览器都可以使用该插件
• 通过Base64编码导出剪裁后的图片。 可以通过json数据来获取图片的位置和大小
• 可以通过json数据来设置图片的位置和大小
• 可以通过URL来获取图片。

外部引入

HTML容器

    头像
    
        
    
    
        
    
    
        选择图片
    
    头像的尺寸限定150x150px,大小在50kb以内

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: ['90%', '80%']//弹窗宽度
            , url: 'upload.php'
            , done: function (res) {
                console.log(res.imgUrl)
                $("#inputimgurl").val(res.imgUrl);
                $("#srcimgurl").html('');
            }
        });
    });

PHP后端上传