Discussion :

[setni]

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

[NoSmoking]

Bonjour,
il te faut attendre le chargement effectif de l'image pour pouvoir recueillir les informations la concernant, en d'autre termes mets les actions à réaliser sur le onload de celle ci.

[setni]

Bonjour,

Je ne comprends pas, sur le code que j'ai donné au dessus, les opérations sont déjà effectuées dans le onLoad.

[NoSmoking]

tu es dans le onload de l'objet oReader et non sur celui de l'image devant être chargée.

[setni]

Ok,

Je confondais,

Donc, j'enrobe le traitement par ceci :

Code :

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

$('#jcrop_target').on('load', function () { ... });

Après l'invocation de

Code :

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

reader.readAsDataURL(input.files[0]);

Donc le problème est résolu

Merci