cropper.jsプラグインを使用して画像を切り取ってアップロードする

Question

自分のアプリケーションにcropper.jsプラグインを使用して画像を切り抜きました。私は画像をトリミングすることができます。今私はそれらをダウンロードする代わりに画像をアップロードしようとしています。 私は次のようにトリミングされた画像を示してモーダルウィンドウを更新しています。ここ

<!-- Show the cropped image in modal --> 
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4> 
     </div> 
     <div class="modal-body"></div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" style = "float: left;">Close</button> 
     <form class="form-inline" id="croperImgForm" role="form" method="post" action="${rc.getContextPath()}/module/simplewebcontent/save-image" enctype="multipart/form-data"> 
     <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox1" value="option1"> Save Image 
     </label> 
     <label class="checkbox-inline"> 
      <input type="checkbox" id="inlineCheckbox2" value="option2">Save Thumbnail 
     </label> 
     <button type="submit" class="btn btn-primary" id="svImg" style = "margin-left: 10px;">Save</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div><!-- /.modal --> 

私は画像を保存するオプションが底にフォームを追加しました。私は、フォームを保存するには、次のスクリプトを使用しようとしています：

$("#svImg").click(function() 
    { 
    alert('button clicked'); 
    $("#croperImgForm").submit(function(e) 
    { 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax(
     { 
     url : formURL, 
     type: "POST", 
     data : postData, 
     dataType : "html", 
     success:function(htmlData) 
     { 

     }, 
     error: function(xhr, status, errorThrown) { 
      console.log("Error: " + errorThrown); 
      console.log("Status: " + status); 
      console.dir(xhr); 
     }, 
    }); 

     e.preventDefault(); 
     e.unbind(); 
    }); 
}); 

は今、私は、画像を保存するには、次のコードを使用する必要がありますドキュメントは見つかり：

// Upload cropped image to server if the browser supports `canvas.toBlob` 
$().cropper('getCroppedCanvas').toBlob(function (blob) { 
    var formData = new FormData(); 

    formData.append('croppedImage', blob); 

    $.ajax('/path/to/upload', { 
    method: "POST", 
    data: formData, 
    processData: false, 
    contentType: false, 
    success: function() { 
     console.log('Upload success'); 
    }, 
    error: function() { 
     console.log('Upload error'); 
    } 
    }); 
}); 

しかし、私はわかりませんどのように私はajax呼び出しとして実装しようとしているフォームの提出の一部としてこのコードを使用します。

また、私はSpring mvcを使用していますので、この画像アップロードの場合のコントローラメソッドのパラメータは何でしょうか。

Answer 1

この質問は長らく尋ねられましたが、私はちょうど他の人の問題に関連して投稿した解決策へのリンクを共有しています。

このページで誰かが助けてくれることを願っています。 （私が着陸して解決策を見つけたのと同じように）Crop image using Cropper.js, then upload (or display) the cropped image.

Answer 2

github.com/fengyuanchen/cropperj Api Doc formDataとImage srcタグ定義としてアップロードします。

とgetCroppedCanvasの下の段落（）に注意：この後、あなたが直接画像としてキャンバスを表示する、またはデータのURLを取得するためにHTMLCanvasElement.toDataURLを使用するか、またはHTMLCanvasElement.toBlobを使用することができます

をブラウザーがこれらのAPIをサポートしている場合は、ブロブを取得してFormDataでサーバーにアップロードします。