Laravel5.1 搭建簡單的社區（十三）--Jcrop裁剪頭像

首先在app.blade.php中引入jcrop（在github上能夠找到）

    {{--引入jcrop--}}
    <link rel="stylesheet" href="/css/jquery.Jcrop.css">
    <script src="/js/jquery.Jcrop.min.js"></script>

在bootstrap官網中copy一段模態框的代碼到avatar.blade.php中，根據實際狀況進行修改：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    {!! Form::open(['method'=>'POST','url'=>'/crop/api', 'onsubmit'=>'return checkCoords();','files' => true]) !!}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: #ffffff">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">裁剪頭像</h4>
                    </div>
                    <div class="modal-body">
                        <div class="content">
                            <div class="crop-image-wrapper">
                                <img src="/images/default-avatar.jpeg" class="ui centered image" id="cropbox" >
                                <input type="hidden" id="photo" name="photo" />
                                <input type="hidden" id="x" name="x" />
                                <input type="hidden" id="y" name="y" />
                                <input type="hidden" id="w" name="w" />
                                <input type="hidden" id="h" name="h" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">裁剪頭像</button>
                    </div>
                    {!! Form::close() !!}
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

從新修改咱們的js代碼，當頭像上傳成功後彈出模態框：

function showResponse(response)  {
            if(response.success == false)
            {
                var responseErrors = response.errors;
                $.each(responseErrors, function(index, value)
                {
                    if (value.length != 0)
                    {
                        $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
                    }
                });
                $("#validation-errors").show();
            } else {
//                $('#user-avatar').attr('src',response.avatar);
//                $('#upload-avatar').html('更換新的頭像');
                // 取到cropbox
                var cropbox = $('#cropbox');
                // 設置cropbox的圖片地址
                cropbox.attr('src', response.avatar);
                // 設置 id爲photo的input標籤的值
                $('#photo').val(response.avatar);
                // 設置按鈕
                $('#upload-avatar').html('上傳新頭像');
                // 彈出模態框
                $('#exampleModal').modal('show');
                cropbox.Jcrop({
                    aspectRatio: 1,
                    onSelect: updateCoords,
                    setSelect: [200,200,0,0]
                })
                $('.jcrop-holder img').attr('src', response.avatar);
            }
        }

        // 對應着onSelect的配置
        function updateCoords(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        }

        // 對應着表單的onsubmit
        function checkCoords()
        {
            if (parseInt($('#w').val())) return true;
            alert('請選擇圖片.');
            return false;
        }

到此爲止前端的工做就差很少完成了，下面來寫後端的邏輯：

前端代碼新增了一個表單，咱們註冊對應的路由：

Route::post('/crop/api', 'UsersController@cropAvatar');

咱們把存儲到數據庫的操做放到裁剪方法中，具體是這樣的，註釋很清楚：

    public function changeAvatar(Request $request)
    {
        // 聲明路徑名
        $destinationPath = 'uploads/';
        // 取到圖片
        $file = $request->file('avatar');

        // 驗證
        $input = array('image' => $file);
        $rules = array(
            'image' => 'image'
        );
        $validator = \Validator::make($input, $rules);
        if ( $validator->fails() ) {
            return \Response::json([
                'success' => false,
                'errors' => $validator->getMessageBag()->toArray()
            ]);
        }

        // 得到圖片的名稱 爲了保證不重複 咱們加上userid和time
        $file_name = \Auth::user()->id . '_' . time() . $file->getClientOriginalName();
        // 執行move方法
        $file->move($destinationPath, $file_name);
        // 裁剪圖片 生成400的縮略圖
        Image::make($destinationPath . $file_name)->fit(500)->save();

        return \Response::json([
            'success' => true,
            'avatar' => asset($destinationPath.$file_name),
        ]);
    }

    public function cropAvatar(Request $request)
    {
//        array:6 [▼
//  "_token" => "PB7DoFssm6vTQGsDREbpm2zZppSb80BdfKCFpmCf"
//  "photo" => "http://localhost:8000/uploads/21_1492618494IMG_2332.JPG"
//  "x" => "0"
//  "y" => "29"
//  "w" => "450"
//  "h" => "450"
//]
//        dd($request->all());
        // 拿到數據
        $photo=strstr($request->get('photo'),'uploads');
        $width = (int) $request->get('w');
        $height = (int) $request->get('h');
        $x = (int) $request->get('x');
        $y = (int) $request->get('y');

        // 使用Image對圖像進行裁剪後保存
        Image::make($photo)->crop($width, $height, $x, $y)->save();

        // 保存到數據庫
        $user = \Auth::user();
        $user->avatar = '/' . $photo;
        $user->save();

        return redirect('/user/avatar');
    }