Récupérer image d'un site pour exploitation

**azrop** · 15/04/2017, 01h34

Bonjour,

J'ai voulu mettre en place une système pour lire une image sur un site pour pouvoir en extraire les couleurs des pixels (- LIEN -), j'avais commencé en Java (et même fini^^) mais j'ai voulu me tourner vers une solution en ligne, afin d'intégrer tout ça dans un site web

Je souhaiterai donc récupérer l'image dans une variable surement, afin de l'utiliser ensuite, j'ai vu plein de méthodes avec get_html_content, du simple_dom_parser mais rien ne marche, car la page est assez bizarrement faite, l'image en tant que telle n'a pas de lien, donc passé le PHP, je me disais que peut-être en JS (que je connais moins il y aurait un moyen) ?

En JavaFX c'était tellement simple : Image toto = new Image("http://tx3.travian.fr/hero_body.php?uid=2743"); ^^ mais en JS je ne vois pas du tout malgré mes recherches et c'est un peu du au format que je trouve bizarre de la page, et surtout peut-on en JS s'occuper d'une autre page, car quand je l'utilise c'est pour agir sur mon propre site ^^

Merci d'avance

**NoSmoking** · 15/04/2017, 11h00

Bonjour,
tu pourras sans aucun problème afficher cette image dans ta page, sous réserve que'lle ne change pas de nom, mais tu ne pourras pas la manipuler, via un <canvas> par exemple car hors domaine.
Une solution considérait à te créer une copie coté serveur et travailler à partir de celle-ci, ne pas oublier quand même les éventuels droits liés à cette image, c'est la moindre des choses

**danielhagnoul** · 15/04/2017, 11h16

Envoyé par NoSmoking

Bonjour,
tu pourras sans aucun problème afficher cette image dans ta page, sous réserve que'lle ne change pas de nom, mais tu ne pourras pas la manipuler, via un <canvas> par exemple car hors domaine.

Oui !

Envoyé par console

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

On apprend quelque chose de nouveau tous les jours sur DVP !

Exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
        
    document.addEventListener( 'DOMContentLoaded', ev => {
      
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      const
        canvasSoldat = document.querySelector( "#soldat"),
        ctxSoldat = canvasSoldat.getContext( "2d" ),
        imageSoldat = new Image();
      
      imageSoldat.src = "http://tx3.travian.fr/hero_body.php?uid=2743";
      
      imageSoldat.addEventListener( "load", ev => {
        canvasSoldat.width = imageSoldat.width;
        canvasSoldat.height = imageSoldat.height;
        ctxSoldat.drawImage( imageSoldat, 0, 0 );
      }, false );
      
      document.querySelector( "#pixel" ).addEventListener( "click", ev => {
        
        // test, position dans l'image 10, 50
        let pixelData = ctxSoldat.getImageData( 10, 50, 1, 1 );
        
        console.log( pixelData );
        
        // Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
      })
      
    }, false );
  </script>
</head>
<body>
  <main>
 
    <canvas id="soldat"></canvas>
 
    <button id="pixel">Pixel</button>
 
  </main>
</body>
</html>

**azrop** · 15/04/2017, 12h59

Merci pour ces premières informations, donc si je l'affiche juste je ne peux pas récupérer les pixels car elle n'est "pas à moi"

Mais en soi, je n'ai pas besoin de l'afficher, je veux juste récupérer les pixels, peut-on faire une copie de l'image pour qu'elle soit "à moi" puis utiliser getImageData() ?

**NoSmoking** · 15/04/2017, 15h05

Comme précisé ci dessus

Une solution considérait à te créer une copie coté serveur et travailler à partir de celle-ci

**azrop** · 15/04/2017, 16h35

Autant pour moi ... j'ai la phrase au début, mais après ça m'est sorti de la tête ^^

Enfin j'ai essayé quelques trucs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var clone = new Image();        //avec et sans cette ligne j'ai essayé
clone = imageSoldat.cloneNode(0);
var  pixpix = clone.getImageData(10,50,1,1);   //erreur ici "clone.getImageData n'est pas une fonction" me dit la console)
console.log(pixpix);

(j'ai mis des "var" je ne pense pas que ça joue, mais dans mon éditeur, surement à cause d'un param de version il souligne les 'let' mais rien de bloquant je pense)

Mais pas de retour, je ne sais pas s'il suffit de cloner, s'il faut faire "new Image();" avant ou non en fait pour qu'il sache que "clone" est une image

Récupérer image d'un site pour exploitation

JavaScript

Vue hybride

Discussions similaires

Partager

Partager