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

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:

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:

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:

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:

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>

Bonjour,

Citation:

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

Bonjour merci de la réponse :)

à ce moment de la page le canvas est crée, un json est généré
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 <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:

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:

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:

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

Et dans mon script
Code:

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 :

Citation:

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 ?

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

Citation:

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.

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