PR

画像を組み込んでいこう!

2008年5月22日(木)
羽田野 太巳

画像が表示されない理由と判定方法

 前ページのサンプルでは正しく画像が表示されませんでしたが、これは、img.srcに"digits.png"をセットした直後に、drawImageメソッドを呼び出しているからです。

 img.srcに"digits.png"をセットした段階では、"degits.png"をサーバにリクエストしただけで、読み込みが完了したわけではないのです。そのため、drawImageメソッドを呼び出しても、表示する画像がなかったために、何も表示されなかったのです。

 このように、CanvasでImageオブジェクトを利用する場合は、画像が読み込まれた状態でなければいけません。

 では、画像が読み込まれたかどうかを、どうやって判定するのかを見ていきましょう。

 Imageオブジェクトは、画像のロードが完了すると、loadイベントが発生します。したがって、Imageオブジェクトに対してonloadイベントハンドラを使って、画像のロードが完了してからdrawImageメソッドを実行するといったことが可能となります。

 前ページのリスト1のサンプルコードに画像ロードの判定を組み込むと、リスト2のようになります。このコードを実際にWebブラウザで試してみると、FirefoxでもInternet Explorerでも正しく画像が表示されるようになります。

画像のキャッシュ問題

 リスト2のサンプルでは、img.srcに"digits.png"だけではなく、日時を表す値を後ろに付け足している点に注目してください。これによって、Webブラウザのキャッシュによる問題を防いでいます。

img.src = "digits.png?" + new Date().getTime();

 このコードによって、画像をリクエストする際にサーバに対して"digits.png?1187146057389"といった形でリクエストすることになります。数字の部分は、アクセスのたびに変化します。

 画像ファイルが読み込まれたかどうかを、onloadイベントハンドラを使って判定していましたが、Internet Explorerの場合、すでにキャッシュされている画像に対してはloadイベントが発生しません。たとえば、Webブラウザの再読み込みや、別ページに移動してから戻ってきた場合がこれに該当します。このような状況では、drawImageメソッドが呼び出されません。

 そのため、アクセスのたびに画像のURLを変化させることで、新たな画像としてWebブラウザにロードさせるのです。こうすることで、どのような状況でも画像が新たに読み込まれ、loadイベントが発生するようになります。

 以上のように、画像をCanvasに組み込む場合、Imageオブジェクトを生成する際に、画像ファイルのURLをアクセスの都度変化させる工夫を入れ、さらにonloadイベントハンドラを使って、画像がロードされてからdrawImageメソッドを実行させる点に注意してください。

 これまでdrawImageメソッドの基本的な使い方を解説してきました。これは、drawImageメソッドの機能の一部でしかありません。次ページでは、もう少し深く掘り下げて、drawImageメソッドの画像トリミングについて解説していきましょう。

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

画像を組み込んでいこう! | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。