Récupérer des images du serveur via le côté client

J'ai un dossier sur le serveur avec quelques images. Je voudrais que mon code client lise le contenu de ce dossier (images), puis affiche cette image sur un div. Je pensais que ce serait facile avec AJAX, mais il semble que AJAX renvoie des données brutes intégrées dans l'image. J'ai cherché un moyen d'obtenir l'URL de l'image à la place de ces données, mais tout ce que j'ai essayé ne fonctionne tout simplement pas. Je préfère vraiment faire cela du côté client. J'apprécie toutes les suggestions que vous pouvez me donner à ce sujet :).Récupérer des images du serveur via le côté client

Merci,

elshae

//Here is some of my code... 

var info = new OpenLayers.Control.WMSGetFeatureInfo({ 
         url: 'http://localhost:8080/geoserver/wms', 
         title: 'Identify features by clicking', 
         queryVisible: true, 
         eventListeners: { 
          getfeatureinfo: function(event){    
           map.addPopup(new OpenLayers.Popup.AnchoredBubble(
            "chicken", 
            map.getLonLatFromPixel(event.xy), 
            null, 
            event.text + '<div> Hello Tibet :)</div>' + load('./Photos/potalaPalace.jpg'), 
            null, 
            true 

           )); 

          } 

         } 
        }); 
        map.addControl(info); 
        info.activate(); 

     }); 


     function ahah(url) { 
       //document.getElementById(target).innerHTML = ' Fetching data...'; 
       if (window.XMLHttpRequest) { 
       req = new XMLHttpRequest(); 
       } else if (window.ActiveXObject) { 
       req = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       if (req != undefined) { 
       req.onreadystatechange = function() {ahahDone(url);}; 
       req.open("GET", url, true); 
       req.send(""); 
       } 
      } 

      function ahahDone(url) { 
       if (req.readyState == 4) { // only if req is "loaded" 
       if (req.status == 200) { // only if "OK" 
        //'<div><img src="' + req.response + '"></div>'; 
        var img = new Image(); 
        img.src = req.url; 
        '<div><img src="' + img + '"/></div>'; 
       } else { 
        " <div> AHAH Error:\n"+ req.status + "\n" +req.statusText + "</div>"; 
       } 
       } 
      } 

      function load(name) { 
       ahah(name); 
       return false;}

Source

2010-10-12 elshae

Est-ce que vos images existent dans le système de fichiers? Si c'est le cas, vous devriez charger une liste de noms de fichiers, pas de données. vous pouvez générer une liste du contenu du dossier avec la langue du serveur que vous utilisez, ou en créer manuellement un depuis la console avec "dir> images.txt" ou l'équivalent. – lincolnk

pouvez-vous utiliser un script de serveur, comme asp.net ou php? donc vous pouvez créer un webservice qui renvoie les chemins d'image – Mouhannad

Hmm bien tout fonctionne très bien sauf que l'image est affichée en tant que données/caractères bruts. A partir de ces réponses, je suppose qu'il n'y a pas de moyen facile de convertir ces données pour rendre l'image? Pourrais-je juste utiliser Ajax pour chercher dans le dossier et me renvoyer les noms de fichiers? J'ai tout le code prêt à aller :( – elshae

Votre question est vieux quelques années, mais peut-être cela peut aider quelqu'un d'autre. Je ne suis pas le meilleur expert, mais je l'ai fait avec HTML5 et son élément canvas.

J'utilisé EaselJS avec son constructeur Bitmap, vous pouvez utiliser une chaîne URI (URL) sur elle et la bibliothèque gère automatiquement la pré-charge passive (une image ne sera pas affichée jusqu'à ce qu'il charge complètement)

Le suivant le code commenté peut être utile comprendre ce que je veux dire;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="es" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Retrieve images on client using EaselJS</title> 
    <script src="easeljs-0.4/lib/easel.js"></script> 
    <script> 
    // Root element wich displays the content of a display list in the target canvas. 
    var stage; 
    // Variable to assign a new Bitmap object 
    var img; 

    // Function to init the canvas 
    function init() { 
    // Stage constructor with the canvas id as a parameter 
    stage = new Stage(document.getElementById("cnvs_images")); 
    // Bitmap object with an URI parameter. This can be an URL or a path to the image (it can also be a video or another canvas) 
    // Example with an URL 
    var picture = "http://www.ndsicards.com/wp-content/uploads/Colors3D-1.jpg"; 
    // You can also use a relative path to the server's images folder if this code resides in your webserver and the page it's being accessed by a client's browser) 
    /* var picture = "somepath/afolder/subfolder/itzaimage.jpg"; */ 
    img = new Bitmap(picture); 


    //You can set the image a point of reference, if you plan to animate it for example. 
    /* img.regX = img.image.width * 0.5; 
    img.regY = img.image.height * 0.5; */ 

    // You can scale the image if you need it. 1 it's like 1:1 size. 
    /* 
    img.scaleX = 0.3; 
    img.scaleY = 0.3; 
    */ 

    // The bitmap it's added to the stage to be able to be rendered. 
    stage.addChild(img); 

    //The frames per second if you plan to animate the image 
    /* Ticker.setFPS(60); */ 
    // You'll need a Ticker Listener to be able to render it. 
    Ticker.addListener(window); 
    } 

    function tick() { 
    // Here you can set any animation code if needed as this simple example: 
    /* img.x += (stage.mouseX - img.x) * 0.1 
    img.y += (stage.mouseY - img.y) * 0.1 */              
    // This line must be at the end because it renders the 
    stage.update(); 
    } 
    </script> 
</head> 

<!-- Don't forget the init funcion to be called onload --> 
<body onload="init()"> 
    <!-- And the canvas and it's id of course! --> 
    <canvas id="cnvs_images" width="800" height="600"></canvas> 
</body> 
</html>

Ceci est un exemple de travail, il suffit de copier et coller. Téléchargez également la bibliothèque EaselJS et mettez-la à jour dans mon code. Enfin, si vous voulez animer l'image, vous pouvez le faire; il suffit de décommentariser le code où je me réfère à l'animation et de le tester!

Dans la synthèse, vous pouvez utiliser la bibliothèque EaselJS comme ci-dessus côté clients et utiliser un objet Bitmap dont l'argument peut être un URI ou une URL.

J'espère que vous avez trouvé cela utile;)

Source

2012-03-22 19:06:43 Metafaniel

J'ai un dossier sur le serveur avec quelques images en elle. Je voudrais que mon code client lise le contenu de ce dossier (images) et affiche cette image sur un div dont j'ai besoin de code dans javascript.

Source

2018-02-06 06:41:15 spoorthy

Récupérer des images du serveur via le côté client

Répondre

Questions connexes