Caricamento di un'immagine ritagliata utilizzando un plugin cropper.js

Question

Nella mia applicazione ho utilizzato il plug-in cropper.js per ritagliare le immagini. Sono in grado di ritagliare le immagini. Ora sto cercando di caricare le immagini invece di scaricarle. Ho aggiornato la finestra modale che mostra l'immagine ritagliata come segue:

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

Qui ho aggiunto un modulo in fondo con l'opzione di salvare l'immagine. Sto cercando di utilizzare il seguente script per salvare il modulo:

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

Ora ho trovato dalla documentazione che avrei dovuto usare il seguente codice per salvare l'immagine:

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

Ma io non sono sicuro come utilizzare questo codice come parte dell'invio del modulo che sto cercando di implementare come una chiamata Ajax.

Anche io uso Spring mvc, quindi quali sarebbero i parametri nel metodo controller in caso di questo caricamento dell'immagine.

Answer 1

Anche se questa domanda è stata posta a lungo, ancora sto condividendo un collegamento alla soluzione che ho appena inserito nel contesto del problema di qualcun altro.

Spero che aiuti qualcuno a trovare su questa pagina. (Come ho atterrato e ho trovato nessuna soluzione) Crop image using Cropper.js, then upload (or display) the cropped image.

Answer 2

github.com/fengyuanchen/cropperj Api Doc per Server Carica come formdata e Immagine src definizione di tag.

e guardare il paragrafo successivo di getCroppedCanvas():

Dopo di allora, è possibile visualizzare la tela come un'immagine direttamente, o utilizzare HTMLCanvasElement.toDataURL per ottenere un URL di dati, o utilizzare HTMLCanvasElement.toBlob per ottenere un blob e caricarlo sul server con FormData se il browser supporta queste API.