显示来自 servlet 的多个图像

Question

我正在尝试在我的轮播页面的 jsp 页面中显示来自 servlet 的多个图像，但只显示第一个图像。我想知道如何显示 Sql 查询的所有结果。servlet 代码是

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub      

    //response.setContentType("image/jpg");
    HttpSession myses = request.getSession(true);

    String imageid =  request.getParameter("id");
    //System.out.println("In servlet"+imageid);

    ServletOutputStream o; 

    try {
         Class.forName(driverName);
         con = DriverManager.getConnection(url,userName,password); 
         String sql = "select mid from carousel_two where cid= '"+imageid+"'";
         PreparedStatement stmt = con.prepareStatement(sql);
         ResultSet rs = stmt.executeQuery();
         myses.setAttribute("lis",rs);
         byte[] obj = new byte[1434295];
         byte[] sample = null;
         int srcPos = 0;
         //int i=0;
         //String encoded =new String ();
         o = response.getOutputStream();

         java.util.List<String> strings = new ArrayList<String>();

         //StringJoiner joiner = new StringJoiner(",");

         if(rs!=null ) {                 
             while(rs.next()) { 
                 String sql1 = "select img from carousel_two where mid= '"+rs.getInt("mid")+"'";
                 PreparedStatement stmt1 = con.prepareStatement(sql1);
                 ResultSet rs1 = stmt1.executeQuery();
                 if(rs1!=null) {
                     while(rs1.next()){ 
                     //int id = rs.getInt(1);
                     //System.out.println("id = "+id);
                     sample = rs1.getBytes("img");
                     int length = sample.length;
                     System.arraycopy(sample, 0, obj,srcPos, length);
                     srcPos += length;

                     //System.out.println("Length required = " + srcPos);

                     //if(rs!=null) {                
                         //System.out.println("mid"+rs.getInt("mid"));
                         //o.write(rs.getBytes("img"));
                         byte[] newArray = new byte[srcPos];
                         System.arraycopy(obj, 0, newArray, 0, srcPos);

                         response.setContentType("image/jpg");
                         // response.getOutputStream().write(newArray);

                         strings.add(DatatypeConverter.printBase64Binary(newArray));
                         //System.out.println(strings+"\n");

                         // encoded=DatatypeConverter.printBase64Binary(newArray);          
                     }
                 }           
          //}
          }
     }
     //int x=(encoded.split(";")).length;
     //  System.out.println("X"+x);

        //encoded=String.join(",", strings1);
        //encoded= String.join(",", strings); 
        String json = new Gson().toJson(strings);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        o.print(json);
        o.flush();                                   
    }catch (Exception e) {
     e.printStackTrace();
    }
}   

而javascript代码是

function trigger(idx, state) {
    document.getElementById('touchScroller').innerHTML=" ";
    $.ajax({
        type : "GET",
        url : "Sampleimage1",
        contentType :"application/json",
        data:{id:idx},
        success : function(data) {
            var da=data;
            //da=data.split(",");
            //alert(typeof data);
            //alert(da.length);
            $.each(da,function(index,item){
            alert( index);

            $('#touchScroller').append('<img src="data:image/jpg;base64,' +item +'" />');
        });                                           
    }                           
    });
}

我是这方面的新手，因此我们将不胜感激。

Answer 1

#编辑

将 ResultSet 的内部 while 循环替换为以下内容

while(rs1.next()){ 
    byte[] dbImageArr = rs1.getBytes("img");
    strings.add(DatatypeConverter.printBase64Binary(dbImageArr));
}

只需要这些，休息可以忽略。这应该可以解决您的问题。

建议：

单个 HTTP 调用可以返回 single image resource（或二进制内容）。您需要使用图像的名称或任何其他可识别信息多次调用 Servlet，Servlet 使用该图像将返回正确的图像。

这才是正确的做法。假设您需要一组图像。你知道组名是g1，里面有5张图片。您将创建如下图像链接。

<img src="/ImageServlet?group=g1&seq=1>
<img src="/ImageServlet?group=g1&seq=2>
<img src="/ImageServlet?group=g1&seq=3>
<img src="/ImageServlet?group=g1&seq=4>
<img src="/ImageServlet?group=g1&seq=5>

这将对 servlet 进行 5 次调用，并将根据组名和序列号返回图像。

如果您绝对想一次性返回所有图像，则需要将它们转换为 Base64 字符串。然后您可以返回包含图像 Base64 内容的 JSON（或您认为合适的任何其他格式）。

{
    "img1": "data:image/png;base64,i.....",
    "img2": "data:image/png;base64,i.....",
    "img3": "data:image/png;base64,i.....",
    "img4": "data:image/png;base64,i.....",
    "img4": "data:image/png;base64,i....."
}

注意：第一种方法是正确的方法，在性能和带宽利用率方面具有优势。因为将进行 5 次并行调用来获取图像，并且任何下载的图像都会显示出来，而无需等待其他人完成下载。

当然，可以选择将图像合并在一起，就像在为游戏加载精灵时完成的那样，但您可能不想走那么远。