Récupérer les données hors de onload

Version imprimable

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:

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

07/01/2017, 08h53
NoSmoking

Bonjour,

Citation:

... 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.
07/01/2017, 09h20
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

Citation:

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:

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 }

Si j'ai bien compris:

Code:

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

07/01/2017, 11h30
NoSmoking
Citation:

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:

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 ?
08/01/2017, 02h36
Fredy007

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

Citation:

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

:koi: 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 !

Voici un petit exemple:

Code:

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:

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
 
}

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

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?

10/01/2017, 10h45
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