html - GWTのデータURI

Question

GWTでデータURIを作成することは可能ですか？

データURIを使用して、バイト配列画像を実際の画像として挿入したいと思います。

Answer 1

GWT のトランクで ClientBundle をチェックアウトする必要があります。データ URL をサポートするブラウザー用にデータ URL を自動的に作成し、他のブラウザー用のフォールバックを作成します: http://code.google.com/p/google-web-toolkit/wiki/ClientBundle

この機能は GWT 2.0 まで出荷されませんが、現在は頻繁に使用されています。

Answer 2

はい。これを行うことは完全に可能です。IE6 がこの方法でバイナリ データ ストリームを処理しないことに気付くまで、私はアプリケーションのためにそれを行いました。いくつかの方法でそれを行うことができます。この例では、どこかでバイト配列を文字列に変換し、適切にエンコードされ、データ URI に適した型になっていることを前提としています。また、選択したデータ スキームの基本的な形式を知っている (または見つけることができる) ことも前提としています。

これらの例は、データ URI スキームに関するウィキペディアの記事から引用しました。

1 つ目は、通常どおり生の HTML を使用して画像参照を作成し、それをページに挿入することです。

HTML html = new HTML("<img src=\"data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==\" alt=\"Red dot\">");

画像のみを使用することもできます。(これにより、ほぼ同じ出力 HTML/JS が生成されるはずです。)

Image image = new Image("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==");

これにより、ロードした画像の上で Image 抽象化の全機能を使用できます。

このソリューションを拡張し、GWT の遅延バインディング メカニズムを使用して、データ URI をサポートしないブラウザーを処理することをお勧めします。(IE6、IE7)