web-dev-qa-db-fra.com

Téléchargement d'une image recadrée à l'aide d'un plugin cropper.js

J'ai utilisé cropper.js plugin dans mon application pour rogner des images. Je suis capable de recadrer les images. Maintenant, j'essaie 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 dans le bas avec l'option pour enregistrer l'image. J'essaie 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é dans la documentation 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 dans le cadre de la soumission du formulaire que je tente d'implémenter en tant qu'appel ajax.

J'utilise aussi Spring mvc, quels sont donc les paramètres de la méthode du contrôleur en cas de téléchargement de cette image? 

jqueryspring-mvchtml5-canvas
7
Geo Thomas

Bien que cette question ait été posée il y a longtemps, je partage toujours un lien vers la solution que je viens de publier dans le contexte du problème de quelqu'un d'autre. 

J'espère que cela aidera quelqu'un qui se trouve sur cette page. (Comme si j'avais atterri et n'avais trouvé aucune solution) Recadrez l'image à l'aide de Cropper.js, puis téléchargez (ou affichez) l'image recadrée.

4
Siddhartha Chowdhury

github.com/fengyuanchen/cropperj Api Doc for Server Téléchargez en tant que définition de balise formData et Image src.

et observez le paragraphe ci-dessous de getCroppedCanvas ():

Ensuite, vous pouvez afficher le canevas directement sous forme d'image, utiliser HTMLCanvasElement.toDataURL pour obtenir une URL de données ou utiliser HTMLCanvasElement.toBlob pour obtenir un blob et le télécharger sur le serveur avec FormData si le navigateur prend en charge ces API.

0
mEnE