我如何從JSP到JavaScript獲取圖像blob？

我檢索到的BLOB從一個表中的一些其他數據，說name和image：我如何從JSP到JavaScript獲取圖像blob？

name = varchar, image = blob

我設置爲我過濾的對象並將其傳遞到JSP文件：

request.setAttribute("info", object);

在JSP文件中我得到的數據：

request.getAttribute("info");

現在，我有來自該對象的數據我怎麼去傳遞一個INF o到我的JS文件並呈現圖像作爲JS文件的來源？

我想：

<div> 
     <script type="text/javascript" src="jsFile.js></script> 
    </div> 

var name = <%=info.name%>; 
var image = <%=info.image%>

它只是似乎並不奏效。做這件事的正確方法是什麼？

來源

2011-08-18 iCodeLikeImDrunk

你經過實際圖像（即二進制數據）或只是圖像的文件名（磁盤上的圖像的路徑）？ –

以及它從表中的一個blob，所以我想這是二進制數據.. 沒有目錄，只是圖像數據... – iCodeLikeImDrunk

這是行不通的。將服務器端的blob留在那裏。客戶端的JavaScript不能對二進制數據做任何事情。它所需要的只是圖像的URL，以便它可以在HTML <img>元素的src屬性中引用它，以便網頁瀏覽器可以反過來執行下載和顯示圖像的工作。最好的辦法是在URL中包含圖像標識符。這個名字是唯一的圖像，對吧？改爲在URL中使用它。

第一步是讓JS用適當的src屬性創建一個HTML <img>元素，該屬性指向返回圖像的URL。假設你準備的數據如下

String name = "foo.png"; 
String imageURL = "imageservlet/" + name; 
request.setAttribute("imageURL", imageURL);

並且正在將它打印在JSP（！），就好像它是JS變量如下

<script> 
    var imageURL = '${imageURL}'; 
    // ... 
</script>

（請注意，那些singlequotes因此強制它們表示爲一個JS字符串變量）

，使得它們在所生成的HTML源結束像如下（在瀏覽器中右擊頁面並做查看源代碼進行驗證）

<script> 
    var imageURL = 'imageservlet/foo.png'; 
    // ... 
</script>

，那麼你可以創建圖片如下

var img = document.createElement("img"); // or getElementById("someId")? 
img.src = imageURL; 
// ... add to document?

（請注意，這只是一個例子，我也沒說出想法的功能需求是什麼，你想這樣做與此圖像元素，甚至更多，也許並不需要JS代碼是什麼在所有的具體功能性要求）

，以便它在HTML結束這樣的：

<img src="imageservlet/foo.png" />

現在，第二步驟是創建一個servlet其偵聽的/imageservlet/*一個URL模式，通過傳入的標識符從數據庫中檢索圖像InputStream，並將其寫入響應的OutputStream，並沿着一組正確的響應標頭。長話短說，我已經發布了幾個答案之前至於如何做到這一點，它們包含了開球的代碼片段：

來源

2011-08-19 01:34:24 BalusC

我想插入圖片的鏈接而不是整個圖片作爲blob，但多數民衆贊成我的導師想要它的方式...我想做阿賈克斯調用，但還沒有真正把整個事情都拿出來，但是... – iCodeLikeImDrunk

對不起，但是你的導師是一個完全白癡，或者你誤解了他。你*可以* base64編碼它，然後使用數據URI方案，但是這不會在所有網頁瀏覽器中工作，並且絕對不是服務圖像的正常方式。 – BalusC

即時查看公司代碼，他們似乎做了類似的方式..插入圖像作爲斑點到桌子，然後在需要時檢索它..我只是沒有弄清楚它是如何完成的 – iCodeLikeImDrunk

如果您在jsFile.js之前的腳本塊中設置變量，則可以從腳本訪問數據。即：

<div> 
    <script type="text/javascript"> 
     var name = <%=info.name%>; 
     var image = <%=info.image%>; 
    </script> 
    <script type="text/javascript" src="jsFile.js></script> 
</div>

我不知道你打算如何處理二進制（BLOB）圖像數據？

<img src="/path/to/myimage.jpg" />

而不是你的BLOB數據傳遞到JSP文件的，我會建議具有服務器（你的servlet）通過一個URL：通常這會通過img標籤被寫入到服務器上的圖像文件，並引用到瀏覽器可以用來通過img標籤獲取圖像的JSP。您可以BLOB數據寫入到一個URL或寫一個servlet時，通過一個ID寫入了Content-type: image/jpeg（或類似）的數據，即：

<img src="http://www.yourserver.com/GetImage?imageId=xxx" />

來源

2011-08-19 00:34:09

即使它成功地通過了？我所有的變量和其他等都在jsp文件中，那麼js文件就是實際生成html動畫等的文件... 非常討厭=/ – iCodeLikeImDrunk

不可能。這就是爲什麼您需要將圖像數據保留在服務器端並將「IMG」src url傳遞給JSP的原因。 –

我如何從JSP到JavaScript獲取圖像blob？

回答

相關問題