2012-08-23 45 views
0

我想嵌入一個HTTP調用,它返回一個PNG圖像到一個HTML頁面。嵌入在一個靜態HTML頁面的HTTP POST調用

我會在github的gh頁面上運行頁面,如果這有所作爲。

的網址是:http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png

注意,有時服務是有時下的URL不返回PNG。

我想使用POST方法調用該URL,並簡單地將png返回到頁面中。理想情況下,http調用也將在頁面循環中運行。

我是否使用iframe,表單,javascript?

謝謝!斯科特

+1

什麼是這樣做背後的想法?爲什麼你不能嵌入圖像? ''? –

+0

該URL正在調用服務器,該服務器運行一些'R'代碼,該代碼吐出一個png,因此它不是鏈接到圖像的鏈接,而是一個運行該圖像的函數。 – sckott

+0

那麼,如果調用產生圖像並將其放入圖像標籤中,則客戶機將獲得圖像,並且它將立即顯示。 – TheZ

回答

1

[我還不如好好回答]

當服務器餵你的圖像數據和要加載它,你還不如把它當作一個圖像和使用img標籤。這種方法在你的特定情況下的問題是,你說服務器有時可能會關閉,這意味着如果你只是簡單地追加圖像而不檢查一個斷開的鏈接,那麼你會得到那個醜陋的破碎的圖像空間。

但是,使用圖像的簡單性仍然是可行的。通過在加載事件處理函數中使用一點javascript,當且僅當加載成功時,您纔可以附加圖像。如果您從請求中獲得任何類型的錯誤代碼,加載事件將永遠不會觸發,並且您不會添加破碎的圖像。

下面是香草JS概念:

img = document.createElement("img"); 
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);}; 
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png"; 

你也可以看到它在這裏的行動:http://jsfiddle.net/BwJeC/

+0

答案接受...順便說一下,您的js小提琴網站準備好.js文件供您在本地運行嗎? – sckott

+0

@ScottChamberlain不,它只是一個簡單的測試平臺,可以輕鬆共享html/css/js示例(並且它有幾個易於加載的js庫)。除非您知道如何設置瀏覽器以允許它,否則在本地運行AJAX可能會非常痛苦。謝天謝地,加載圖像並不被視爲這種問題;) – TheZ

0

我真的不明白你爲什麼要發佈。

無論如何,如果你想查詢與POST數據的圖片,你可以,可能需要做一個JS XHR調用和返回的圖像爲base64,然後做一些事情,如:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" /> 

最好將仍然可以通過簡單的電話獲得:

<img src="/dynamicallyGeneratedPicture" /> 

帶有返回文件類型圖像的路徑或腳本。

+0

這應該給你的另一半該解決方案實質上是通過HttpRequest獲取二進制數據,然後將其轉換爲Base64字符串:http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html – joocer

+0

謝謝尋求幫助,調查這些各種解決方案 – sckott