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

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

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

外部引入

    <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>

HTML容器

<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组件调用

    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('+ 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));
}

@lockdata.cn