Plusieurs fonctions dans un event
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:
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:
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:
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:
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:
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 :)
