JavaScript で画像をウィンドウに合わせる

画像の表示サイズをボタンで切り替えるプログラムです。

サイズは、画像本来のサイズ(オリジナルサイズ)と、ウィンドウに合わせたサイズ(ウィンドウサイズ)の2種類です。

・オリジナルサイズ: 画像本来のサイズ
・ウィンドウサイズ: ウィンドウ内に画像全体が収まるサイズ

(注)ウィンドウサイズ
正確には、画像の横幅をウィンドウの横幅に一致させる

 

 

動作例

Fig.1 写真をウィンドウサイズで表示

 

Fig.2 写真をオリジナルサイズで表示

 

 

 

プログラム1

 

プログラム1 の説明

グローバル変数
  • canvas: canvas 要素を保存する変数
  • originalWidth: 元画像の横幅
    • オリジナルサイズの横幅
  • originalWidthFlg:
    • 表示画像をオリジナルサイズで表示: ture
    • 表示画像をウィンドウサイズで表示: false

 

body部

 

<input>要素が3 個、<canvas>要素が1 個です。

以下のボタンはクリックすると、各関数が動作します。

  • [Original size]ボタン: originalSize() 関数
  • [Window size]ボタン: windowSize() 関数

 

 

 

Canvas のstyle 変化

プログラム1 のラインマークした箇所で、Canvas のstyle を変化させています。

14 行目、25 行目

  • Canvas の横幅を、ウィンドウの横幅に設定

 

20 行目

  • Canvas の横幅を、オリジナルサイズの横幅に設定

 

(注)style 変化

style の変化は、「見た目」が変わるだけです。そのため、Canvas のstyle が変化しても、Canvas 上の画像データは変化しません。

 

 

画像ファイルをCanvas に描画

何段階かの処理を経て、画像ファイルをCanvas に読み込みます。

以下、各処理を簡単に説明します。

 

Canvas の2次元コンテキスト

29 行目、30 行目で、Canvas の2次元コンテキストが使えるようにします。

  • Canvas 要素を、変数canvas に代入
  • getContext() メソッドで、2 次元コンテキストを、変数context に代入

 

ダイアログでファイルを選択

32 行目、33 行目で、ダイアログを表示し、ファイル選択を待ちます。

  • [selectFile]ボタンをクリックすると、ダイアログを表示
  • ファイルを選択すると、onchange イベントが発生

 

dataURL 形式

36 行目、38 行目で、画像をdataURL 形式で読み込みます。

  • 画像をdataURL 形式で読込
  • 読込が終了すると、onload イベントが発生

 

drawImage() メソッド

39 行目、40 行目で、image 要素を作成し画像を代入します。

  • 新たなimage 要素を作成
  • image にdataURL形式の画像を代入

44 行目で、image をCanvas に描きます。

  • 2次元contextのdrawImage() を用い、image をCanvas に描画

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。