L'upload d'une image recadrée à l'aide d'un cropper.js plugin

J'ai utilisé cropper.js plugin dans mon application pour recadrer les images. Je suis en mesure de recadrer les images. Maintenant, je suis en train de télécharger les images au lieu de les télécharger.
J'ai mis à jour la fenêtre modale qui montre l'image recadrée comme suit:

<!-- 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 -->

Ici, j'ai ajouté un formulaire en bas avec l'option Enregistrer l'image. Je suis en train d'utiliser le script suivant pour enregistrer le formulaire:

$("#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();
    });
});

Maintenant, j'ai trouvé de la doc que je devrais utiliser le code suivant pour enregistrer l'image:

//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');
    }
  });
});

Mais je ne suis pas sûr de savoir comment utiliser ce code comme une partie de la soumission du formulaire laquelle je suis en train de mettre en œuvre un appel ajax.

Aussi j'utilise Spring mvc, alors ce serait les paramètres de la méthode de contrôleur dans le cas de cette image de téléchargement.

OriginalL'auteur Geo Thomas | 2016-01-28