Clever Geek Handbook

How to display .png image from ajax response?

I am sending ajax response.getOutputStream (). write (encoder.pngEncode ()) image in bytes, I want to display an image at runtime in my jsp from ajax response, is it possible? Can you please anyone can fix this problem.

In the Servlet class:

chartImage = chart.createBufferedImage(400, 300);       
        PngEncoder encoder = new PngEncoder(chartImage, false, 0, 9);

        resp.setContentType("image/png"); 
        resp.setHeader("Cache-Control", "no-cache");
        resp.getOutputStream().write(encoder.pngEncode());

In JSP:

if (bbyHttpRequest.readyState == 4) 
    { 
        if(bbyHttpRequest.status == 200) 
        { 
        alert("inside ajax call");

        var respone=bbyHttpRequest.responseText;

        alert("respone----------->"+respone);

        //var i = new Image();
        //i.src = respone;

           //document.getElementById("imgChart1").innerHTML = '<%=request.getContextPath() + "/CreateOMSMonitorScreenTest" %>';
          // document.getElementById("imgChart1").value = '<%=request.getContextPath() + "/CreateOMSMonitorScreenTest" %>';
          document.getElementById("imgChart1").value=respone;

        } 
        else 
        {
        alert(' Dynamic call to web server failed.Please refresh the page. ');
        } 
    }
+2


source to share


2 answers


If you have a server that returns PNG images, you don't need to use ajax, you can use simple HTML:

<img src='myServer.thing?param=value' alt='Loading Failed' />


You can use JavaScript to handle tag errors img

.

+2


source


There are data urls , so you can create a tag like <img src = "data: image / png; base64, iVBORw0KGgo ..." / ">



IE6 does not support this however, which may or may not be a problem for you.

+1


source






More articles:


All Articles