2012-05-07 7 views
0

JavaScriptでアニメーションが作成されています。私は映画にそれをレンダリングしたい。私は外部フレームキャプチャプログラムでこれをしたくないです。タイミングを非常に正確に制御したい。私はシステムを好むでしょう:JavaScriptアニメーションをムービーにレンダリングする

私はすべてのフレームでブラウザ呼び出しを行うことができ、ブラウザは現在のディスプレイを画像にレンダリングします。

(2)このように、私はfoo000.svg foo001.svg foo002.svgのような画像の束を取得...

(3)その後、私はPNG形式にこれらsvgsを変換、およびにそれを置くことができますシングルムービー。

ありがとうございます!

答えて

1

まあ、基本的には、あなたのウェブページを与えられた時点で何度もレンダリングしたいのです。私は以下の可能性を見ている。

  • リンク先の他のサイトの小さなスナップショットを必要とするウェブページのサムネイルサービスがあります。 oyuが単位時間あたりにあまりにも多くのスナップショットを要求しない場合、通常は無料です。サムネイルだけでなく、非小型化されたページをレンダリングする提案があるかどうかはわかりません。 1つ探してみてください。

    次に、http://browsershots.org/のようなウェブページの本格的レンダリングを提供する同様のサービスがありますが、単一のソースからのリクエストにはより厳しい制限があると思います。

    あなたのウェブページでできることは、フレームごとに、src = "http://somethumbnailingservice.com/?render=www.mywebsite.com"の新しい<img>要素を作成することです。次に、イメージが読み込まれるまで待ってください(JSのイベントがあります)、アニメーションを続行してください。これらの画像を保存するには、ブラウザから手動で行うか、ブラウザのキャッシュで手動で行うか、または最もエレガントに、ajax経由で受信して保存するサーバーアプリケーションに設定します。

  • これらのサムネイルサービスの制限を回避するには、自分でビルドしないでください。 Webkit(Safari、Chrome)やGecko(Firefox)などのブラウザレンダリングエンジンはopensourceです。今度は、すべてのフレームで、あなたのJavaScriptアプリケーションはあなたのWebページのコードを取るでしょう(document.getElementsByTagName('html')[0].outerHTMLのようなもの)。次に、スナップショットを作成するあなたのWebアプリケーションにajax経由で送信します。これは、レンダリングエンジンを実行し、HTMLマークアップを入力として渡し、イメージ出力を保存して保存することによって行われます。

  • 最後に、かなり愚かですが、多分まだ使用可能な方法は、javascriptのprintメソッドを使用することです。これはたぶん毎回プリンタの設定をお願いします。確かにポストスクリプトプリンタがインストールされていなければなりません。名前がつけたように、イメージを紙に印刷するのではなく、ポストスクリプトに保存します。 Postscriptはまさに画像フォーマットではありませんが、まだベクターフォーマットなので、画像に変換するアプリがいくつかあるはずです。また、プリンタ用のCSS設定は画面用の設定とは異なることが多いので注意してください。)

+0

ページサムネイルサービスではかなりクールなアイデアですが、必ずしもキャプチャする必要はありませんユーザーがブラウザで見ているものしたがって、ウェブページが時刻や何かに基づいて変化している場合を除き、それは非常に有用ではないかもしれません。それでも、それはかなりスマートなHAです。 – Parris

0

ちょっと考えましたが、フレームをキャプチャして配列に追加するたびに、内部HTMLを取得するだけです。キャプチャが完了すると、アレイ全体をサーバーに送信できます。それでは、内部HTMLを書くことです。あなたは本質的に、各フレームがその時点でdom状態であるような独自のビデオフォーマットを書いています。

途中でHTMLをSVGに簡単に変換できません。さらに、javascriptでキャプチャを簡単にキャプチャする方法はありません。これを行うためのフラッシュの能力、あるいはおそらく銀色の能力を調べることをお勧めします。

関連する問題