Modifier image avant validation formulaire

Bonjour,
J'ai une photo de couverture qui est affichée avant l'envoi du formulaire sur la page.
La personne peut repositionner l'image, l'agrandir, etc.
Pièce jointe 206285
J'aimerais donc que une fois le formulaire validé, les modifications de l'image sois prise en compte et sois envoyé en POST comme un fichier normal.

Pour l'instant, tout fonctionne mais c'est l'image de base qui est gardé et non celle modifié.

Merci d'avance.

Voici les scripts en question si vous voulez :

Code:

1
2
3
4
5
6
7
8
9
10
11
// Affiche l'image choisi par l'user
function readFile() {
  if (this.files && this.files[0]) {
    var FR = new FileReader();
    FR.onload = function(e) {
			getID("sample_picture").innerHTML = e.target.result;
      	getID("sample_picture").src = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
  }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Dragging image
jQuery(function() {
		var picture = $('#sample_picture');
 
    // Make sure the image is completely loaded before calling the plugin
    picture.one('load', function(){
	    // Initialize plugin (with custom event)
	    picture.guillotine({eventOnChange: 'guillotinechange'});
 
	    // Display inital data
	    var data = picture.guillotine('getData');
	    for(var key in data) { $('#'+key).html(data[key]); }
 
	    // Bind button actions
	    $('#fit').click(function(){ picture.guillotine('fit'); });
	    $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
	    $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
 
	    // Update data on change
	    picture.on('guillotinechange', function(ev, data, action) {
	      data.scale = parseFloat(data.scale.toFixed(4));
	      for(var k in data) { $('#'+k).html(data[k]); }
	    });
	});
 
    // Make sure the 'load' event is triggered at least once (for cached images)
    if (picture.prop('complete')) picture.trigger('load')
});

Et le html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="form-group">
    <label>Photo de couverture</label>
    <div>
        <label for="chosenfile" class="custom-file-upload" style="cursor: pointer;">
        	<a class="btn btn-default" role="button">Choisir une image…</a>
		</label>
		<input type="file" id="chosenfile" name="photo" accept="image/*" onchange="refreshImg('preview_image', this.id)" style="display: none;"/>
	    <a id="remove" class="btn btn-primary" data-dismiss="fileupload" style="margin-left:10px">Supprimer</a>
  	</div>
    <p class="help-block">Non obligatoire. 500 ko max.</p>
	<div class='frame'>
        <img id='sample_picture' src='http://www.placehold.it/800x600/EFEFEF/AAAAAA&text=photo+couverture'>
    </div>
    <div id='controls' style="margin-left:auto;margin-right:auto;width: 25.5%;">
        <button id='zoom_out' type='button' title='Zoom out'><i class="glyphicon glyphicon-minus"></i></button>
        <button id='fit' type='button' title='Fit image'><i class="glyphicon glyphicon-resize-full"></i></i></button>
        <button id='zoom_in' type='button' title='Zoom in'><i class="glyphicon glyphicon-plus"></i></button>
    </div>
</div>