Mettre une valeur dans une variable globale à partir d'une fonction anonyme

Version imprimable

Bonjour,

J'ai une variable globale et je voudrais savoir comment mettre une valeur à cette variable dans une fonction anonyme. J'obtiens toujours la valeur undefined

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
export class classDeTest {
 
    varGlob: number;
 
    un() {
        var a = function() {
          var b = function() {
             // affecter une valeur à varGlob 
          }
        }
        this.deux();
    }
 
    deux() {
        console.log(this.varGlob)
    }
 
}

05/11/2018, 23h37
psychadelic

ton code n'a aucun sens

_ tes fonctions "un" et "deux" s’appellent mutuellement ce qui donne une boucle sans fin
_ tu a deux éléments s’appelant "a" le premier est une fonction et le second est une variable présente à l'intérieur de cette fonction
_ cette variable "a" crée dans la fonction "a" (qui porte le même non) fonctionne comme un les variables de closure, et ta fonction "a) est elle-même une variable-fonction inclue dans un closure.
=> aucun des deux éléments "a" ne peuvent être accessible au-dehors,
à cela s'ajoute le fait que tu utilise la notation fléché dont l'un des effet est justement d'anonymiser les fonctions quand on les appelles, car l'interpréteur JS les utilise comme un nouvel objet qu'il est le seul à pouvoir adresser.

bonjour,
Excusez moi je me suis trompé au niveau des noms de variables.
Je voulais faire un petit exemple ou je voulais affecter une valeur à une variable dans ces fonctions là et pouvoir récupérer cette valeur plus tard.

Je vous met mon code ca va être sans doute plus simple ^^

ts

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
37
38
39
40
41
42
43
44
45
46
 
export class FormulaireComponent implements OnInit 
{
  selectedFile = null;
 
  public divH: number; 
  public divW: number;
 
  context: CanvasRenderingContext2D;
  @ViewChild("mycanvas") mycanvas;
 
 // Après le choix de l'image
  onFileSelected(event){
 
    let canvas = this.mycanvas.nativeElement;
    let context = canvas.getContext('2d');
    context.clearRect(0, 0, 300, 300);
 
    let self = this;
    // Rendu de l'image sur le canvas
    var render = new FileReader();
    render.onload = function(event: any) {
      var img = new Image()
      img.onload = function() {
        // modif de l'attribut HTML
        canvas.width = img.width;
        canvas.height = img.height;
        // modif. CSS de l'élément <canvas>
        self.divW = img.width;
        self.divH = img.height;
        context.drawImage(img,0,0);
 
      };
      img.src = event.target.result;
    };
    render.readAsDataURL(event.target.files[0])
 
    this.unTest()
 
  }
 
  // Dessine une ligne
  unTest(){
        console.log(this.divW)
  }
}

html

Code:

1
2
3
4
<form>
  <input type="file" (change)="onFileSelected($event)" accept="image/*"> <br><br>
  <canvas #mycanvas width="400" height="250" style="border: 1px solid red;"></canvas>
</form>

06/11/2018, 14h21
psychadelic
Est-ce que tu a vérifié que l'image est bien chargée au moment ou le test s'exécute ?

et :
Code:

1 2 public divH: number =0; public divW: number=0;
histoire de t’assurer que le transpiller fait bien le job et n'anonyse pas ces 2 variables
avec en plus un
Code:

1 2 self.divW = img.width; console.log ( self.divW,img.width);
si tu n'a pas déjà fait les vérifs

sinon, j'utiliserai pluôt: img.naturalHeightet img.naturalWidth

Bonjour,

Pour tester si l'mage est bien chargé j'ai mis if(!img.complete) ... est ca me renvoie que l'image n'est pas chargé.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 
export class FormulaireComponent implements OnInit 
{
 
  public divH: number = 0; 
  public divW: number = 0;
 
  selectedFile = null;
  context: CanvasRenderingContext2D;
  @ViewChild("mycanvas") mycanvas;
 
  constructor() { }
  ngOnInit() {}
 
