今回は、ローカルへの保存などをせずに直接Webビューアにフィールドデータとして保存した画像を表示する方法です。
動作サンプルとしてはこのように表示されます。
通常、画像表示させるときのimgタグの記述は以下のように書きますが、今回はhtmlソース内に直接画像データを埋め込む表示方法を利用したTipsです。
<img src="xxxx.jpg">
直接画像データを埋め込む時の記述は以下のようにします。(jpeg画像の場合）
<img src="data:image/jpeg;base64,[base64にエンコードした画像のｺｰﾄﾞ]">
jpeg以外の場合は"image/jpeg"部分を以下のようにmimeタイプしていします。
gifの場合、"image/gif"
pngの場合、"image/png"
Webビューアの設定
今回はWebビューアの設定に関する部分のみ説明します。
画像のみ表示させる場合
この場合はimgタグは使用せずに、"data:image/jpeg;base64”から始まる記述のみをWebビューアのWebアドレス欄に以下のように記述します。
"data:image/jpeg;base64," & Base64Encode (テーブルA::obj)
上記の例ですと、テーブルAのobjという名前のフィールドデータが表示されます。
ポイントはフィールドデータをBase64Encode関数によりエンコードしていることです。この関数はFileMaker13から追加されたので、それ以前のバージョンで実現したい場合は別途Base64関連のカスタム関数を探す必要があります。
htmlドキュメントとして表示させる場合
この場合はimgタグのsrc属性にエンコードしたデータをWebビューアのWebアドレス欄に以下のように記述します。
"data:text/html," &
List (
"<!DOCTYPE html><body>";
"<p>オブジェクトをWEBビューアにインラインで直接表示させる</p>";
"<img src='data:image/jpeg;base64," & Base64Encode (テーブルA::obj) & "' width='300'>";
"</body></html>"
)
注意点
この方法を利用すると、htmlのソース量がエンコードデータ分増加します。
そのため１つのWebビューアに複数画像を埋め込む場合や、大きな画像を表示する場合などは注意が必要かと思います。（大きな画像はエンコードデータ量も多いため）
説明は以上です。
今回のサンプルは以下の場所に置きましたので、詳しくはファイルを参照して下さい。
サンプルファイル