11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toute la communauté,

J'utilise un script qui me permet d'uploader une image et de la retravailler (resize, déplacement,...).
Une fois satisfait du résultat je clique sur un bouton "crop" et ma photo telle que souhaitée apparaît dans une balise <img> classique en format base64.

Code de mon bouton crop :
$("#crop").on("click",function(){            
    var src = CanvasCrop.getDataURL("png");
     //$("body").append("<div style='word-break: break-all;'>"+src+"</div>");  
     $(".container2").append("<img src='"+src+"' />");
});


Code de mon container pour ma photo retravaillée :
<div class="container2">
</div>


Ce code après insertion de la photo devient :
<div class="container2">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU...kJggg==">
</div>


Jusqu'à présent je faisais un clique droit sur l'image, l'enregistrais localement et ensuite dans un second temps, je la transférais sur mon serveur via mon client FTP.

J'aimerais optimiser ceci et pouvoir ajouter un bouton "save" qui copierait automatiquement l'image sur mon serveur.

J'ai un niveau très faible en javascript et n'ai aucune idée de comment procéder. Je ne trouve rien sur le net me mettant sur une quelconque piste. Quelqu'un a-t-il une idée ?

Un grand merci d'avance !