jquery Cropper getData関数がデータの代わりにオブジェクトを返しています：画像

Question

私はこのウィジェットを動作させるのに苦労しているので、この投稿を作っていますが、これまでのところ成功していないし、数秒でまとめることができます。私は何か間違っていると確信しています。

私はバージョンv0.7.9を使用しています。これは私がウィジェットを起動するために使用するスクリプトです。

  var $image = $("#target img"); 
      originalData = {}; 


     $("#bootstrap-modal").on("shown.bs.modal", function() { 
        $image.cropper({ 

        preview: ".img-preview", 
        multiple: true, 
        data: originalData, 
        done: function(data) { 
        } 
        }); 


     }).on("hidden.bs.modal", function() { 
       originalData = $image.cropper("getDataURL", "image/jpeg"); 
       $('#dataURLView img').attr('src', originalData); 
       console.log(originalData); 

     }); 

私が探しているのは、モップブートストラットの例と同じ動作をエミュレートすることです。

<div class="modal fade" id="bootstrap-modal"> 
    <div class="modal-dialog" > 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="modalLabel">Crop the image</h4> 
     </div> 
     <div class="modal-body"> 
     <div id="target"> 
      <img id="image" src="sample_image.jpg" alt="Picture"> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

はoriginaldataのVARは、データとしてトリミング結果を取得することになっている：画像の種類を、その後のimg URLとして設定しますが、それは今のところ機能していません。 クロッピング結果を除くすべてが機能しています。 これはコンソールに表示された結果です。 enter image description here

Answer 1

私はこの問題を発見しました。このベース64のURL出力は、作成者が追加した新しい機能であり、なぜそれを実装するための正しい方法を見つけることができなかったのですか。これは、あなたがそれを得るために使用する必要があるコードです：

var data = $image.cropper('getCroppedCanvas').toDataURL() ; 

、出力データをSRCフィールドに:)