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，也可以编写一个在传递id时写出Content-type: image/jpeg（或类似）数据的servlet，即：

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

Answer 2

这不起作用。将blob留在服务器端。客户端的JavaScript无法对二进制数据做任何明智的事情。它所需要的只是图像的URL，以便它可以在HTML src元素的<img>属性中引用它，以便web浏览器可以依次完成下载和显示图像的工作。最好的方法是在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。长话短说，我之前已经发布了几个答案，如何做，它们包含启动代码片段：

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

2 个答案: