Read Image response in Ajax

[devaraj s, modificado hace 10 años.]

Hi , I am generating a image in serveResorce() method and getting a response in ajax. Here I am getting image response in text format . Please anyone help me what changes I need to done in ajax script,

Javascript:

<script type="text/javascript">
function chartUrl(chartUrl){
    var todo =document.getElementById('toDo').value;
    $.ajax({
        url :chartUrl,             
          data: {"todo":todo,"CMD":"chartUrl"},
          type: "GET",
          contentType: "image/png",
          dataType: "text",
        success: function(data) { 
        	/* alert(data); */
              $("#imgalign").html('<img src="' + data + '" />');
        }
    });
}
 </script>

View.jsp:

<div id="imgalign">
<img src="<%=chartUrl.toString()%>">
</div>

ServeResource() method:

public void serveResource(ResourceRequest request, ResourceResponse response)
             throws PortletException, IOException {
if(request.getParameter("CMD").equals("chartUrl")){
 PortletChartUtilities.writeChartImageData(request, response);
}

PortletChartUtilities:

public class PortletChartUtilities {

	public static void writeChartImageData(ResourceRequest request, ResourceResponse response) throws IOException
    {
      response.setContentType("image/png");
        OutputStream out = response.getPortletOutputStream();
 
        DefaultCategoryDataset dataset = new DefaultCategoryDataset();
        
        dataset.addValue(1.0, "Row 1", "Column 1");
        dataset.addValue(2.0, "Row 1", "Column 2");
        dataset.addValue(3.0, "Row 1", "Column 3");
       
 
        dataset.addValue(4.0, "Row 2", "Column 1");
        dataset.addValue(5.0, "Row 2", "Column 2");
        dataset.addValue(10.0, "Row 2", "Column 3");
 
        try {
            JFreeChart chart = ChartFactory.createBarChart("Heart Risk", "Risk Level", "Risk Level", dataset, PlotOrientation.VERTICAL, true, true, false);
 
            if (chart != null) {
                CategoryPlot plot = (CategoryPlot) chart.getPlot();
                BarRenderer renderer = (BarRenderer) plot.getRenderer();
                renderer.setItemMargin(0.0);
              renderer.setMaximumBarWidth(0.26);
              
                ChartUtilities.writeChartAsPNG(out, chart, 300, 300);
            }
        } catch (Exception e) {
            System.err.println(e.toString());
        } finally {
            out.close();
        }
 
    }
 
}

Here I have attached output I am getting, I think I need to handle image response properly in ajax script but I am newbie to ajax so please can one help me what changes I need to be there.

[Hitesh Methani, modificado hace 10 años.]

Hello devaraj,

You can try sending base64 encoded string in response, and decode it on jsp, by using following jquery in success function :
$("#imgalign").html('<img src="data:image/png;base64,' + data + '" />');

Thanks,
Hitesh M

[devaraj s, modificado hace 10 años.]

Thanks for your response Hitesh Methani,

$("#imgalign").html('<img src="data:image/png;base64,' + data + '" />');

I tried ur suggestion by replacing this content in script but still there is a sme issue.

And you mantioned that i need to decode a response again in jsp , please can u brief this?

[Hitesh Methani, modificado hace 10 años.]

Hello Devaraj,

To elaborate,

You need to change your controller code, Instead of sending image bytes directly in ajax response,
send base64 encoded string as reponse to ajax call.
Following is the link which may help you : http://stackoverflow.com/questions/13109588/base64-encoding-in-java
You need to get bytes of png image from and encode it as base64 string.

Now in order to read the base64 encoded string in jsp, the script code mentioned ($("#imgalign").html('<img src="data:image/png;base64,' + data + '" />');), will decode the base64 encoded string, no need for extra code in jsp.

HTH.

Thanks,
Hitesh M

[devaraj s, modificado hace 10 años.]

Hi Hitesh Methani

This Is my modified controller class, here I have converted image bytes to base64 string but not able write string to portletoutputstream, Please can u suggest what steps I need to follow here to write this string as a response in ajax,

public class PortletChartUtilities {

    public static void writeChartImageData(ResourceRequest request, ResourceResponse response) throws IOException
   {
      response.setContentType("image/png");
        OutputStream out = response.getPortletOutputStream();
  
         DefaultCategoryDataset dataset = new DefaultCategoryDataset();
         
        dataset.addValue(1.0, "Row 1", "Column 1");
        dataset.addValue(2.0, "Row 1", "Column 2");
        dataset.addValue(3.0, "Row 1", "Column 3");
     
 
        dataset.addValue(4.0, "Row 2", "Column 1");
        dataset.addValue(5.0, "Row 2", "Column 2");
        dataset.addValue(10.0, "Row 2", "Column 3");

        try {
            JFreeChart chart = ChartFactory.createBarChart("Heart Risk", "Risk Level", "Risk Level", dataset, PlotOrientation.VERTICAL, true, true, false);
 
            if (chart != null) {
                CategoryPlot plot = (CategoryPlot) chart.getPlot();
                BarRenderer renderer = (BarRenderer) plot.getRenderer();
                renderer.setItemMargin(0.0);
              renderer.setMaximumBarWidth(0.26);
              
          //modified code     
           [b]  BufferedImage objBufferedImage=chart.createBufferedImage(600,800);
              ByteArrayOutputStream bas = new ByteArrayOutputStream();
                      try {
                          ImageIO.write(objBufferedImage, "png", bas);
                      } catch (IOException e) {
                          e.printStackTrace();
                      }

              byte[] byteArray=bas.toByteArray();
             Base64.encode(byteArray);   [/b]                                            <= how to write this string to portletoutputstream
             
            }
        } catch (Exception e) {
            System.err.println(e.toString());
        } finally {
            out.close();
        }
 
    }
 
}

[Hitesh Methani, modificado hace 10 años.]

Hello Devaraj,

You need to get print writer object and write the string to it, so that you can get the same as data in ajaxResponse,

To get printwriter object,

PrintWriter writer = resourceResponse.getWriter();
writer.println(required encoded image string);

HTH.

Thanks,
Hitesh M

[devaraj s, modificado hace 10 años.]

Thank you so much Hitesh Methani, Its worked Thank you

[Hitesh Methani, modificado hace 10 años.]

Cheers

[Vishal Wagh, modificado hace 9 años.]

Hi Hitesh,

I am also facing same (above) problem. As you said above, i wrote encoded byte array into PrintWriter object, but in jsp i am not able to see the image.

In controller my code is as below

BufferedImage objBufferedImage=chart.createBufferedImage(600,800);
ByteArrayOutputStream bas = new ByteArrayOutputStream();
try {
ImageIO.write(objBufferedImage, "png", bas);
} catch (IOException e) {
e.printStackTrace();
}

byte[] byteArray=bas.toByteArray();
//sresponse.getWriter().println(Base64.encodeBase64(byteArray).toString());
PrintWriter writer = response.getWriter();
writer.println(Base64.encodeBase64(byteArray));

[KASHYAP DAS, modificado hace 6 años.]

This is not going to work. JavaScript can't save the retrieved bytes locally or something and tell the browser to display it. Please don't fake .

[chirag @ India, modificado hace 10 años.]

hi devaraj s ,

i am also facing same problem before few day ago .where i want to display image from database.Your image is displaying in binary form ,so we have to convert it into image ,but how i don't know.please check below thread my last post you might get any idea

http://www.liferay.com/community/forums/-/message_boards/message/22699648

Thanks
Chirag