■応用の森　Base64形式の画像データ(jpeg/gif/png)を表示する方法
HTMLでの画像データは、通常アプリケーションコンテキストパス($WebContextRoot)配下に
images などのディレクトリを作り、これをHTMLで

<img src="./images/xxxx.jpg" />

と書くことで、ブラウザに画像が表示されます。
画像の表示方法としては最も一般的な方法で、通常はそれ以外考える必要はないかもしれません。

ただこの方法では、画像データはWebから参照可能な決まった場所(images)に配置しなければならず、
Webコンテンツ収集ツールを使えば、画像データを一括で抜き取ることも可能なため、
セキュリティ対策として、画像データは、Webから参照できない場所に置いて、
プログラムにより画像のレスポンスをDataStreamとして返却したい場合があります。

このような要求がある場合、具体的にどうするかというと、
任意の場所のデータファイルをJavaで読み込んで、バイト配列化したうえでBase64エンコードして
エンコードされた文字列をviw(HTML)に返却する方法があります。

この方法であれば、画像データは任意の場所(Webから参照できない場所)に配置できるので、
セキュリティ的にも安全です。

今回は、画像データファイルは作らず、画面からアップロードされた画像データを
サーブレットで受け取り、Base64エンコードして、ブラウザに返却するサンプルを紹介します。
JPEG画像をサーバーに送信し、BASE64エンコードしてブラウザに表示するサンプル
jpeg形式画像ファイルを指定してください。 
注）送信されたデータは、垂れ流しでサーバー側には一切保存していませんのでご安心を。
 
画像表示エリア

 

送信された画像がブラウザに表示されるはずです。
見た目は普通の画像ですが、このHTMLフレームのソースを見てみると、
通常の、<img src="./images/xxxx.jpg" />
のような記述ではなく、
やたらに長い、<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABA....長ーい" />
といった感じのBase64エンコードデータの羅列になっています。
以下、サンプルソースの解説です。

view(base64.html)

フォームを送信すると、結果は同じ画面が表示され、サーバーから返却された
Base64エンコードデータを <img>タグにセットしています。

 

コントローラ(src/main/jp/dip/arimodoki/cntl/Base64Conv.java)

 

ブラウザから投入された画像データは、マッピングハンドラbase64convert()に渡り、
ストリームを一旦バイト配列に変換して、Base64.encodeBase64()メソッドでエンコードされます。
エンコードデータに、データヘッダーを付加して、データモデルにセットし、view(HTML)に返却します。

ここでのミソは、Base64エンコードそのものではなく、
エンコードされたデータをブラウザの、<img />タグに表示するための
データヘッダー：data:image/jpeg;base64, を付加するところががミソです。
画像データのMIMEタイプにより
JPEG：data:image/jpeg;base64,
PNG：data:image/png;base64,
GIF：data:image/gif;base64,
などがあるので、MIMEタイプに合わせてここを変更する必要があります。
※）今回はサンプルなので、JPEG固定としています。

画面からアップロードされたInputStreamの部分を、ファイルからの読み込みに変更すれば
Webコンテキスト配下以外の任意の場所のファイルも表示できるようになります。

※注意）未確認ですが、この方法は IE6/IE7 では動かないらしい。。
　　　　もっとも、そんな環境いまさら感ですかね？
HTMLの小技集  HTMLにおけるメディアタイプのサポートについて
HOME