erreur en traitement d'image:"The canvas has been tainted by cross-origin data."

**rafoim** · 30/06/2020, 19h17

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 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
<!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

**Loralina** · 01/07/2020, 16h32

Bonjour,
Si au final les fichiers sont sur un serveur local ou distant, il ne devrait pas y avoir d'erreur de sécurité.

Par contre, s'il faut passer par le protocole "file" et que le réglage du navigateur ne peut être modifié et entraîne l'erreur, je pense qu'il faut passer par un encodage.
Il est probable qu'on ne puisse pas automatiser cet encodage de façon transparente pour l'utilisateur, on aurait la même erreur de sécurité à mon avis (à confirmer).
Il resterait alors ces solutions :
- Soit ajouter un <input type="file"> pour sélectionner l'image et utiliser FileReader (voir ici : FileReader.readAsDataURL).
- Soit remplacer manuellement l'adresse de l'image par la chaîne encodée (pour ça, on peut se faire un utilitaire séparé utilisant ce que j'indique au-dessus).

**rafoim** · 01/07/2020, 17h55

Sujet résolu. Merci beaucoup.

erreur en traitement d'image:"The canvas has been tainted by cross-origin data." [API HTML5]

JavaScript

Discussions similaires

Partager

Partager