我如何从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响应