Discussion :

[Fredy007]

Bonjour,

Je veux prévisualiser une image avant l'upload, du coup, je veux récupérer quelques informations et les vérifier avant de passer au transfert, parmi ces informations, sont les dimensions, j'ai pris ce code du net, et je veux le développer pour retourner les informations en array:

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
 
 
	function imageFileDims(fileID){
 
	var _URL = window.URL || window.webkitURL;   
  	var file, img, fileWidth, fileHeight, dims=[];
 
    file = $('#'+fileID)[0].files[0];
 
    img = new Image();
 
    img.onload = function(data) {
                 fileWidth   = this.width;
                 fileHeight  = this.height;
 
                dims.push(fileWidth);
                dims.push(fileHeight);
 
                console.log(dims);
 
// les élément à retourner
 
     return [fileWidth, fileHeight];
 
            };
 
// le résultat est [] null	
console.log(dims);
 
            img.src = _URL.createObjectURL(file);
            console.log(img.onload());            
  }
 
$("#file-input1").change(function(e) {
    imageFileDims("file-input1");
});

Merci a vous

[NoSmoking]

Bonjour,

... je veux le développer pour retourner les informations en array:

les retourner à qui ?

Les données n'étant disponibles qu'un fois l'image chargée il te faut les utiliser à ce moment là et pas ailleurs.

[Fredy007]

Je veux les récupérer au sein de la fonction imageFileDims(fileID), mais hors de img.onload = function(data) {

Autrement dit: transmettre les valeur width et height de img.onload = function(data) { vers l'exterieur

[NoSmoking]

mais hors de img.onload = function(data) {

tu es bien obligé de passer par cette étape !

Tu peux poursuivre de la façon suivante

Code :

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

1
2
3
4
5
6
img.onload = function(){
  // tu fais ce que tu veux avec les données
  // ...
  // puis tu appelles une fonction de traitement
  fct_transfert( data);  // par exemple
}

[Fredy007]

Si j'ai bien compris:

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
 
img.onload = function(){
 
 
function getData(){
                var dW	= fileWidth;
                var dH	= fileHeight;
 
                return [dW, dH];
                }
 
 
} // end onload
 
console.log(getData);

Celle la retourne undefined function getData

[NoSmoking]

Celle la retourne undefined function getData

normal, ta fonction n'est pas connu en dehors du scope de la fonction anonyme affectée au onload de ton image.

Indente correctement tes codes pour une meilleur visibilté

Code :

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

1
2
3
4
5
6
7
8
9
10
img.onload = function () {
    function getData() {
        var dW = fileWidth;
        var dH = fileHeight;
        return [dW,
        dH];
    }
} // end onload
 
console.log(getData);

mais à quoi peut bien te servir cette fonction incluse, es tu sûr d'en avoir besoin ?

[Fredy007]

Comment puis je traiter les dimensions côté client, avant d'envoyer les données au serveur en utilisant une fonction de traitement?

[NoSmoking]

Comment puis je traiter les dimensions côté client, ...

comme dit avant directement dans ta fonction anonyme mis sur le onload ou en faisant appel à une fonction externe en lui passant les données.

Je pense qu'il y a quelque chose qui doit m'échapper sur ce que tu cherches à faire !

[Fredy007]

Voici un petit exemple:

Code :

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

1
2
3
4
5
6
7
 
img.onload = function () {
 
// code ici
 
        return [dW,  dH];
    } // end onload

Là je récupère le width et height de l'image, que je veux utiliser dans une autre fonction extérieur afin de les traiter:

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
 
function checkImage(file){
 
var imageWidth = // les valeurs que j'ai récupéré de la fonction onload
var imageHeight = // les valeurs que j'ai récupéré de la fonction onload
 
var imageSize = xxx
var imageExt = yyyy
 
if(imageWidth < 100){
 
}
 
if(imageHeight< 100){
 
}
 
if(imageSize > 1000000){
 
}
 
// ainsi de suite
 
}

[Toufik83]

bonjour,
je ne sais pas pourquoi tu es obligé de passer par onload alors que onchange est parfaite.

Code :

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

1
2
3
4
5
6
7
 
imageFileDims=function(image){
return [image[0].files[0].size/1024,image[0].files[0].name,image[0].files[0].type]
}
$("#img").on('change',function(){
console.log("Size :"+imageFileDims($(this))[0]+" Ko,"+" Name :"+imageFileDims($(this))[1]+", Type :"+imageFileDims($(this))[2]);
});

j'ai raté quelque chose peut être?

[Fredy007]

@Toufik83: Je n'ai pas encore testé votre code, mais du coup que les valeurs retournées sont de l'image précédente et non pas de l'image courante, voici la DEMO