[Projet map galaxie interactive] Soucis retour image canvas vide & façon de faire !

**eponalink** · 15/01/2022, 16h16

Bonjour la communauté,

Je cherche à réaliser une carte interactive qui permette au joueur de cliquer sur un case et d'avoir un id associé.

Je génère des maps en fonction d'un fichier json (à terme à partir de donnée SQL)

Je peux pour le moment générer différentes maps

Pour l'interaction j'utilise <map><area> de la libraire http://www.outsharked.com/imagemapster/

Pour ce faire il faut une image

J'aimerai donc générer une image à partir du canvas

Code :

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

1
2
3
4
5
6
 
<script>
        var canvas = document.getElementById("canvas5");
        var img    = canvas.toDataURL("image/png");
        document.write('<img id="carte_image" usemap="#carte_map" src="'+img+'"/>');
    </script>

Mais cela me retourne une image vide ! (il y a bien un lien ok dans la balise img et si je met une conversion de l'image en base64 ca fonctionne)

Merci pour les lumières !

L'idée étant :
- A partir d'une image et d'un <map><area> (pas trouvé mieux :/)
- Le joueur clic sur une case et choisi une action (dévoiler par exemple)
- Le fichier Json est mis à jour
- La page se refresh et le canva et donc l'img pour ImageMapster aussi

Cela est il pour vous la bonne manière de faire ?

Bien à vous

La page en question

Les canvas sont générés par un script js

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
 
var map1 = new Map("map1");
 
window.onload = function() {
 
	var canvas1 = document.getElementById('canvas1');
	var ctx1 = canvas1.getContext('2d');
 
	canvas1.width  = 50 * 4;
	canvas1.height = 50 * 4;
 
	map1.dessinerMap(ctx1);
 
	var map2 = new Map("map2");
 
	var canvas2 = document.getElementById('canvas2');
	var ctx2 = canvas2.getContext('2d');
 
	canvas2.width  = 50 * 13;
	canvas2.height = 50 * 13;
 
	map2.dessinerMap(ctx2);
 
	var map3 = new Map("map3");
 
	var canvas3 = document.getElementById('canvas3');
	var ctx3 = canvas3.getContext('2d');
 
	canvas3.width  = 50 * 13;
	canvas3.height = 50 * 13;
 
	map3.dessinerMap(ctx3);
 
	var map4 = new Map("map4");
 
	var canvas4 = document.getElementById('canvas4');
	var ctx4 = canvas4.getContext('2d');
 
	canvas4.width  = 50 * 13;
	canvas4.height = 50 * 13;
 
	map4.dessinerMap(ctx4);
 
	var map5 = new Map("map5");
 
	var canvas5 = document.getElementById('canvas5');
	var ctx5 = canvas5.getContext('2d');
 
	canvas5.width  = 50 * 3;
	canvas5.height = 50 * 3;
 
	map4.dessinerMap(ctx5);
 
}

A partir de la Classe Map

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
 
function Map(nom) {
 
    // Création de l'objet XmlHttpRequest
    var xhr = getXMLHttpRequest();
    // Chargement de la carte en Json
    xhr.open("GET", './maps/' + nom + '.json', false);
    xhr.send(null);
    if(xhr.readyState != 4 || (xhr.status != 200 && xhr.status != 0)) // Code == 0 en local
    	throw new Error("Impossible de charger la carte nommée \"" + '././maps/' + nom + '.json' + "\" (code HTTP : " + xhr.status + ").");
    var mapJsonData = xhr.responseText;
 
    // Analyse des données
    var mapData = JSON.parse(mapJsonData);
    var nuage = new Image();
    nuage.src = "http://paxtraios.com/paxtraios/images/nuage.png";
    var pmere = new Image();
    pmere.src = "http://paxtraios.com/paxtraios/images/pmere.png";
    var pfille = new Image();
    pfille.src = "http://paxtraios.com/paxtraios/images/pfille.png";
    var pcentrale = new Image();
    pcentrale.src = "http://paxtraios.com/paxtraios/images/pcentrale.png";
    var hide = new Image();
    hide.src = "http://paxtraios.com/paxtraios/images/hide.png";
 
    Map.prototype.dessinerMap = function(context) {
 
    	for(var i = 0, l = mapData['terrain'].length ; i < l ; i++) {
    		for(var j = 0, k = mapData['terrain'][i].length ; j < k ; j++) {
 
    			if (mapData['terrain'][i][j]=='1') {
                    nuage.addEventListener('load',context.drawImage(nuage, i*50, j*50, 50 , 50));
    			} else if (mapData['terrain'][i][j]=='2') {
    			    nuage.addEventListener('load',context.drawImage(pmere, i*50, j*50, 50 , 50));
    			} else if (mapData['terrain'][i][j]=='3') {
    			    nuage.addEventListener('load',context.drawImage(pcentrale, i*50, j*50, 50 , 50));
    			} else if (mapData['terrain'][i][j]=='4') {
    			    nuage.addEventListener('load',context.drawImage(pfille, i*50, j*50, 50 , 50));
    			} else if (mapData['terrain'][i][j]=='0') {
    			    nuage.addEventListener('load',context.drawImage(hide, i*50, j*50, 50 , 50));
    			}
    		}
    	}
 
    }
 
}

La page php

Code html :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
 
<!DOCTYPE html>
<html>
  <head>
 
    <meta charset="utf-8">
    <title>Ma page de test</title>
    <link rel="icon" href="http://paxtraios.com/wp-content/uploads/2022/01/cropped-LOGO-non-deplie-32x32.png" sizes="32x32">
 
    <script src="js/classes/Map.js"></script>
    <script src="js/xmlh.js"></script>
    <script src="js/loadmap.js"></script>
 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="dist/jquery.3.5.1.min.js"></script>
    <script type="text/javascript" src="dist/jquery.imagemapster.js" ></script>
    <script type="text/javascript" src="js/imagemapstercarte.js"> </script>
 
    <link rel="stylesheet" type="text/css" href="stylesheets/base.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/carte.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
 
  </head>
 
 
  <body>
 
    <h1> Carte de la Galaxie selon json map1</h1>  
    <canvas id="canvas1">Canvas !</canvas>
 
    <h1> Carte de la Galaxie selon json map2</h1>  
    <canvas id="canvas2">Canvas !</canvas>
 
    <h1> Carte de la Galaxie selon json aléatoire map3</h1>  
    <canvas id="canvas3">Canvas !</canvas>
 
    <?php 
        $array = Array (
            "terrain" => Array (
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)],
               [random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4), random_int(1,4)]
            )
        );
        
        // encode array to json
        $json = json_encode($array);
        $bytes = file_put_contents("maps/map3.json", $json); 
 
    ?>
 
 
    <h1> Carte de la Galaxie selon json joueur</h1>  
    <canvas id="canvas4">Canvas !</canvas>
 
    <?php   
        $array = Array (
            "terrain" => Array (
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 4, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 4, 2, 4, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 1, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            )
        );
        
        // encode array to json
        $json = json_encode($array);
        $bytes = file_put_contents("maps/map4.json", $json); 
    ?>
 
    <h1> Carte de la Galaxie selon json joueur 3*3</h1> 
 
    <canvas id="canvas5">Canvas !</canvas>
    <?php   
        $array = Array (
            "terrain" => Array (
                [0, 0, 0],
                [0, 2, 0],
                [0, 0, 0]
            )
        );
        
        // encode array to json
        $json = json_encode($array);
        $bytes = file_put_contents("maps/map5.json", $json); 
    ?>
    <br>
 
    <h1>Carte de la Galaxie avec ImageMapster</h1>  
    <h2>Choix : <span id="selectedKeys"></span></h2>
 
    <script>
        var canvas = document.getElementById("canvas5");
        var img    = canvas.toDataURL("image/png");
        document.write('<img id="carte_image" usemap="#carte_map" src="'+img+'"/>');
    </script>
 
    <map id="carte_map" name="carte_map">
      <area
        shape="rect"
        name="Case 1"
        data-tooltip="Case 1 : (0,0);(50,50)"
        coords="0,0,49,49"
        href="#"
      />
      <area
        shape="rect"
        name="Case 2"
        data-tooltip="Case 2 : (50,0);(100,50)"
        coords="49,0,99,49"
        href="#"
      />
      <area
        shape="rect"
        name="Case 3"
        data-tooltip="Case 3 : (100,0);(150,50)"
        coords="99,0,149,49"
        href="#"
      />
      <area
        shape="rect"
        name="Case 4"
        data-tooltip="Case 4 : (0,50);(50,100)"
        coords="0,49,49,99"
        href="#"
      />
      <area
        shape="rect"
        name="Case 5"
        data-tooltip="Case 5 : (50,50);(100,100)"
        coords="49,49,99,99"
        href="#"
      />
      <area
        shape="rect"
        name="Case 6"
        data-tooltip="Case 6 : (100,50);(150,100)"
        coords="99,49,149,99"
        href="#"
      />
      <area
        shape="rect"
        name="Case 7"
        data-tooltip="Case 7 : (0,100);(50,150)"
        coords="0,99,49,149"
        href="#"
      />
      <area
        shape="rect"
        name="Case 8"
        data-tooltip="Case 8 : (50,100);(100,150)"
        coords="49,99,99,149"
        href="#"
      />
      <area
        shape="rect"
        name="Case 9"
        data-tooltip="Case 9 : (100,100);(150,150)"
        coords="99,99,149,149"
        href="#"
      />
 
    </map>
 
  </body>
