Discussion :

[asurion]

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[mathieu]

quelle est cette bibliothèque "guillotine" ?
elle doit surement fournir une méthode qui retourne l'image modifiée sous forme d'une chaine de caractères JavaScript. Et ensuite il suffira d'envoyer cette chaine au serveur.