Discussion :

[eponalink]

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>