Download and display image dynamically

I have the below requirement. I click on the display link in the shown page. I call the javascript function displayImage with input parameters are filename and isDisplay. In this function, I generate an 'img' tag whose src="download?filename=DCS.jpg&isDisplay=true".

I am expecting this to call the servlet which connects to hadoop, gets the bufferedImage of the requested image and writes to response outputstream.

But this is not displaying the image and the servlet is not even called when i dynamically generate the img tag.

What should i do to display dynamically?

JSP CODE:

   <%List<String> filenames = (ArrayList<String>)request.getAttribute("filenames"); 
    if(filenames.size()>0){
        for (String filenme : filenames){                   
    %>
    <div id="filename">
        <a href="javascript:submit('<%=filenme%>', 'false')" onclick="javascript:submit('<%=filenme%>', 'false')"><%=filenme%></a>  
    </div>
    <div id="displink">
            <a href="javascript:displayImage('<%=filenme%>', 'true')" onclick="javascript:displayImage('<%=filenme%>', 'true')">Display</a>
    </div>          
    <div id="line"></div>
    <%  }
    }%>
    </div>
    <% %>
    <div id="displayImage">

    </div> 

JAVASCRIPT CODE:

function displayImage(imageName, isDisplay){
var display = document.getElementById('displayImage');
 var parameters = "filename="+imageName+"&isDisplay="+isDisplay;
 display.innerHTML="<img src="download?"+parameters+""";
 display.style.display="block";
}

SERVLET CODE:

BufferedImage bi = ImageIO.read(fs.open(item.getPath()));
if (isDisplay) {
    resp.setContentType("image/"+extn);
    OutputStream out = resp.getOutputStream();
    ImageIO.write(bi, extn, out);
}


Source: jsp

Leave a Reply