getImageData() et createObjectURL()

**doudoulolita** · 22/05/2020, 02h39

Bonjour,
j'ai repris un ancien code en local (sans serveur) qui permettait de donner la couleur d'une zone d'une image provenant de l'ordinateur en transférant cette zone sur un canvas et en utilisant getImageData() pour récupérer les valeurs RGB de la zone de l'image. Les images que j'uploadais grâce à un input file étaient placées dans un des dossiers du site.

Maintenant, cela ne fonctionne plus car la console m'indique : SecurityError: The operation is insecure. J'ai essayé de corriger avec image.crossOrigin = "anonymous" mais ça n'a pas fonctionné.

J'ai donc mis mon code sur mon serveur local, mais j'ai souvent une autre erreur : IndexSizeError: Index or size is negative or greater than the allowed amount pour la ligne correspondant à getImageData() .

Pour récupérer des images depuis n'importe quel dossier, J'ai trouvé la méthode createObjectURL() qui m'a permis d'afficher mon image dans un div d'une part, et la zone choisie sur le canvas. Première étape OK donc. Par contre, quand je veux récupérer les data de couleurs avec ctx.getImageData, ça m'affiche des valeurs nulles.

Voici la partie du code pour l'affichage de la zone de l'image sur le canvas et la récupération des valeurs des pixels :

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
 
        var drawing = document.getElementById("drawing");
	var ctx_drawing = drawing.getContext("2d"); // prépare le canvas
 
	var img3 = new Image();
 
	img3.onload=function(){
		ctx_drawing.drawImage(img3, zonex1, zoney1, 20, 20, zonex2, zoney2, w, h); // découpe une petite zone au centre de l'image
	}
 
	img3.src = URL.createObjectURL(this.files[0]); // transforme l'url en : blob:http://localhost/c25000fa-ae97-4bc2-b340-6914b59ec451
 
	var w = 272, h=272; // taille de l'image
 
       // coordonnées de la zone de l'image qui sera mise sur le canvas
	var zonex1 = (w/2)-10;
	var zoney1 = (h/2)-10;
	var zonex2 = (w/4);
	var zoney2 = (h/4);
 
	var imgdata = ctx_drawing.getImageData(0,0,w,h); // récupère les données de la zone
 
	console.log(imgdata.data); 
 
	var rgba = imgdata.data; // récupère les valeurs RVBA de la zone par couleur
 
	for (var px=0,ct=w*h*4;px<ct;px+=4){
	  var r = rgba[px  ];
	  var g = rgba[px+1];
	  var b = rgba[px+2];
	  var a = rgba[px+3];}