1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2017
    Messages : 24
    Points : 15
    Points
    15

    Par défaut 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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 019
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 019
    Points : 32 177
    Points
    32 177

    Par défaut

    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

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 761
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 761
    Points : 21 160
    Points
    21 160
    Billets dans le blog
    39

    Par défaut

    Citation Envoyé par NoSmoking Voir le message
    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 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>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2017
    Messages : 24
    Points : 15
    Points
    15

    Par défaut

    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() ?

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 019
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 019
    Points : 32 177
    Points
    32 177

    Par défaut

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

  6. #6
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2017
    Messages : 24
    Points : 15
    Points
    15

    Par défaut

    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

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 019
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 019
    Points : 32 177
    Points
    32 177

    Par défaut

    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é

  8. #8
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2017
    Messages : 24
    Points : 15
    Points
    15

    Par défaut

    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

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 019
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 019
    Points : 32 177
    Points
    32 177

    Par défaut

    Tu peux effectivement te créer un fichier de lecture coté serveur pour sauvegarder ton fichier image sur le serveur, par exemple
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    <!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>

  10. #10
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2017
    Messages : 24
    Points : 15
    Points
    15

    Par défaut

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Faire un lien image sur mon site pour androïd
    Par Narbeper dans le forum Développement Web avec .NET
    Réponses: 4
    Dernier message: 28/02/2017, 11h55
  2. Récupérer image d'un site
    Par thibotus01 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 21/09/2013, 17h00
  3. Récupérer les images d'un site web
    Par [Silk] dans le forum Web & réseau
    Réponses: 2
    Dernier message: 15/03/2006, 13h00
  4. [techno] Précharger les images d'un site pour ou contre?
    Par Death83 dans le forum Webdesign & Ergonomie
    Réponses: 19
    Dernier message: 26/10/2005, 11h21
  5. [Performance] - Blob ou pas pour les images d'un site ?
    Par ShinJava dans le forum SQL Procédural
    Réponses: 2
    Dernier message: 04/07/2005, 18h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo