2017-05

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Canvasの描画(drawImageとputImageData)について

このエントリーをはてなブックマークに追加
3分くらいで読めます。

局面図をWebで作成するページがFirefox7だと後手の駒が全部歩になってしまうという問題が出てしまいました。
http://sfenreader.appspot.com/create_board.html

HTML5のCanvasに描画する方法については、drawImageとputImageDataという2つのメソッドがあります。
前者はHTMLImageElementやHTMLCanvasElement、果てはHTMLVideoElementが描画できるので万能に見え、これだけを使っていれば良いように思えます。

しかし、HTMLCanvasElementの内容をdrawImageした時に、実際にdrawされる内容はdrawImageが実行された瞬間ではない実装があるようです。実際にはFirefox7やFirefox5がそうでした。なので、drawImageしたCanvasの内容を頻繁書いたり消したりしていると、望む結果が得られないことがあります。

クラウド将棋盤ジェネレータでは、後手の駒を180度回転させて描画する時に、隠しCanvasに書いてからそれをdrawImageするという手法を使っていましたが実際にdrawImageされるタイミングが異なるためにFirefox7では全て同じ駒になるという問題が生じていました。

そこで、getImageDataとputImageDataを組み合わせることにしました。この方法だと実際にイメージを取得した瞬間の画像が描画されることが保証されるようです。実際に、各ブラウザ、(IE9、Firefox7、Chrome14、Opera11、Safari5)等で動かしてみましたが特に問題ないようです。

getImageDataで得られるデーターはHTMLImageElementとは互換性がないため若干使いづらいのですが、現状はこの実装で行こうと思います。例えば、普通にImageを読み込んで書く時でもputImageDataを使う場合(ImageDataで書く場合)どこかのCanvasに描画してからgetImageDataでImageDataを取得するという2度手間になってしまいます。またputImageDataはexCanvasやFlashCanvasでの使用に難があるという情報もあります(実際には未確認)

getImageDataのImageDataはピクセル毎にアクセス可能であるというメリットもあるのですが、現状この機能は使わないのでとりあえず一時的に画像を保管できる機能としてしか使っていません。

(2011/09/11:追記) これ以上に重大な問題があって、getImageDataは別ドメインを描画したキャンバスのデータの取得がセキュリティ的に許されていないという問題があります。いわゆるクロスドメインな場所にある画像へのアクセスが禁止されているということです。これは悪意のある攻撃者が個人情報を含む画像からデータを抜き取ることを防ぐ目的だとされています。あるいはCaptcha的な画像認証を解析するコードを埋め込まれることなどを懸念しているのかもしれません。

Canvasが出てからまだしばらく経つのにブラウザ間の実装がこなれてない感じがしますね。そろそろライブラリが出てきてもいいような気がするのですが…
関連記事
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://fantakeshi.blog50.fc2.com/tb.php/53-ee1c0795
この記事にトラックバックする(FC2ブログユーザー)

-

管理人の承認後に表示されます

«  | ホーム |  »

プロフィール

fantakeshi

Author:fantakeshi
Web:ここ
Twitter ID:fantakeshi
自作物やプログラムやまとまった技術的メモについて

RSSに追加

自作物

最新記事

Twitter

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

自作物 (26)
一般 (1)
将棋 (12)
BONANZA (1)
ponanza (1)
HTML5 (2)
Chrome (1)
WebAPI (1)
Webサイト (2)
プログラム (2)
Tips (1)

カウンター

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。