byte[]をpngに変換、画像として表示出来ない

Question

前提・実現したいこと

JavaEE・サーブレット・JSPを用いた掲示板アプリにて
画像投稿機能をコーディング、実行すると画像が表示されず
絵が破損したような5mm×5mm程度の小アイコンが表示されてしまいました。
絵が破損した原因特定・修正を行いたいと考えております。

図：画像の表示が失敗した状態

画像投稿機能の流れは下記の通りです。
１．JSP処理
(1)画像を送信

２．サーブレット処理
(1)リクエストスコープから画像を取得
(2)画像をbyte[]に変換
(3)DAOでbytea型カラムに画像(byte[])を格納

３．JSP処理
(1)DBから画像(byte[])を取得し、
(2)byte[]→BASE64に変換、
(3)BASE64をHTMLに埋め込み画像表示

また、ソースコードは下記の通りです。

該当のソースコード

１．JSP処理
(1)画像を送信

　　<input type="file" name="file"/>

２．サーブレット処理
(1)リクエストスコープから画像を取得
(2)画像をbyte[]に変換
(3)DAOでbytea型カラムに画像(byte[])を格納

　　InputStream isimg= null;
    filePart = request.getPart("file");
    if (filePart != null)
    {
        isimg = filePart.getInputStream();
    }
    byte[] bimage = IOUtils.toByteArray(isimg);
    byte[] encoded = java.util.Base64.getEncoder().encode(bimage);
　　　・
　　　・
　　　・
    Mutter mutter = new Mutter(timestamp ,loginUser.getName(), text, encoded);
    PostMutterLogic postMutterLogic = new PostMutterLogic();
    postMutterLogic.execute(mutter);

DAO

      // データベースへ接続
      conn = DriverManager.getConnection(JDBC_URL, DB_USER, DB_PASS);

      // INSERT文の準備(idは自動連番なので指定しなくてよい）
      String sql = "INSERT INTO tsubuyaki(hiduke, name, tsubuyaki, image) VALUES(?, ?, ?, ?)";
      PreparedStatement pStmt = conn.prepareStatement(sql);

      // INSERT文中の「?」に使用する値を設定しSQLを完成
      pStmt.setTimestamp(1, mutter.getDate() );
      pStmt.setString(2, mutter.getUserName());
      pStmt.setString(3, mutter.getText());
      pStmt.setBytes(4, mutter.getbfileItem());
      //System.out.println("【public class MutterDAO】【public List<Mutter> create】 " + mutter.getDate() + mutter.getUserName() + mutter.getText() );

      // INSERT文を実行
      int result = pStmt.executeUpdate();

３．JSP処理
(1)DBから画像(byte[])を取得し、
(2)byte[]→BASE64に変換、
(3)BASE64をHTMLに埋め込み画像表示

        <% for(Mutter mutter : mutterList){%>
            <% Timestamp ts = mutter.getDate(); %>
            <p><font color="#0000ff"><%=mutter.getUserName()%></font>：<%=sdf.format(ts)%></p>
            <p><%=mutter.getText()%></p>

            <% if(mutter.getbfileItem() != null){ %>
            <%     String image = Base64.getEncoder().encodeToString(mutter.getbfileItem()); %>
                   <img src="data:image/png;base64,${image}">
            <% } %>
        <% } %>

試したこと

１．a5-mk2で画像(byte[])をjpgで見たところ、画像が表示されていたので、
postgreSQLに画像を格納する事自体は正しく行えたと考えております。
※DBにbyte[]を格納出来たので、怪しいのはJSPのbyte[]→BASE64→画像表示の間だとは考えております。

２．JSPにて画像(byte[])→画像(BASE64)変換した結果を
トレースで確認、値が入っていることを確認しました。以下トレースを記載致します。
【main.jsp】画像(byte)→画像(BASE64) : iVBORw0KGgoAAAANSUhEUgAAAkIAAAJwCAYAAABlFQ6mAAAAAXNSR・・・

補足情報（FW/ツールのバージョンなど）

a5-mk2 2.14.5 64bit
java8
JDK1.8
Tomcat8.5

Answer 1

HTMLソースをみるとおそらくbase64データ部分が空でしょう。

jsp内で宣言したローカル変数はEL式では呼び出せません。スクリプトレットで出力します。

<img src="data:image/png;base64,<%= image %>">

DAO他の変数もスクリプトレットで出力しているから、それに倣えばいいのに。

Comments

[java_se]

ご回答ありがとうございます。スクリプトレットに修正いたしました。
また、画像の変換の流れを順に追っていき、
DBに格納したBase64バイナリをBase64文字列に変換するメソッドである　　 java.util.Base64.getEncoder().encodeToString(encoded)が正しく動作していないのではないかと
思い、調査中です。

下記に現状の変数の流れを記載致します。
【public class Main】【protected void doPost】にて、
byte[] bimage = IOUtils.toByteArray( InputStream型です→ isimg ) = [B@4ba9a9ec
byte[] encoded = java.util.Base64.getEncoder().encode(bimage) = [B@6a4d7708
(encoded)ヘキサ表示 = 6956424f5277304b47676f41414....
String base64string = java.util.Base64.getEncoder().encodeToString(encoded) =
aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0F......

a5mk2で、DBに書いたBase64バイナリを テキスト表示
iVBORw0KGgoAAAANSUhEUgAAAk.....

【main.jsp】
mutter.getbfileItem()をヘキサ表示 = 6956424f5277304b47676f414....　←正しく取得できている
String image = Base64.getEncoder().encodeToString(mutter.getbfileItem()) =
aVZCT1J3MEtHZ29BQUFBTl　　←この結果が、a5m2の機能を使ってDBに格納されたバイナリをテキスト表示した結果であるiVBORw0KGgoAAAANSUhEUg.... と異なるので間違っている。

[hope_mucci]

ん？2回エンコードしてない？
iVBORw0KGgoAAAANSUhEUgAAAk...の文字列が正しくPNG画像をbase64でエンコードしたものです。デコードするとPNGのヘッダが確認できます。
aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0F...の文字列は上のiVBORw0KGgoAAAANSUhEUgAAAk...をもう一度base64でエンコードしたものです。

byte[] encoded の行は不要。String base64string = java.util.Base64.getEncoder().encodeToString(bimage); で良い。

[java_se]

ありがとうございます。1回のエンコード
（byte[] encoded =java.util.Base64.getEncoder().encode(bimage);）のみで画像を表示できました。

byte[] encoded = java.util.Base64.getEncoder().encode(bimage);
が必須だと思い、2回エンコードしておりました。
下記にBase64を用いた画像投稿の流れを整理致します。

1. ブラウザが画像を送信
　　<form action="/Project/Main" method="POST" enctype="multipart/form-data" >
　　 <input type="file" name="file"/>
　　</form>

2. 画像を受信
　　①InputStreamｵﾌﾞｼﾞｪｸﾄを取得
　　　　InputStream isimg= null;
　　　　filePart = request.getPart("file");
　　　　if (filePart != null)
　　 {
isimg = filePart.getInputStream();
}
　　//②InputStreamｵﾌﾞｼﾞｪｸﾄ → バイト列
byte[] bimage = IOUtils.toByteArray(isimg);

3. byte[] bimageをPostgreSQL(bytea型のカラム)に格納
4. byte[] bimageをBase64のテキストに変換
　　String image = Base64.getEncoder().encodeToString(mutter.getbfileItem());
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑mutter.getbfileItem()でbimageを取得
5. String image を用いて画像を表示
　　<img src="data:image/png;base64,<%=image%>">　※jspなので<% %>を使用