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">×</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.
voici un tutoriel complet howsolve.com/...
OriginalL'auteur Geo Thomas | 2016-01-28
Vous devez vous connecter pour publier un commentaire.
Si cette question a été posée à long retour, j'ai toujours le partage d'un lien vers la solution que je viens de poster dans le contexte de quelqu'un d'autre problème.
J'espère que ça aidera quelqu'un l'a trouvé sur cette page. ( Comme je l'ai atterri et pas trouvé de solution )
Rogner l'image à l'aide de Cropper.js, puis les télécharger (ou display) l'image recadrée.
OriginalL'auteur Siddhartha Chowdhury
github.com/fengyuanchen/cropperj Doc Api pour le Serveur de Téléchargement comme formData et de l'Image src de la balise de définition.
et de regarder ci-dessous le paragraphe de getCroppedCanvas():
OriginalL'auteur mEnE