layui+cropper+php图片裁剪

上传成功后展示：


js资源地址：

链接:https://pan.baidu.com/s/1jUvnHpGbMhPMjTPIpUCcNw  密码:q8ij



========================================以下为代码==========================================================



html:
<div class="layui-form-item">
    <label class="layui-form-label"><font style="color: red;">*</font> 上传头像</label>
    <div class="layui-input-block" style="width: 450px;">
        <input type="hidden" name="manager_photo" id="manager_photo" value="">
        <button type="button" class="layui-btn" id="photo">
            <i class="layui-icon">&#xe67c;</i>上传头像
        </button>
    </div>
    <div class="layui-form-item" id="manager_photo_show">

    </div>
</div>

js:

layui.config({
    base: '/static/cropper/' //layui自定义layui组件目录
}).use(['form','croppers'], function () {
    var $ = layui.jquery
        ,form = layui.form
        ,croppers = layui.croppers
        ,layer= layui.layer;
    var upload = layui.upload;
    var img_url = "<?php echo rtrim($img_prefix, '/');?>";//展示头像的前缀地址
    //头像上传
    croppers.render({
        elem: '#photo'
        ,title:'头像编辑'//弹窗标题
        ,saveW:200     //保存宽度
        ,saveH:200
        ,minCropBoxWidth:200//裁剪最小宽度
        ,minCropBoxHeight:200//裁剪喜小高度
        ,mark:1/1    //选取比例
        ,area:'900px'  //弹窗宽度
        ,url: "upload-img?format=path"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
        ,done:function (res) {
            if(res.code == 0){
                $('#manager_photo').val(res.data[0]);
                $('#manager_photo_show').html('<p style="margin-left:110px;"><img id="insurance_agency_certificate_photo_list" name="insurance_agency_certificate_photo_list" src="' + img_url + res.data[0] + '" width="150" height="150"></p>');
            }else{
                layer.msg('图片上传失败！ErrorMsg:'+res.msg, {icon: 2});
            }
        }
    });
});

php:

public function actionUploadImg()
{
    $request = \Yii::$app->request;
    if($request->isPost){
        \Yii::$app->response->format = Response::FORMAT_JSON;
        //返回数据格式，默认返回url, 支持path参数，返回相对于网站根目录的路径
        $format = $request->get('format', 'url');
        //提交输入框名称
        $fileInputName = $request->get('filename', 'file');
        $file = UploadedFile::getInstanceByName($fileInputName);
        if ($file->size > 1024 * 1024 * 10) {
            return ['code' => 1, 'msg' => '图片最大不可超过10M'];
        }
        if (!in_array(strtolower($file->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
            return ['code' => 1, 'msg' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
        }

        $relative_path = 'manager'.'/'.date('Y').'/'.date('m').'/'.date('d').'/';
        $absolute_path = rtrim(\Yii::$app->params['upload_dir'], '/').'/'.$relative_path;
        if(!file_exists($absolute_path)){
            try{
                FileHelper::createDirectory($absolute_path, 0777, true);
            }catch (\Exception $e){
                return ['code'=>1, 'msg' => '目录创建失败，'.$e->getMessage()];
            }
        }
        //文件名
        $filename = date('His').substr(md5($file->getBaseName()),0,8).mt_rand(1000, 9999).'.'.$file->getExtension();
        //保存文件
        $file->saveAs($absolute_path.$filename);

        $data = '';
        switch ($format){
            case 'url':
                $data =  rtrim(\Yii::$app->params['cdn_url_prefix'], '/').'/'.$relative_path.$filename;
                break;

            case 'path':
                $data = '/'.$relative_path.$filename;
                break;
        }

        return ['code'=>0, 'data' => [$data]];
    }

}