如何从 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，以便它可以在 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>

（请注意，这些单引号是强制要求将它们表示为 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，并将其写入@987654335 @ 沿着一组正确的响应标头的响应。长话短说，我之前已经发布了几个关于如何做到这一点的答案，它们包含启动代码 sn-ps：

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

Answer 2

如果您在 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" />

我建议不要将您的 blob 数据传递给 JSP 文件，而是让服务器（您的 servlet）将一个 URL 传递给 JSP，浏览器可以使用该 URL 通过 img 标记获取图像。您可以将 blob 数据写入 URL，也可以编写一个 servlet，在传递 id 时写出Content-type: image/jpeg（或类似的）数据，即：

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