Discussion :

[pitchu]

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 :

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
 
export class classDeTest {
 
    varGlob: number;
 
    un() {
        var a = function() {
          var b = function() {
             // affecter une valeur à varGlob 
          }
        }
        this.deux();
    }
 
    deux() {
        console.log(this.varGlob)
    }
 
}

[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.

[pitchu]

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 :

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
 
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 HTML :

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

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>

[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 TypeScript :

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

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 TypeScript :

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

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

[pitchu]

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 :

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

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

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

[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

[NoSmoking]

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

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é.

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).

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.