PR

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

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

画像のトリミング

 Canvasでは画像ファイルを読み込んでそのまま表示するだけではなく、任意の領域を、任意の場所に、任意の大きさで表示させることが可能です。

 このような画像のトリミングも、先ほど紹介したdrawImageメソッドを使います。ただし、下記のように引数の数が9つになります。

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

 元の画像の座標(sx, sy)から、横幅sw、縦幅shの領域をトリミングします。トリミングされた部分画像を、Canvasの座標(dx, dy)に、横幅dw、縦幅dhのサイズに伸縮して描画します。

 このようにdrawImageメソッドは、引数の数で動作が異なりますので、注意してください。

 今回は、前のページで使ったdigits.pngを使ってトリミングのサンプルを試してみましょう。この画像は、横幅25px、縦幅30pxの領域に1つの数字が収められ、0から9までの数字が横一列に結合されています。この画像をトリミングして、5の領域をCanvas上に表示してみましょう。

 元の画像の5の位置は(125, 0)の地点から横幅25ピクセル、縦幅30ピクセルの領域です。これをCanvasの左上の地点(0, 0)に横幅25ピクセル、縦幅30ピクセルのサイズ、つまり伸縮せずにオリジナルのサイズでCanvas上に表示します。

ケーススタディ

 では、実際にdrawImageメソッドのトリミングを使った簡単なアプリケーションを作ってみましょう。

 ここでは、これまで使ってきたdigits.pngを使います。この画像に含まれている0から9の数字をトリミングして、現在の西暦4桁を抽出して表示してみましょう。

 画像トリミングは、このケーススタディのように、事前にパーツを並べて結合した画像を用意し、動的にトリミングして目的の図を生成するには役に立ちます。カレンダー表示、カウンターといったアプリケーションに応用ができそうですね。

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

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

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

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

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