顯示來自servlet的多個圖像

Question

我想顯示多個圖像從一個jsp頁面的servlet在我的旋轉木馬，但我只顯示第一個圖像。我想知道如何顯示所有結果的Sql query.The 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

#Edit

更換內部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個並行呼叫來獲取圖像，並且下載的任何圖像將被顯示而不用等待其他人完成下載。

當然，在加載遊戲的精靈期間可以將圖像合併在一起，但您可能不想走那麼遠。