Bonjour à tous!

Je viens à vous car je bute sur un problème depuis hier...

j'ai une carte qui représente des aléas d’inondation(600x600px), composée de 6 couleurs. Moi, c'est principalement le pixel du milieu (donc 300,300) qui m’intéresse. J'aimerais donc récupérer la couleur de ce pixel pour définir l'aléa auquel il correspond. voici mon code :

var img = new Image();
	img.src = "http://geoservices.brgm.fr/risques?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&LAYERS=REM_NAPPE_SEDIM&STYLES=&CRS=EPSG:4326&BBOX=44.3,1.3,44.5,1.5&WIDTH=600&HEIGHT=600&FORMAT=image/png";
	var canvas = $('.canva').get(0);
	var ctx = canvas.getContext('2d');
	
	img.onload = function() {
		ctx.drawImage(img, 0, 0);

		var pixel = ctx.getImageData(300, 300, 1, 1); //a partir d'ici ca ne fonctionne plus...
		alert(pixel);
		var data = pixel.data;
		var rgba = 'rgba(' + data[0] + ', ' + data[1] +
		             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
		alert(rgba);
	};

C'est donc au niveau de la fonction getImageData que ça bloque

voilà, j'espère que c'est assez clair ^^' en tout cas merci d'avance à vous!

Bonjour,

je me permets de relancer ma question, je ne suis toujours pas parvenu à régler ce problème...

Merci à vous!

Bonjour,

Il s'agit ici d'un problème de Cross-origin les navigateurs interdisent par défaut de lire le contenu d'une image qui ne vient pas de ton domaine.

Il faut donc activer le cross-origin si le serveur distant le permet ou stocker les images sur ton serveur afin de les utiliser dans ta page.