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

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

　前ページのサンプルでは正しく画像が表示されませんでしたが、これは、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メソッドの画像トリミングについて解説していきましょう。