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

    <script src="layui/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="cropper.css">
    <script src="cropper.js"></script>
    <script src="croppers.js"></script>

<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="图片地址" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <div class="layui-upload-list" style="margin:0" id="srcimgurl"></div>
    </div>
    <div class="layui-input-inline layui-btn-container">
        <button class="layui-btn layui-btn-primary" id="editimg">选择图片</button>
    </div>
    <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>

    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('<img src="' + res.imgUrl + '" width="30" class="layui-upload-img">');
            }
        });
    });

<?php
$upload_dir = 'upload';
$newDate = date("Y-m");
$imgUrl = $upload_dir . '/' . $newDate;
if (!is_dir($upload_dir)) {
    mkdir($upload_dir);
}
if (!is_dir($imgUrl)) {
    mkdir($imgUrl);
}
//获取传递参数;
$file = $_FILES['file'];
$ext = explode('.', $_FILES['file']['name']);
$ext = end($ext);
$fileName = md5(time()) . "." . $ext;
//执行上传;
if (isset($_FILES['file']) && $_FILES['file']['error'] == "0") {
    //上传图片；
    move_uploaded_file($file['tmp_name'], $imgUrl . "/" . $fileName);
    $safe_img = $imgUrl . "/" . $fileName;
    //返回JSON；
    $res['code'] = "0";
    $res['imgUrl'] = $safe_img;
    $res['err'] = '上传成功!';
    die(json_encode($res));
}