canvasの練習(その２)

video要素で再生しているフレームをcanvasに描画。元の動画はH.264なのでChrome, Safariのみの筈。ただしSafariは試してない。

• http://jsbin.com/osayu

ビデオの元映像の大きさが、videoElement.videoWidth, videoElement.videoHeightでとれることがわかれば、問題ない。しかし、canvasには映像があるんだけど、canvas.toDataURLできない。なぜ?

普通にarcしたものとかはちゃんとtoDataURLできた。扇が広がるのをもとにつくった。

• http://jsbin.com/uloto3/4

Imageでロードしたデータはその画像ファイルのドメインによってtoDataURLできるかどうか違う。

• http://jsbin.com/owufi/4

追記 :

canvasでtoDataURLできるかどうかは外部サイトのデータが含まれているかによるようだ。FF,Chromeともに外部ドメインの画像データをcanvasに描画した場合はtoDataURLできない。videoをcanvasに描画した場合も同じだろう。

また一度外部データを書き、clearRectで全部クリアした後に同じドメインの画像を描画しても、toDataURLできない。

YouTubeなどの動画サイトのURLを指定して、動画のダイジェストを作成するようなものをサンプルとして、つくろうとしていたので、これはちょっと痛い。