Flash で描画したベクター画像を img タグで表示させるデモを作った。肝はサーバプログラムを経由しないところ。
IE 以外のモダンブラウザなら、下の灰色の領域に線を描くと、その下に PNG 画像が現れるはず。
ペイントツール部分は、func09 さんのソースをお借りした。
仕組み
- PNGEncoder で PNG の ByteArray を作る
- その ByteArray を Base64 エンコードする
- その文字列を ExternalInterface でブラウザに送る
- data スキーマで画像を表示させる
var bmp:BitmapData = new BitmapData(300, 300);
bmp.draw(canvas);
var base64Text:String = Base64.encodeByteArray(PNGEncoder.encode(bmp));
ExternalInterface.call("putImage", base64Text);
IEではどうやれば、これと同じことできますか？
通りすがりさんこんにちは。
IE6/7 では data スキーマ (ムの方が正しいかも) に非対応なので、これと同じことはできません。
ただし、IE8 では対応とのこと※なので、近い将来、同じコードが動くと思います。
※手元に IE8 が無いので、ソースは Wikipedia をご参照ください。
“Internet Explorer up to version 7 does not support data: URIs. However, it is supported by Internet Explorer 8 Beta 1″
http://en.wikipedia.org/wiki/Data:_URI_scheme
丁寧にありがとうございます。
現状はIE8期待といったところでしょうか。