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

Question

我從表中檢索了一個blob以及一些其他數據，比如name和image ：

name = varchar, image = blob

我將其設置為我的過濾器中的對象並將其傳遞給JSP文件：

request.setAttribute("info", object);

在JSP文件中，我得到了這些數據：

request.getAttribute("info");

現在我有來自該對象的數據如何將該信息傳遞給我的JS文件並將圖像呈現為JS文件的源？

我正在努力：

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

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

它似乎沒有起作用。 這樣做的正確方法是什么？

Answer 1

如果在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標記引用：

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

我建議讓服務器（你的servlet）將一個URL傳遞給JSP，瀏覽器可以通過img標簽來獲取圖像，而不是將你的blob數據傳遞給JSP文件。 您可以將blob數據寫入URL，也可以編寫一個servlet，在傳遞id時寫出Content-type: image/jpeg （或類似）數據，即：

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

Answer 2

這不會起作用。 將blob留在服務器端。 客戶端的JavaScript無法對二進制數據做任何明智的事情。 它只需要一個圖像的URL，以便它可以在HTML <img>元素的src屬性中引用它，這樣webbrowser就可以繼續完成下載和顯示圖像的工作。 最好的方法是在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>

（請注意，那些單引號因此必須將它們表示為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" />

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

• 如何從JSP頁面中的數據庫中檢索和顯示圖像？
• 以最佳性能將映像寫入servlet響應