海峡スマートフォン用の表示で見る海峡この広告は、90日以上更新していないブログに表示しています。JavaScriptでアニメーションGIFを作るこんばんは、国民的スポーツのアニメGIFについてのニュースをお届けします。今回はクライアントサイドのJavaScriptだけでアニメーションGIFを作る方法を共有させて頂きます。ふつうアニメGIFを作ろうと思うとimagemagickなどを使ってサーバーサイドで処理させると思いますが、今回紹介するのはブラウザだけでアニメGIFを作る方法です。GitHubjsgifというJavaScriptでCanvasをアニメGIFに変換してくれる超絶便利ライブラリがあるのでこれを使います。同名でアニメGIFをCanvasで制御再生できるライブラリがあって、そっちのほうが有名ですがそれとは別です。AS3のライブラリをJSに移植したものみたいでソースコードを読もうとしても全然分からないけど、便利すぎるので全面の信頼をおいて使います。だいたいこんな感じで使える。実際には画像をロードするのを待たないといけない。canvas.height);encoder.addFrame(context);encoder.finish();気をつけることクロスオリジン制約によるCanvasの汚染canvasには外部ドメインから読み込んだ画像を描画したcanvasは"汚染"されて、画像として保存するなどデータを引き出すことができなくなるセキュリティ上の制約があります。MDNjsgifはcanvasを使って画像データを引き出しているので、外部ドメインから画像を読み込んでいる場合使うことができません。外部ドメインの画像を使ってアニメGIFを作りたい場合は、CORSなプロキシを通すなどする必要があります。file://で画像を参照する場合もクロスオリジン制約に引っかかるので、適当なHTTPサーバーを立てて動かす必要があります。デモjsgifを使ったアニメGIF生成の簡単なデモを作ってみました。GIF生成の処理は重いので、WebWorkerを使ってバックグラウンドで処理させるようにしています。デモの様子はここから見れます。Chromeで動くと思います。素材にはパブリックドメインな人物画像を使用しています。http://uiureo.github.com/jsgif-demo/こんな感じの画像が生成されます。};}());encoder.jsWebWorkerでアニメGIFを生成する部分です。GitHub問題点データが大きすぎてURLに収まらない小さい画像ならなんとか収まってURLで参照できるけど、アニメGIF用途ではたいていURLに収まらない。URLをコピーして参照とかできない。サイズがでかすぎたら名前をつけて保存ができなかったりする。JavaScriptでアニメGIFを作る方法をご紹介しました。サーバーサイドを書くことなく、ブラウザだけでアニメGIFを作ることができるのでとても便利ですね。以上、スポーツニュース速報でした。月別アーカイブはてなブログをはじめよう!uiureoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。