画像トリミングの「Cropper.js」利用にあたって画像サイズ取得がうまくできません。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Cropper.jsで画像をトリミングするシステムを作っています。
トリミングのデータ取得方法について質問させて頂きます。
宜しくお願い致します。

発生している問題・エラーメッセージ

該当のソースコードで次の２つの問題が発生しています。
・トリミング対象の画像が表示されないこと。
・トリミング時にサイズが取得できないこと。

該当のソースコード

最終的にはinputに「src,横,縦,幅,高さ」というデータを入力したいと考えています。
しかし先述の２つの問題が発生し、躓いている状態です。

html
1<link  href="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.css" rel="stylesheet">
2<script src="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.js"></script>
3
4<div class="target">
5    <img src="https://dummyimage.com/600x400/000/fff">
6</div>
7
8<input type="text">
9
10<script type="text/javascript">
11$(function(){
12
13  /*
14  Cropperのデータ取得
15  */
16  cropData = $('.target img').cropper("getData");
17
18  /*
19  送信データ作成
20  */
21  
22  //画像URL取得
23  var Src = $('.target img').attr('src');
24  
25  //Cropper実行時
26  $('.target img').cropper({
27  
28    //Cropperサイズ取得
29    crop: function(e) {
30      var X = Math.floor(cropData.x);
31      var Y = Math.floor(cropData.y);
32      var W = Math.floor(cropData.width);
33      var H = Math.floor(cropData.height);
34      var Result = Src+','+X+','+Y+','+W+','+H;
35    }
36    
37    //送信データ作成    
38    $('input').val(Result);   
39    
40  });
41  
42});
43</script>