圖像顯示一些亂碼值

我使用html，ajax和struts 2在UI上顯示圖像。我將返回的響應作爲來自操作的圖像的字節[]，並且當我將它與圖像源一起附加時，它會顯示一些亂碼值。圖像顯示一些亂碼值

Ajax調用我從劇本製作爲

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

和行動從那裏我返回圖像字節數組是這樣

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; 
    }

來源

2012-12-19 ankit

如果你沒有在任何地方編碼爲base64或者在outstream上寫write（）是免費的嗎？ – Adam

是否需要在java端編碼到base64，因爲我在腳本端處理它？ – ankit

我已經重新創建您的問題。它似乎是base64編碼，雖然它在eclipse本地預覽中沒有工作正常。。

使用這兩條線，而不是response.getOutpuStream（）寫（...）

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

我的完整的解決方案：

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; 
    } 
}

已測試

的Chrome版本23.0.1271.97 OSX 10.7.5
火狐16.0.2 OSX 10.7.5
的Safari 6.0.2 OSX 10.7.5

來源

2012-12-19 07:27:19 Adam

感謝Adam，您的解決方案適用於我。如果我想顯示像png之外的其他圖像（jpeg和其他格式），那麼我是否需要進行更改？如果是，那麼我需要做哪些必要的更改？乾杯 – ankit

ankit如果它的工作，你應該真的接受這個答案 –

是的，肯定安德烈，但我的問題的一部分仍然沒有答案。謝謝 – ankit

圖像顯示一些亂碼值

回答

相關問題