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

Version imprimable

15/04/2017, 00h34
azrop

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

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
15/04/2017, 10h00
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.
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 ;)

Citation:

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 !

Citation:

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:

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>

15/04/2017, 11h59
azrop

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() ?
15/04/2017, 14h05
NoSmoking

Comme précisé ci dessus

Citation:

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

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:

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

15/04/2017, 15h51
NoSmoking
Non un clone ne te seras d'aucune aide, il te faut coté serveur récupérer l'image « distante » la sauvegarder sur ton serveur et utiliser celle-ci.
Tu peux également passer par Ajax pour faire cette requête et récupérer les « data » de l'image.

Il existe bien l'attribut crossOrigin = "Anonymous", mais pas franchement compatible.

J'ai retrouvé
- CORS enabled image sur MDN
- CORS settings attributes
15/04/2017, 17h45
azrop

Ok, j'ai regardé ton premier lien, mais une erreur apparait, sur le Access-Control-Allow-Origin "*" qui apparait dans ton lien, qui est si j'ai bien lu le fait que le serveur qui dispose de l'image autorise ou non a ce qu'un serveur extérieur fasse un appel sur lui afin de faire une requete pour éviter des mauvaises surprises

Donc vu que le serveur où est l'image n'autorise pas ma requête je suis bloqué non ? malgré que je souhaite juste faire une copie

Ce qui est bien résumé par la 1ere ligne "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header"

J'ai trouver un truc en php mais je ne sais pas si je vais pouvoir m'en servir, je ne sais pas entre php et js lequel sera le plus facile à utiliser

Tu peux effectivement te créer un fichier de lecture coté serveur pour sauvegarder ton fichier image sur le serveur, par exemple

Code:

1
2
3
4
5
6
7
<?php
  $url=$_GET['url'];
  $fileSrce = file_get_contents($url);
  $fileDest = 'image.png';
  file_put_contents($fileDest,$fileSrce);
  echo $fileDest;
?>

ou pour convertir le fichier en data:data:image/png;base64

Code:

1
2
3
4
5
6
7
8
<?php
  $url=$_GET['url'];
  // sans passer par un fichier temporaire
  $handle = fopen( $url, "rb");
  $contents = stream_get_contents($handle);
  echo 'data:data:image/png;base64,' . base64_encode( $contents );
  fclose($handle);
?>

ensuite à toi de voir si tu fais un appel Ajax ou un include.
Exemple avec Ajax

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image distante</title>
<meta name="Author" content="NoSmoking">
<style>
</style>
<script>
function drawImage( obj){
  var oCanvas = document.querySelector('canvas');
  var oCtx = oCanvas.getContext('2d');
  var larg = obj.width;
  var haut = obj.height;
  oCanvas.height = haut;
  oCanvas.width = larg;
  oCtx.drawImage( obj, 0, 0);
  
  // get les data
  var imgData = oCtx.getImageData( 0, 0, larg, haut);
  console.log( imgData);
  
  document.querySelector('#result').appendChild(obj);
}
 
function getDataImage(url) {
  var oXhr = new XMLHttpRequest();
  oXhr.open('GET', 'get_distante_image.php?url=' + encodeURIComponent(url), true);
  oXhr.send();
  oXhr.onreadystatechange = function () {
    if (oXhr.readyState === 4 && oXhr.status === 200) {
      console.log( oXhr.responseText);
      var img = new Image;
      img.onload = function () {
        drawImage( this); 
      }
      img.src = oXhr.responseText;
    }
  }
}
</script>
</head>
<body>
<button onclick="getDataImage('http://tx3.travian.fr/hero_body.php?uid=2743')">Get Image Distante</button>
<h1>Dans balise &lt;img&gt;</h1>
<div id="result">
</div>
<h1>Dans balise &lt;canvas&gt;</h1>
<canvas></canvas>
</body>
</html>

21/04/2017, 18h32
azrop

Merci bien pour toutes ces infos je m'en vais tester de ce pas ;)