이미지에 왜곡 된 값이 표시됩니다.

UI에서 이미지를 표시하기 위해 html, ajax 및 struts 2를 사용하고 있습니다. 나는 행동으로부터 이미지의 바이트 []로 응답을 반환하고 이미지 소스와 연결하면 왜곡 된 값을 보여줍니다. 내가 스크립트에서 만드는 중이이미지에 왜곡 된 값이 표시됩니다.

아약스 호출 내가 이미지를 바이트의 배열을 반환하고하는 것은 내가 문제를 다시 한이

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

당신은 어디베이스 64로 인코딩 할 수 없을 겁니다 아니면 outstream에 write()가 무료일까요 ?? – Adam

자바 측에서 스크립트 쪽에서 처리하기 때문에 base64로 인코딩하는 것이 필요합니까? – ankit

같은 곳에서

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

및 작업입니다. 비록 base64 인코딩이 아닌 eclipse 로컬 미리보기에서 제대로 작동하지만 base64 인코딩 인 것처럼 보입니다. .

대신 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>

서블릿

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

테스트 됨

크롬 버전 23.0.1271.97는 OSX 10.7.5
파이어 폭스 16.0.2 OSX는 10.7.5
사파리 6.0.2 OSX 10.7.5

출처

2012-12-19 07:27:19 Adam

당신의 솔루션이 저에게 효과적입니다. PNG 이외의 이미지 (JPEG 및 기타 형식)를 표시하려면 변경해야합니까? 그렇다면 필요한 부분을 변경해야합니까? 건배 – ankit

ankit 그것이 효과가 있다면 정말이 대답을 받아 들여야합니다 –

그래, 안드레아하지만 내 질문의 한 부분은 아직 답이 없습니다. 감사합니다. – ankit

이미지에 왜곡 된 값이 표시됩니다.

답변

관련 문제