</html>

**NoSmoking** · 16/01/2022, 11h01

Bonjour,

Mais cela me retourne une image vide ! (il y a bien un lien ok dans la balise img et si je met une conversion de l'image en base64 ca fonctionne)

à quel moment lis-tu le contenu de ton <canvas> ?
De ce que je vois sur ta page les différents <canvas> semblent renseignés !

Mais j'avoue j'ai un peu de mal à voir le concept

**eponalink** · 16/01/2022, 14h40

Bonjour merci de la réponse

à ce moment de la page le canvas est crée, un json est généré

Code html :

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
<canvas id="canvas5">Canvas !</canvas>
    <?php   
        $array = Array (
            "terrain" => Array (
                [0, 0, 0],
                [0, 2, 0],
                [0, 0, 0]
            )
        );
        
        // encode array to json
        $json = json_encode($array);
        $bytes = file_put_contents("maps/map5.json", $json); 
    ?>
    <br>
 
    <h1>Carte de la Galaxie avec ImageMapster</h1>  
    <h2>Choix : <span id="selectedKeys"></span></h2>
 
    <script>
        var canvas = document.getElementById("canvas5");
        var img    = canvas.toDataURL("image/png");
        document.write('<img id="carte_image" usemap="#carte_map" src="'+img+'"/>');
    </script>

Le script plus haut génère le canva à partir du json

Code html :

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

1
2
3
4
5
6
7
8
<h1>Carte de la Galaxie avec ImageMapster</h1>  
    <h2>Choix : <span id="selectedKeys"></span></h2>
 
    <script>
        var canvas = document.getElementById("canvas5");
        var img    = canvas.toDataURL("image/png");
        document.write('<img id="carte_image" usemap="#carte_map" src="'+img+'"/>');
    </script>

Et la partie du code du début récupère le canva pour en faire un image

Code html :

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

1
2
3
4
5
6
7
8
<h1>Carte de la Galaxie avec ImageMapster</h1>  
    <h2>Choix : <span id="selectedKeys"></span></h2>
 
    <script>
        var canvas = document.getElementById("canvas5");
        var img    = canvas.toDataURL("image/png");
        document.write('<img id="carte_image" usemap="#carte_map" src="'+img+'"/>');
    </script>

En écrivant je me rend compte que le script js se fait après chargement de la page c'est pour ça que dans le code initial je récupère un image vide...
Comment palier à cela ?

En fait j'aimerais juste avoir un canva généré dynamiquement et pouvoir récupérer des informations en cliquant dessus passer par les simples fonctions du canva est il la meilleure façon de faire dans ce cas ?

Merci !

EDIT

J'ai mit dans ma page principale :

Code html :

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

    <img id="carte_image" usemap="#carte_map" src=""/>

Et dans mon script

Code :

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

1
2
 var img    = canvas5.toDataURL("image/png");
    document.getElementById("carte_image").src=img;

A priori mon canva et mon image sont générée vide dans ma page principale,
Mon script génère les canvas
et normalement devrais changer la source de mon image mais :

loadmap.js:54 Uncaught TypeError: Cannot set properties of null (setting 'src')
at window.onload (loadmap.js:54:47)

Là ça m'échappe ^^

EDIT2 :

src="" ne doit pas être laissé vide !

Du coup quid de la méthode ?

**NoSmoking** · 17/01/2022, 11h19

Pour le principe, je dirais :

création de tes fichiers JSON
création de tous tes éléments HTML
au chargement de la page window.onload tous les éléments sont dans le DOM
- lecture de tes fichiers JSON
- dessin de tes canvas avec les données recueillies
- .. à partir de là tu pourras travailler sereinement

En fait j'aimerais juste avoir un canva généré dynamiquement et pouvoir récupérer des informations en cliquant dessus passer par les simple fonction du canva est il la meilleure façon de faire dans ce cas ?

cela dépend qu'elle est la finalité, le traitement, type grille, peut également très bien se gérer avec des éléments HTML standard.

**eponalink** · 17/01/2022, 11h52

Merci beaucoup pour ton retour j'y vois beaucoup plus clair !

[Projet map galaxie interactive] Soucis retour image canvas vide & façon de faire !

JavaScript

Discussions similaires

Partager

Partager