Discussion :

[Yog-Sothot]

Bonjour, je viens poster ici mon problème qui me tracasse depuis trois jours, et que ni mes visites sur IRC, ni mes questions à mes professeurs et ni mes demandes n'ont pu m'éclaircir. Il s'agit d'un petit problème avec le plugin JCrop, permettant de faire une prévisualisation d'un crop d'image avec un ratio prédéfini, pour ensuite l'enregistrer. Je parviens à faire le preview, et pas de soucis non plus pour la sauvegarde ; seulement, je n'arrive pas à faire les deux en même temps. Je développe avec Laravel4.

Voici l'image et le thumbnail dans le code (pour l'instant en dur, je ferai le dynamique après :

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
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="../images/gallery/1.jpg" id="photo" />
</td>
<td>
<div style="width:200px;height:200px;overflow:hidden;margin-left:5px;">
	<img src="../images/gallery/1.jpg" id="preview" />
</div>
    <form action="crop" method="post" onsubmit="return checkCoords();">
	<input type="hidden" id="x" name="x" />
	<input type="hidden" id="y" name="y" />
	<input type="hidden" id="w" name="w" />
	<input type="hidden" id="h" name="h" />
	<input type="submit" value="Crop Image" />
    </form>
</td>
</tr>
</table>

Voici le Javascript associé pour le preview :

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
$(function(){
	$('#photo').Jcrop({
		onChange: showPreview,
		onSelect: showPreview,
		aspectRatio: 1
	});
});
function updateCoords(c){
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#w').val(c.w);
	$('#h').val(c.h);
};
function checkCoords(){
	if (parseInt($('#w').val())) return true;
	alert('Please select a crop region then press submit.');
	return false;
};
function showPreview(coords){
	var rx = 200 / coords.w;
	var ry = 200 / coords.h;
	$('#preview').css({
		width: Math.round(rx * 500) + 'px',
		height: Math.round(ry * 500) + 'px',
		marginLeft: '-' + Math.round(rx * coords.x) + 'px',
		marginTop: '-' + Math.round(ry * coords.y) + 'px'
	});
}

Et voila la fonction dans le contrôleur associé, couplé avec Intervention Image que je trouve très pratique :

Code php :

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

1
2
3
4
public function store(){
	$imge = Image::make('images/gallery/1.jpg')->crop(100, 100, Input::get('x'), Input::get('y'));
               $imge->save('images/illunews/blabla.jpg');
}

Le problème, donc, est que dans cette situation, je n'ai accès qu'au preview, et que je ne peux pas enregistrer l'image. Cependant, si je modifie la première fonction javascript comme ceci :

Code :

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

1
2
3
4
5
6
$(function(){
	$('#photo').Jcrop({
		onChange: updateCoords,
		onSelect: updateCoords,
		aspectRatio: 1
	});

Je peux sauvegarder l'image, mais le preview ne s'effectue plus. Alors, j'ai tenté diverses techniques, comme mettre deux fois la fonctions et changer uniquement les onChange et onSelect, mais seule la deuxième fonction s'effectue, j'ai aussi tenté de mettre les deux fonctions uniquement séparées par une virgule, comme ceci :

Code :

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

1
2
3
4
5
6
    $(function(){
	$('#photo').Jcrop({
		onChange: showPreview, updateCoords,
		onSelect: showPreview updateCoords,
		aspectRatio: 1
	});

Sans succès, et j'ai également tenté de mettre les onChange/onSelect : updateCoords dans la fonction showPreview, sans que ça ne marche.

Est-ce que ce que j'essaye de faire est seulement possible, ou est-ce que je m'acharne à faire fonctionner un code qui ne pourra jamais fonctionner ? J'ai essayé de trouver sur internet, mais je suppose que les mots-clefs n'étaient pas les bons, n'étant pas une grande utilisatrice de Javascript. De plus, la doc de JCrop ne fait pas mention de ceci.
Merci de m'éclairer

[kakashi99]

salut,

question bête, mais as-tu essayé un truc comme ça ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$('#photo').Jcrop({
		onChange: test,
		onSelect: test,
		aspectRatio: 1
	});
 
function test(coords) {
  showPreview(coords);
  updateCoords(coords);
}

[Yog-Sothot]

C'était pas une question bête, je ne l'avais pas fait, et ça marche \o/ En fait, ça me paraît tellement facile avec du recul... Bon bah merci beaucoup beaucoup beaucoup, que des pétales de camélias pavent ton chemin

[kakashi99]

de rien

bon courage pour la suite.