  // Après le choix de l'image
  onFileSelected(event){
 
    let canvas = this.mycanvas.nativeElement;
    let context = canvas.getContext('2d');
    context.clearRect(0, 0, 300, 300);
 
    let self = this;
    // Rendu de l'image sur le canvas
    var render = new FileReader();
    render.onload = function(event: any) {
      var img = new Image()
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        self.divW = img.width;
        self.divH = img.height;
        context.drawImage(img,0,0);
        console.log ("img.onload: " + self.divW + " - naturalW " + img.naturalWidth + " - width " + img.width);
 
      };
 
      img.src = event.target.result;
     //teste si l'image est bien chargé
      if(!img.complete) { console.log("chargé")} else { console.log("pas encore")}
    };
    render.readAsDataURL(event.target.files[0])
 
    this.unTest()
 
  }
 
 
    unTest(){      
      console.log("unTest: " + this.divW)
    }
 
}

Résultat dans la console

Code:

1
2
3
unTest: 0
pas encore 
img.onload: 381 - naturalW 381 - width 381

06/11/2018, 22h24
psychadelic

-- et comment est-ce que tu lie onFileSelected(event){ ?
-- est-ce qu'au moins tu le bind ?
parce sinon, le this est reliée à l'élément sur leque l'event c'est produit (le bouton) et non à l'instance de l'objet

Vous voulez le code html pour savoir comment s'active onFileSelected(event) ?
Code:

1 2 3 4 5 <form> <input type="file" (change)="onFileSelected($event)" accept="image/*"> <br><br> <canvas #mycanvas width="400" height="250" style="border: 1px solid red;"></canvas> </form>
comment je fais pour bind dans le html ?

07/11/2018, 05h32
psychadelic
ben oui, il est impossible de lier une instance d'objet dans la partie html.

ça ne peut se faire qu'en javascript et uniquement dans la classe de l'objet en question
et c'est mieux de passer la valeur de l'id dans le constructeur,
mais bon, j'imagine qu'il n'y a qu'un seul et unique machin = new FormulaireComponent( 'trucLoaderImage' ); dans ton code... ?

les balises <form> </form> sont inutiles....

Code:

<input type="file" id="trucLoaderImage" accept="image/*" />
Code:

1 2 3 4 constructor(ID_Loader) { document.getElementById(ID_Loader).addEventListener('change', this.onFileSelected(ev).bind(this) ); }
ou justement l'avantage des fonctions fléchées, car elles sont en " Bind " obligatoire:
Code:

1 2 3 4 constructor(ID_Loader) { document.getElementById(ID_Loader).addEventListener('change', ev=>this.onFileSelected(ev)); }
mais si tu veux pouvoir faire un removeEventListener il faut affecter la méthode "bindée" sur une fonction

Bonjour,
le résultat que tu obtiens dans la console te montre pourtant le chemin.

• Il faut utiliser les données lorsqu'elles sont disponibles •

La fonction mise sur le onload de ton image est asynchrone donc exécutée, potentiellement, après ton appel à this.unTest().
Si tu veux connaître la taille de l'image il te faut par conséquent qu'elle soit chargée. Ton appel à this.unTest() doit donc ce faire dans la fonction dédiée au onload.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 render.onload = function(event: any) { var img = new Image() img.onload = function() { // modif de l'attribut HTML canvas.width = img.width; canvas.height = img.height; // modif. CSS de l'élément <canvas> self.divW = img.width; self.divH = img.height; context.drawImage(img, 0, 0); // affichage des dimensions disponibles ICI self.unTest(); }; img.src = event.target.result; };

07/11/2018, 11h59
pitchu
Bonjour,

J'utilise angular 7, je n'appelle pas par moi même FormulaireComponent() dans mon code.
J'ai donc enlever la variable ID_Loader en tant que paramêtre de constructor()
Code:

1 2 3 4 constructor() { document.getElementById("trucLoaderImage").addEventListener('change', ev=>this.selection(ev)); }
J'obtiens cette erreur:

Citation:

ERROR TypeError: "document.getElementById(...) is null"
07/11/2018, 16h19
psychadelic

C'est simple, tu ne peux pas lier l'instance de ton objet ailleurs que dans la classe elle-même.
soit tu la met dans son constructeur, soit dans une méthode dédiée dans cet objet.

Sinon, comment instancie-tu ton objet ? (c'est une question, pas une figure de rhétorique)

il y a tout une panoplie de fonction dans JS pour créer ce pointeur getElementBy ID, by tag, by machin et truc

Si ton interface est généré à la volée par angular, l'intance de ton objet peut arriver avant que l'interface soit créé, bref faut attendre que les 2 soient présent en même temps et tu dois gérer cette synchronisation

Il y a forcément un moyen pour mettre un "pointeur" vers ce fichu bouton et lui "binder" ton instance sur le "change d'un eventListener.

PS: et t'aurais du poster directement ta question dans la partie Angular du Forum, déjà qu'a la base il était dans la partie "Général JavaScript" puis déplacé dans la partie TypeScript... :roll:
07/11/2018, 18h27
NoSmoking

C'est pas bientôt fini ces divagations, c'est du grand n’importe quoi.

Tu utilises Angular alors laisse le « lier » tes éléments à tes événements ou alors reviens à du JavaScript « vanilla ».

Ton problème est expliqué au post #9.

@NoSmoking,
non, ton post #9 est complètement à coté de son problème

en l'état actuel de son code (sans faire de Bind) on à (et en reprenant ton code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
render.onload = function(event: any) {
    var img = new Image()
    img.onload = function() {
        // modif de l'attribut HTML
        canvas.width = img.width;
        canvas.height = img.height;
        // modif. CSS de l'élément <canvas>
 
 console.log("type ="      , self.type );              //  -->   type = file
 console.log("tagName ="   , self.tagName );     //  -->   tagName = INPUT
 console.log("outerHTML =" , self.outerHTML );   //  -->   <input type="file" ...
 
        self.divW = img.width;
        self.divH = img.height;
        context.drawImage(img, 0, 0);
        // affichage des dimensions disponibles ICI
        self.unTest();
    };
    img.src = event.target.result;
};

07/11/2018, 19h50
NoSmoking

Si tu le dis, seulement il faut prendre le code dans sa totalité et regarder ce qui se passe dans le template et notamment cette ligne

Code:

<input type="file" (change)="onFileSelected($event)" accept="image/*">

Si les déclarations sont correctes cela devrait fonctionner parfaitement.
07/11/2018, 20h00
psychadelic

c'est pas une question de voir ou non l'intégralité de son code,
je l'ai indiqué précédemment...

Citation:

Envoyé par psychadelic

le this est relié à l'élément sur lequel l'event c'est produit (le bouton) et non à l'instance de l'objet

et ça sera toujours comme ça quelle que soit le contexte d'utilisation,
tant qu'il n'y aura pas de "bind' fait à l'intérieur de l'objet (car lui seul permet d'avoir l'adresse de son propre "this")
08/11/2018, 10h22
NoSmoking

Si l'on reprend au post #3 le log qu'à obtenu pitchu est le suivant

Citation:

Envoyé par pitchu

Pour tester si l'mage est bien chargé j'ai mis if(!img.complete) ... est ca me renvoie que l'image n'est pas chargé.

Citation:

unTest: 0
pas encore
img.onload: 381 - naturalW 381 - width 381

• pitchu a simplement mal interprété le log.

• Ce que montre le console.log() à l'intérieur de l'événement onload de l'image c'est bien produit, ce qui signifie que l'action sur l'<input type="file"> à bien était réalisée, ce qui signifie qu'il y a donc bien eut « bindage » entre l'élément et l'action onFileSelected(event).

Citation:

Envoyé par psychadelic

c'est pas une question de voir ou non l'intégralité de son code,

Ben si un peu quand même, car je le répète nous sommes dans un « contexte Angular » et à ce titre tu devrais regarder du côté de la documentation : Binding to user input events.

Fait tourner l'exemple sous Angular et tu te rendras compte que cela fonctionne sous réserve d'apporter les modifications que j'ai signalées.

Peut être pitchu pourra nous donner son avis.
08/11/2018, 18h47
psychadelic

effectivement d'apres cette Doc ça devrait être "bon".

mais comme je suis comme st tomas, j'aimerai bien qu'il fasse mon test indiqué dans mon post #13, histoire d'être fixé..
mais j'ai l'impression qu'il nous à tout 2 laissé tomber apres nous avoir baladé (3e partie de forum) avec sa première question imaginaire (et fausse) puis les suivantes ou l'on découvre qu'il s'agit d'un code Angular... :(