Imageオブジェクトを使って画像の情報を取得する方法を解説！【JavsScript】

Imageオブジェクトとは？

HTMLImageElement（<img>要素）のJavaScriptにおけるプログラム的表現です。
このオブジェクトを使用することで、画像の動的な操作、読み込み管理、およびイベント処理が可能になります。

new Image()コンストラクタを使用して生成され、document.createElement('img')と機能的に同等ですが、より簡潔な構文を提供します。
このオブジェクトは、src属性を通じて画像リソースを指定し、width、heightプロパティでサイズを制御できます。

また、onloadやonerrorイベントハンドラを通じて、画像の読み込み状態を監視することが可能です。
Imageオブジェクトは、DOM操作を必要とせずに画像をプリロードしたり、Canvasでの描画前に画像を準備したりする際に特に有用です。
これにより、ウェブアプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させることができます。

Imageオブジェクトを使うメリット

Imageオブジェクトを使用することには、多くのメリットがあります。

画像のプリロード

imageオブジェクトを使用すると、ウェブページの表示前に画像をプリロードできます。
これにより、ページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。特に、大きな画像や多数の画像を含むウェブサイトで効果的です。

動的な画像操作

JavaScriptを使用して、画像のsrc属性を動的に変更できます。
これにより、ユーザーの操作に応じて画像を切り替えたり、画像ギャラリーを作成したりすることが容易になります。

Lazy Load（遅延読み込み）の実装

画面にスクロールして表示されるまで画像の読み込みを遅延させるLazy Load（遅延読み込み）は、Imageオブジェクトを使用して実装できます。
Intersection Observer APIと併用するとさらに効果的です。

画像の読み込み状態の監視

onloadイベントを使用して、画像が完全に読み込まれたタイミングを検知できます。
これにより、画像の読み込みが完了してから特定の処理を実行するなど、より精密な制御が可能になります。

エラー処理

onerrorイベントを使用することで、画像の読み込みに失敗した場合の処理を定義できます。
これにより、代替画像を表示したり、ユーザーにエラーメッセージを表示したりするなど、適切なエラーハンドリングが可能になります。

キャンバスとの連携

HTML5のCanvas要素と組み合わせて使用することで、画像の動的な描画や編集が可能になります。
これは、画像処理や画像ベースのゲーム開発などに非常に有用です。

パフォーマンスの最適化

Imageオブジェクトを使用して画像をプリロードすることで、ページの初期読み込み時間を短縮できます。
これは特に、画像を多用するウェブサイトやシングルページアプリケーション（SPA）で重要です。

クロスオリジンリソース共有（CORS）の制御

ImageオブジェクトのcrossOrigin属性を設定することで、異なるドメインからの画像読み込みを制御できます。
これは、セキュリティを維持しながら外部リソースを利用する際に重要です。

非同期処理との親和性

Imageオブジェクトは非同期で画像を読み込むため、Promiseやasync/await構文と組み合わせて使用することができます。
これにより、複雑な画像処理タスクを効率的に管理できます。

メモリ管理の最適化

Imageオブジェクトを適切に使用することで、不要になった画像リソースを明示的に解放できます。
これにより、メモリリークを防ぎ、アプリケーションのパフォーマンスを維持できます。

ブラウザ互換性

Imageオブジェクトは広くサポートされているため、異なるブラウザやデバイス間で一貫した動作を期待できます。
これにより、クロスブラウザ対応のアプリケーション開発が容易になります。

これらのメリットにより、Imageオブジェクトは画像を扱う多くのウェブアプリケーションやインタラクティブなウェブサイトで不可欠なツールとなっています。
適切に使用することで、パフォーマンス、ユーザーエクスペリエンス、開発効率を大幅に向上させることができます。

Imageオブジェクトを使ったプログラミングの解説

この章では実際の記述について解説をします！

実際に使用したデモ

See the Pen Untitled by Muhiro (@muhiro) on CodePen.

Imageオブジェクトのインスタンスを生成

Imageオブジェクトはコンストラクタ関数であり、新しいインスタンスを生成するために使用されます。

”new”キーワードを使用して、”Image”のインスタンスを生成します。
以下の記述になります。

const img = new Image();

この操作により、新しい”HTMLImageElement”のインスタンスが作成されます。
作成されたインスタンスは、”<img>”タグとどうとの機能を持つjavascriptオブジェクトです。
このオブジェクトに対して、プロパティを設定したり、イベントハンドラを追加したりすることができます。
以下がサンプルコードになります。

const img = new Image();
img.src = './image.jpg';
img.onload = () => {
    console.log('画像が読み込まれました。');
};

