Home/ Questions/Q 9009579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T02:14:07+00:00

I am using html,ajax and struts 2 to show image on UI. I am

  • 0

I am using html,ajax and struts 2 to show image on UI. I am returning response as a byte[] of image from action and when I attach it with the image source then it shows some garbled values.

ajax call I am making from script is 

$.ajax({  
    type: "POST",  
    url:url,  
    contentType: "image/png",  
    success: function(data){  
        $('.logo').html('<img src="data:image/png;base64,' + data + '" />');  
    }
} );

and action from where I am returning array of image byte is like this

public void execute(ActionInvocation invocation) throws Exception {  
    HttpServletResponse response = ServletActionContext.getResponse();  
    response.setContentType(action.getCustomContentType());
    response.getOutputStream().write(action.getCustomImageInBytes());
}

public byte[] getCustomImageInBytes() { 
    System.out.println("imageId" + imageId); 
    BufferedImage originalImage;
    try {
      originalImage = ImageIO.read(getImageFile("C:\\temp\\Desert.jpg"));
      // convert BufferedImage to byte array
      ByteArrayOutputStream baos = new ByteArrayOutputStream();
      ImageIO.write(originalImage, "png", baos);
      baos.flush();
      imageInByte = baos.toByteArray();
      baos.close();
    } catch (IOException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    } 
    return imageInByte;
  }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve recreated your problem. It does appear to be the base64 encoding, although it works fine in the eclipse local preview without.

    Use these two lines instead of response.getOutpuStream().write(…)

    String encoded = javax.xml.bind.DatatypeConverter
                .printBase64Binary(action.getCustomImageInBytes());
response.getOutputStream().print(encoded);

    My full solution:

    HTML

    <!DOCTYPE html>
<html>
<head>
<title>Dynamic image test - stackoverflow issue 13946908</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<script>
  $(document).ready(function() {
    $.ajax({
      type : "GET",
      url : "/Test/ImageServer",
      contentType : "image/png",
      success : function(data) {
        $('.logo').html('<img src="data:image/png;base64,' + data + '" />');
      }
    });
  });
</script>
<body>
  <div class="logo"></div>
</body>
</html>

    Servlet

    public class ImageServer extends HttpServlet {

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("image/jpeg");
        byte[] data = getCustomImageInBytes(request.getServletContext()
                .getResource("/horse.jpg"));
        String encoded = DatatypeConverter.printBase64Binary(data);
        response.getOutputStream().print(encoded);
    }

    private byte[] getCustomImageInBytes(URL url) throws IOException {
        BufferedImage originalImage = ImageIO.read(url);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(originalImage, "jpg", baos);
        baos.flush();
        byte[] imageInByte = baos.toByteArray();
        baos.close();
        return imageInByte;
    }
}

    Tested

    • Chrome Version 23.0.1271.97 OSX 10.7.5
    • Firefox 16.0.2 OSX 10.7.5
    • Safari 6.0.2 OSX 10.7.5
    • 0