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

我检索到的BLOB从一个表中的一些其他数据，说name和image：我如何从JSP到JavaScript获取图像blob？

name = varchar, image = blob

我设置为我过滤的对象并将其传递到JSP文件：

request.setAttribute("info", object);

在JSP文件中我得到的数据：

request.getAttribute("info");

现在，我有来自该对象的数据我怎么去传递一个INF o到我的JS文件并呈现图像作为JS文件的来源？

我想：

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

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

它只是似乎并不奏效。做这件事的正确方法是什么？

来源

2011-08-18 iCodeLikeImDrunk

你经过实际图像（即二进制数据）或只是图像的文件名（磁盘上的图像的路径）？ –

以及它从表中的一个blob，所以我想这是二进制数据.. 没有目录，只是图像数据... – iCodeLikeImDrunk

这是行不通的。将服务器端的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>

（请注意，那些singlequotes因此强制它们表示为一个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，并沿着一组正确的响应标头。长话短说，我已经发布了几个答案之前至于如何做到这一点，它们包含了开球的代码片段：

来源

2011-08-19 01:34:24 BalusC

我想插入图片的链接而不是整个图片作为blob，但多数民众赞成我的导师想要它的方式...我想做阿贾克斯调用，但还没有真正把整个事情都拿出来，但是... – iCodeLikeImDrunk

对不起，但是你的导师是一个完全白痴，或者你误解了他。你*可以* base64编码它，然后使用数据URI方案，但是这不会在所有网页浏览器中工作，并且绝对不是服务图像的正常方式。 – BalusC

即时查看公司代码，他们似乎做了类似的方式..插入图像作为斑点到桌子，然后在需要时检索它..我只是没有弄清楚它是如何完成的 – iCodeLikeImDrunk

如果您在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 src="/path/to/myimage.jpg" />

而不是你的BLOB数据传递到JSP文件的，我会建议具有服务器（你的servlet）通过一个URL：通常这会通过img标签被写入到服务器上的图像文件，并引用到浏览器可以用来通过img标签获取图像的JSP。您可以BLOB数据写入到一个URL或写一个servlet时，通过一个ID写入了Content-type: image/jpeg（或类似）的数据，即：

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

来源

2011-08-19 00:34:09

即使它成功地通过了？我所有的变量和其他等都在jsp文件中，那么js文件就是实际生成html动画等的文件... 非常讨厌=/ – iCodeLikeImDrunk

不可能。这就是为什么您需要将图像数据保留在服务器端并将“IMG”src url传递给JSP的原因。 –

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

回答

相关问题