Imageオブジェクトのインスタンスで使用できる主なプロパティとイベントハンドラ

Imageオブジェクトのインスタンスを定数”img”に代入した状態で説明をします。

プロパティ

img.src

画像のソースURLを取得・設定

    // 取得
    const imageUrl = img.src;

    // 設定
    img.src = 'https://example.com/image.jpg';

設定すると、新しい画像の読み込みが開始されます。

img.width

画像の表示幅を取得・設定

    // 取得
    const imgWidth = img.width;

    // 設定
    img.width = 300;

ピクセル単位で指定します。

img.naturalWidth

画像の元の幅を取得

    // 取得
    const onst originalWidth = img.naturalWidth;

画像の実際のピクセル幅を返します。

img.height

画像の表示高さを取得・設定

    // 取得
    const imgheight = img.height;

    // 設定
    img.height = 300;

ピクセル単位で指定します。

img.naturalHeight

画像の元の幅を取得

    // 取得
    const originalHeight = img.naturalHeight;

画像の実際のピクセル高さを返します。

img.alt

代替テキストを取得・設定

    // 取得
    const altText = img.alt;

    // 設定
    img.alt = '画像の説明';

新しく作成されたImageオブジェクトの場合、初期状態ではaltプロパティは空文字列 ("") です。

img.complete

画像の読み込み完了状態を取得

    // 取得
    const isLoaded = img.complete;

true なら読み込み完了、false なら未完了または読み込み中です。

widthプロパティとnaturalWidthプロパティの違いについて

widthプロパティとnaturalWidthプロパティの違いは、画像の表示と実際のファイルサイズに関連しています。

widthプロパティ

widthプロパティは、ウェブページ上で現在表示されている画像の幅を表します。
この値はCSSやHTML属性によって変更可能で、画面上での見た目の大きさを反映します。
例えば、大きな画像を小さく表示したり、小さな画像を拡大して表示したりした場合、その表示サイズがwidthプロパティに反映されます。

naturalWidthプロパティ

naturalWidthプロパティは、画像ファイル本来の幅を示します。
これは画像が作成された際の元のピクセル幅であり、ウェブページでの表示方法に関わらず一定です。CSSやHTML属性による変更の影響を受けず、常に画像ファイルの実際のサイズを返します。

値が取得できない場合

以下のデモでは、widthプロパティとheightプロパティの値が想定した値が取得できない場合です。

See the Pen Untitled by Muhiro (@muhiro) on CodePen.

こちらは”<img>”タグのsrc属性から画像の情報を取得しています。
srcプロパティを使用して画像を取得後にサイズ情報を取得しようとしておりますが、HTMLに追加処理をしていないためCSSが適応されておらず、widthプロパティとheightプロパティが画像自体のサイズを取得しています。
例えば、Node.appendChildメソッドやElement.insertAdjacentHTMLメソッドでHTMLに追加をしてから情報を取得することで、CSSが適応した状態の値を取得することができます。

この違いは、画像の表示を制御する際や、画像の元のサイズと表示サイズの比較が必要な場合に重要となります。
例えば、高解像度の画像を適切にスケーリングしたり、画像の品質を維持しながら表示サイズを調整したりする際に、これらのプロパティの違いを理解し活用することが有用です。

こちらはheightプロパティとnaturalHeightプロパティの違いにも共通します。

イベントハンドラ

img.onload = () => {};

画像の読み込みが正常に完了したときに呼び出されます。

img.onload = () => {
    console.log('画像が正常に読み込まれました');す
};

特徴：画像のサイズや内容にアクセスする前に、このイベントの発生を待つことが重要です。

img.onerror = () => {};

画像の読み込みが正常に完了したときに呼び出されます。

img.onerror = () => {
    console.log('画像の読み込み中にエラーが発生しました');
};

特徴：404エラー、ネットワークエラー、画像形式の問題などで発生します。

img.onabort = () => {};

画像の読み込みが中断されたときに呼び出されます。

img.onabort = () => {
    console.log('画像の読み込みが中断されました'); 
};

特徴：ユーザーが読み込みを中止した場合や、スクリプトが読み込みを中止した場合に発生します。

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、Imageオブジェクトについての解説をしました。

今回のポイントをまとめますと、次のとおりです。

Imageオブジェクトを使うと、画像の情報取得やエラーハンドリングが簡単に行えます。
これを活用することで、DOMに影響を与えず画像の操作ができるため、Webサイトのパフォーマンスを向上させたり、UXを改善したりすることができます！

最後までお読みいただきありがとうございました！