Retrieve Images From Server via Client Side_问答_开发者

I have a folder on the server with some images in it. I would like to have my client code read this folder's contents (images) and then display this image on a div. I thought this would be easy with AJAX, but it seems that AJAX returns some raw data embedded in the image. I have been looking all over for a way to get the image's url instead of this data, but everything I have tried just does not work. I really prefer to do this on the client side. I appreciate any suggestions you can give me on going about this :).

Thanks,

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开发者_如何学C 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;}

I'm not the greatest expert, but I've done this with HTML5 and it's canvas element.

I used EaselJS With it's Bitmap constructor, you can use an URI (URL) string on it and the library will automatically manage the passive preload (an image won't be displayed until it loads completely).

The following commented code can be useful understanding what I'm saying:

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

This is a working example, just copy and paste it. Also download the EaselJS library and update the path to it in my code. Finally if you want to animate the image you can do it; just uncomment the code where I refer to animation and test it!

In summary, you can use EaselJS library as above in clients side and use a Bitmap object which argument can be an URI or URL.