cropper.jsを使いたい

###前提・実現したいこと
phpを使ってホームページを更新するプログラムを作っているド素人です。
商品画像を登録する際に、任意のサイズになるよう切り取る機能を実装したいと考えており、jqueryの知識は一切ありませんが、cropper.jsと言うものを使い、下記の参考サイトにある機能だけで要件を満たす事ができそうなので挑戦しました。

■やりたい事
画像をアップロード
比率は固定でリサイズ
リサイズした画像を任意のフォルダに格納、またはdbに格納

参考サイト http://co.bsnws.net/article/50

このサイトを参考にやってみたのですが、ボタンアクションからtrueが返ってきません。
これは何が原因なのでしょうか。

###試したこと
ボタンアクションの中にアラートを入れてみると反応はあったので、最後の処理が失敗しているため反応がないのではと思うのですが…
成功させるためにはどうしたらいいのかご教授くださいm(_ _)m

また、リサイズした画像をphpで表示する方法も教えて頂きたいです。

             (他 .map ファイル4種)
             bootstrap.css bootstrap.min.css
             bootstrap-theme.css bootstrap-theme.min.css
          ----css{ bootstrap.js bootstrap.min.js npm.js

フォルダ構成 |
boot_test -------js { bootstrap.js bootstrap.min.js npm.js
|
----img
|
---app { routes.php
|
----fonts

html
1<!-- boot_test/index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>Bootstrap 101 Template</title>
9<!-- Bootstrap -->
10    <link href="css/bootstrap.min.css" rel="stylesheet">
11<!-- CSS -->
12<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css" rel="stylesheet" type="text/css" media="all"/>
13<!-- JS -->
14<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
15<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
16<!--[if lt IE 9]>
17<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
18<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
19<![endif]-->
20</head>
21<body>
22    <h3><i class="fa fa-crop"></i> cropperのデモ </h3>
23    <!-- 切り抜きボタン -->
24    <a id="getData" class="btn btn-primary">Get Data</a><br><br>
25    
26    <div class="cropper-example-1">
27        <!-- bladeテンプレートを使用していれば asset()や url() 関数が使えます -->
28        <img id="img" class="img-responsive" src="./img/art.jpg" alt="">
29    </div>
30
31    <script type="text/javascript">
32        // init
33        // class='cropper-example-1のimgタグに適用'
34        var $image = $('.cropper-example-1 > img'),replaced;
35
36        //crop options
37        // id='imgに適用'
38        $('#img').cropper({
39            aspectRatio: 4 / 4 // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9
40        });
41        
42        $('#getData').on('click', function(){
43            alert('こんにちは!');
44            // crop のデータを取得
45            var data = $('#img').cropper('getData');
46            // 切り抜きした画像のデータ
47            // このデータを元にして画像の切り抜きが行われます
48            var image = {
49                width: Math.round(data.width),
50                height: Math.round(data.height),
51                x: Math.round(data.x),
52                y: Math.round(data.y),
53                _token: 'jf89ajtr234534829057835wjLA-SF_d8Z' // csrf用
54            };
55            // post 処理
56            $.post('/cropper', image, function(res){
57                // 成功すれば trueと表示されます
58                console.log(res);
59            });
60        });
61        
62    </script>
63    
64    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
65    <script src="js/bootstrap.min.js"></script>
66    
67</body>
68</html>
69

javascript
1// app/routes.php
2
3use Illuminate\Http\Request;
4use Intervention\Image\ImageManagerStatic as Image;
5
6$app->post('/cropper', function(Request $request){
7
8  $str =  str_random(7);
9
10  $crop =  value(function() use ($request, $str) {
11
12              // Laravelの場合は public_path()ヘルパー関数、Facadeが使えます
13              $image = Image::make('../public/img/art.jpg')
14                      ->crop(
15                             $request->get('width'),
16                             $request->get('height'),
17                             $request->get('x'),
18                             $request->get('y')
19                           )
20                      ->resize(256,256) // 256 * 256にリサイズ
21                      // 画像の保存
22                      ->save('../public/img/'. $str . '.jpg')
23                      ->resize(128,128) //サムネイル用にリサイズ
24                      ->save('../public/img/'. $str . '_t' . '.jpg');
25
26                      // 必要があれば元のファイルも消す
27                      /* Lumenの場合は bootstrap/app.phpに以下のコードを追加
28                      * class_alias('Illuminate\Support\Facades\File', 'File');
29                      */
30                      // \File::delete('Your image File);
31
32                      return $image ?: false;
33
34              });
35
36  return $crop ? ['response' =>  true, 'img' => $str . '.jpg']
37               : ['response' => false];
38
39});
40

koronatail

2017/01/13 01:06

afamさんが製作したコードを載せてください。

afam

2017/01/13 01:35

早速見ていただきありがとうございます。不慣れなため、見難いようでしたら修正します。

koronatail

2017/01/13 03:41

routes.phpに<script>タグが含まれていますがただのコピペミスでしょうか。気が付かなかったのですがLaravelを使用しているのですね・・・。Laravelのタグ追加したほうがいいと思います。Laravel触ったこと無いので回答できなくて申し訳ないです。

afam

2017/01/13 11:22

ご意見ありがとうございます。<script>タグは色々試し、私が最後にダメ元で追加して消し忘れたものでした。早速削除させていただきます。仰る通りLaravelを使用しているようですが私も使った事がなくこの有様です(･･;)ご意見をいただき大変ありがたく思います。もしLaravelを使わずに必要な機能を実装するとしたらどんな方法がありますでしょうか？教えていただけると幸いです。