Flash で描画したベクター画像を img タグで表示させるデモを作った。肝はサーバプログラムを経由しないところ。 IE 以外のモダンブラウザなら、下の灰色の領域に線を描くと、その下に PNG 画像が現れるはず。
ペイントツール部分は、func09 さんのソースをお借りした。
仕組み
- PNGEncoder で PNG の ByteArray を作る
- その ByteArray を Base64 エンコードする
- その文字列を ExternalInterface でブラウザに送る
- data スキーマで画像を表示させる
<pre>var bmp:BitmapData = new BitmapData(300, 300);
bmp.draw(canvas);
var base64Text:String = Base64.encodeByteArray(PNGEncoder.encode(bmp));
ExternalInterface.call("putImage", base64Text);
</pre>
<script type="text/javascript">
var flashvars = {};
var params = {
"allowScriptAccess" : "always"
};
var attributes = {};
swfobject.embedSWF("/mt-files/client-side-paint/Paint.swf", "flashContainer", "300", "300", "9", null, flashvars, params, attributes);
//var so = new SWFObject("http://bitmap.dyndns.org/blog/files/client-side-paint/Paint.swf", "paint", "300", "300", "9", "white");
//so.addParam("allowScriptAccess", "always");
//so.write("flashContainer");
function putImage(base64Text) {
document.getElementById("canvas").innerHTML = '<img src="' +"data:image/png;base64," +base64Text + '" style="border:none;margin:none;">';
}
</script>
