Question

我在服务器上有一个文件夹，里面有一些图像。我想让我的客户端代码读取此文件夹的内容（图像），然后在div上显示此图像。我认为使用AJAX会很容易，但似乎AJAX会返回嵌入在图像中的一些原始数据。我一直在寻找一种方法来获取图像的网址而不是这些数据，但我尝试过的所有内容都无效。我真的更喜欢在客户端这样做。我很感激你能给我的任何建议：）。

谢谢，

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;}

Answer 1

你的问题已有几年了，但也许这可以帮助其他人。我不是最伟大的专家，但我用HTML5做了这个，它是画布元素。

我使用EaselJS使用它的Bitmap构造函数，您可以在其上使用URI（URL）字符串，库将自动管理被动预加载（图像在完全加载之前不会显示）

以下注释代码可以帮助理解我所说的内容;）

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

这是一个工作示例，只需复制并粘贴即可。还要下载EaselJS库并在我的代码中更新它的路径。最后，如果你想为图像设置动画，你可以做到;只是将我引用动画的代码取消注释并测试它！

在综合中，您可以在客户端使用如上所述的EaselJS库，并使用Bitmap对象，该参数可以是URI或URL。

我希望你发现这很有帮助;）

Answer 2

我在服务器上有一个文件夹，里面有一些图像。我想让我的客户端代码读取此文件夹的内容（图像），然后在我需要javascript的代码中显示此图像。

通过客户端从服务器检索图像

2 个答案: