イナヅマTVログ

AS3, 画面をキャプチャして画像生成(JPG,PNG)

| 4件のコメント

AS3のflash.utils.ByteArrayを使うとバイト単位の操作が可能になる、おかげてFlashでJPEG,PNGなどの画像生成もできる。
他にもzipアーカイブ解凍や音声なしflvも作成可能。

Adobe – Developer Center 2008-09-28の記事 Saving Flash graphics as image files at runtimeにソースファイル付きでサンプルがあったのでありがたく試してみる。
著者のClive GoodinsonはネットでComicが作れるPixton.comの制作に携わったgoodinson.comの人。

サンプルは入力したテキストごとMovieClipをキャプチャした後、JPGかPNGに変換して、サーバーのPHPにデータを送り
・再度読み込む
・ダウンロードする
・ブラウザの別ウインドウに表示する
が行えるようになっている。

サーバー側のPHPは単にデータを返すだけで、これで画像を生成していない。
画像生成処理まですべてFlash側でできることがスゴイ。
Diretorだとサードパーティーのextraを使わないといけないところ・・・

ByteArrayの他に以下のライブラリを使う。
Adobeの corelib
dynamicflash.comcom.dynamicflash.util.Base64

Base64
ActionScript 3.0 Base64 encoder/decoder にも少し解説が。
Base64作者のSteve WebsterさんはYahoo UKのWeb DeveloperでFoundation ActionScript 3.0 with Flash CS3 and Flex 著書の一人。

【手順】com.goodinson.snapshot.Snapshot.as

  1. キャプチャしたい矩形をgetBoundsで取得
  2. 矩形サイズのBitmapDataをつくりキャプチャ元を複製
  3. corelibの JPGEncoder, PNGEncoder でByteArrayへエンコード
  4. ByteArrayをBase64でString型へ
  5. サーバーへPOST送信

再読み込み用インスタンス loader を単純なMovieClipにしたので、
サンプルソースのSnapshot.as
options.loader.load(request);

var ldr:Loader = new Loader();
ldr.load(request);
options.loader.removeChildAt(0);
options.loader.addChild(ldr);

へ修正。

サンプルではloaderはリンケージでLoader Classのインスタンスになっている。

[swfobj src=”http://www.inazumatv.com/contents/wp-content/uploads/2008/10/snapshot-test-1.swf” alt=”FlashでJPG,PNG生成” width=”600″ height=”300″ id=”snapshot-test-1″ name=”snapshot-test-1″ allowfullscreen=”false” required_player_version=”9.0.124″]

AIRならサーバーなしで単体でできそう。。

update : 2008-12-28
添付PHPファイルは不正アクセスなどの対策などが全く施されていないので、そのままWebで使うのは危険ではないかと思う。
POSTされたデータをヘッダーを付けて返しているだけだけど、直接アクセス対策ぐらいはしておいた方が良さそうだ。

update : 2009-06-19
Flash Player 10 がターゲットで JPEG エンコードだと Alchemy 版 jpegencoder を使う方が処理が早い。
Alchemy, jpegencoder – 画面をキャプチャしてJPEGで保存

flash.net.FileReference を使えば PHP を経由しなくてもダウンロードが可能になる。

update

as3-corelib はgithubへ移動しています。
https://github.com/mikechambers/as3corelib

4件のコメント

  1. ピンバック: イナヅマtvログ » Alchemy, jpegencoder – 画面をキャプチャしてJPEGで保存

  2. ピンバック: イナヅマtvログ » キャプチャしたByteArrayをBitmapDataへ変換し再利用

  3. ピンバック: 日々のメモ張 » [AS3] PNG画像の生成

  4. ピンバック: イナヅマtvログ 2010 « イナヅマTVログ

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください