Bonjour,

Je cherche à afficher une preview d'une image que je vais uploader.
Cette preview permet de creer un rognage.
Pour afficher la preview, je réalise un traitement sur la taille pour recadrer l'image afin que celle ci s'affiche à l'intérieur d'un cadre.

Le problème c'est qu'au premier chargement de l'image, la taille est toujours de 24px par 24px. Alors que le preview donne un css de width et heigth correct.
Je suis obliger de réactualiser la page pour que la bonne taille soit prise en compte.

voici le code (issu d'un exemple sur un tutoriel), avec des commentaires explicatifs. Le "bug" est à la ligne 21


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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
$('input[name=mon_fichier]').change(function(){
 $('#popup_rognage').css({'width': '500px', 'height':'500px', 'overflow':'auto', 'position': 'relative', 'top':'-520px','margin-left':'auto','margin-right':'auto','background':'#1B2034','overflow':'hidden','border-bottom-left-radius':'10px','border-bottom-right-radius':'10px'});
 	$('#bouton_valider').css('visibility' , 'visible');
	$('#bouton_fermer').css('visibility' , 'visible');
	readURL(this);
});
function readURL(input) { 
	if (input.files && input.files[0]) { 
		var reader = new FileReader(); 
		reader.onload = function (e) { 
 
			$('#jcrop_target').attr('src', e.target.result);
 
 
 
			init_w = 500;//taille de la div pour le rognage
			init_h = 500;
 
 
			imgWidth = $('#jcrop_target').width(); // le code qui "bug" est ici, j'ai tenté, avec le meme résultat, .css('width')...
			imgHeight = $('#jcrop_target').height();
			alert(imgWidth+'X'+imgHeight); //pour checker la taille qui sera prise en compte
			cle = imgWidth/imgHeight;
 
 
			if(cle > 1) {
				if(imgWidth > init_w) {w = init_w; h = init_w / cle; } 
				else if(imgHeight > init_h) {w = init_h * cle; h = init_h;}
			}// image plus large que haute
			if(cle < 1) {
				if(imgHeight > init_h) {h = init_h; w = init_h * cle; } 
				else if(imgWidth > init_w) {h = init_w / cle; w = init_w;}
			}// image plus haute que large
			if(cle == 1) { h = init_h ; w = init_h;}
 
			multi_w = imgWidth/w; multi_h = imgHeight/h;
 
//			$('#jcrop_target').css({'height': h, 'width': w,'margin':'0px' });
 
			// destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') {
                jcrop_api.destroy();
                jcrop_api = null;
 
	       }
 
			$('#jcrop_target').Jcrop({
			 		onSelect:    showCoords,
            		bgColor:     'black',
            		bgOpacity:   .4,
            		setSelect:   [ 0, 0, 100, 100 ],
           		 aspectRatio: 1 / 1
 
				}, function(){jcrop_api = this;});
			function showCoords(c) {
				X = c.x*multi_w;
				Y = c.y*multi_h;
				He = c.h*multi_h;
				Wi = c.w*multi_w;
				$('#x1').val(X);
				$('#y1').val(Y);
				$('#x2').val(c.x2);
				$('#y2').val(c.y2);
				$('#w').val(Wi);
				$('#h').val(He);
 
			}
 
		}; 
		reader.readAsDataURL(input.files[0]); 
 
	} 
}
Le code s'éxecutant correctement, il n'y à pas de message d'erreur sur la console.

Merci beaucoup d'avance