通過客戶端從服務器檢索圖像

我在服務器上有一個文件夾，裏面有一些圖像。我想讓我的客戶端代碼讀取此文件夾的內容（圖像），然後在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;}

來源

2010-10-12 elshae

您的圖片是否存在於文件系統中？如果是這樣，你應該加載一個文件名列表，而不是數據。您可以使用您正在使用的任何服務器端語言生成文件夾內容列表，也可以使用「dir> images.txt」或等價物從控制檯手動創建一個文件夾內容列表。 – lincolnk 2010-10-12 21:19:17

你不能使用任何服務器腳本，如asp.net或php？所以你可以創建一個web服務，它返回圖像路徑 – Mouhannad 2010-10-12 21:21:13

嗯，一切都很好，除了圖像顯示爲原始數據/字符。從這些迴應中，我假設沒有簡單的方法將這些數據轉換回來呈現圖像？我可能只是使用Ajax搜索文件夾並將文件名返回給我？我已經準備好了所有的代碼:( – elshae 2010-10-12 21:49:31

你的問題是一些歲，但也許這可以幫助別人。我不是最偉大的專家，但我已經完成了HTML5和它的畫布元素。

我用EaselJS有了它的位圖的構造函數，你可以在上面使用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。

我希望你發現這是很有幫助;）

來源

2012-03-22 19:06:43 Metafaniel

我有它的一些圖像服務器上的文件夾。我想讓我的客戶端代碼讀取此文件夾的內容（圖像），然後在div上顯示此圖像，我需要代碼javascript。

來源

2018-02-06 06:41:15 spoorthy

通過客戶端從服務器檢索圖像

回答

相關問題