4

UIに画像を表示するために、html、ajax、およびstruts 2を使用しています。アクションから画像のバイト[]として応答を返しています。画像ソースに添付すると、文字化けした値が表示されます。

スクリプトから作成している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;
  }
4

1 に答える 1

3

私はあなたの問題を再現しました。base64 エンコーディングのように見えますが、Eclipse のローカル プレビューでは問題なく動作します。

response.getOutpuStream().write(...) の代わりに次の 2 行を使用します。

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

テスト済み

  • Chrome バージョン 23.0.1271.97 OSX 10.7.5
  • Firefox 16.0.2 OSX 10.7.5
  • サファリ 6.0.2 OS X 10.7.5
于 2012-12-19T07:27:19.697 に答える