java - 如何从 JSP 获取图像 blob 到 JavaScript？

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

这行不通。将 blob 留在服务器端。客户端的 JavaScript 无法对二进制数据执行任何明智的操作。它所需要的只是图像的 URL，以便它可以在 src 中引用它。 HTML 的属性 <img>元素，以便网络浏览器可以依次完成下载和显示图像的工作。最好在 URL 中包含图像标识符。该图像的名称是唯一的，对吧？请在 URL 中使用它。

第一步让JS创建一个HTML <img>具有适当 src 的元素属性指向返回图像的 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" />

现在，第二步是创建 servlet它监听 /imageservlet/* 的 URL 模式，将图像检索为 InputStream通过传入的标识符从数据库中读取并将其写入 OutputStream沿着一组正确的响应 header 的响应。长话短说，我之前已经发布了几个关于如何做到这一点的答案，它们包含启动代码片段:

• How to retrieve and display images from a database in a JSP page?
• Writing image to servlet response with best performance