erreur en traitement d'image:"The canvas has been tainted by cross-origin data."
Bonjour,
Je vous explique le contexte : je dois enseigner entre autres le traitement d'image l'an prochain. Pour des contraintes que je ne développe pas ici, je dois le faire en javascript, qui n'a pas du tout l'air d'être prévu pour ça.
Je fais mes premiers pas et je rencontre ce qui semble être un souci de sécurité: impossible de lire les pixels d'un canevas HTML5 contenant une image que j'y ai placée. Plus précisément, j'obtiens l'erreur suivante:
"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at file:///D:/ressources%20pour%20IUT/M3201/TD%20traitement%20d'image%20ponctuel/test.html:23:30"
j'ai cherché très longuement sur le net mais la plupart des solutions demandent d'intervenir sur le serveur ou sur les paramètres du navigateur. Les solutions qui sont en pur js ne fonctionnent pas de mon côté. Or, je n'ai pas les droits administrateurs là où je vais enseigner. Donc je ne peux pas modifier serveur ou navigateur.
Le programme que je vais vous montrer est juste une série de tests sur les fonctions de traitement d'image, il ne fait rien de passionnant. J'ai retiré les tentatives de débogage pour ne pas embrouiller.
Voici mon code:
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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Traitement d'images</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<p>
<canvas id="monCanevas"></canvas>
<img src="image.jpeg" id="monImage" style="display:none">
</p>
<script>
var canvas = document.getElementById('monCanevas');
var image = document.getElementById('monImage');
canvas.height= image.height;
canvas.width = image.width;
var ctx = canvas.getContext('2d');
ctx.drawImage(image,0,0);
var extraction = ctx.getImageData(200,200,3,3);
console.log(extraction);
dt = extraction.data;
console.log(dt);
let newImage = ctx.createImageData(50,50);
ctx.putImageData(newImage,10,10);
</script>
</body> |
merci d'avance pour vos éventuels coups de main.
Raphaël
