input type="file" で選択した画像ファイルの高さと幅をすぐに取得したい

実現したいこと

input type="file" で画像ファイルを選択した時、その時点で画像の高さと幅を取得したいです。

前提

htmlとjavascriptを使用して処理を作成しています。

発生している問題・エラーメッセージ

選択したファイルのサイズを変更して表示する処理を作成したいのですが、ファイルを選択した時点で画像の高さと幅を取得できなくて困っています。

該当のソースコード

html

<input type="file" id="img_id" onchange="hyoji(this.id, 'picture_id')" />
<img id="picture_id" />

javascript

function hyoji(file_id, img_id) {
    var file = document.getElementById('file_id').files[0];
    var img = document.getElementById('img_id');
    var blob = window.URL.createObjectURL(file);
    img.src = blob;
    alert(img.clientHeight);
}

試したこと

ファイルを選択した状態で、そこから再度別の画像を選択し直した場合、その時点で選択していた画像の高さと幅を取得できました。しかし、私は画像ファイルを選択した時点で、その選択した画像の高さと幅を取得したいです。alert(img.clientHeight); の部分を別のメソッドに分割して、hyoji()が終わった後にそのメソッドを実行しても結果は変わりませんでした。
誰か解決方法を教えて下さい。

補足情報（FW/ツールのバージョンなど）

退会済みユーザー

2023/04/25 13:04

質問者さん、無言ですが、回答がでているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。

行動規範の内容に同意します

回答3件

onchange イベントで選択された画像ファイルのプレビューを表示する場合、画像の高さや幅を取得するには、画像が読み込まれるのを待ってから取得する必要があります。画像が読み込まれるのを待つには、 load イベントを使用します。

以下は、画像ファイルが選択された時点で画像の高さと幅を取得し、それを console.log() で表示する例です。

html
1<input type="file" id="img_id" onchange="previewImage(this)" />

javascript
1function previewImage(input) {
2  if (input.files && input.files[0]) {
3    const reader = new FileReader();
4    reader.onload = function () {
5      const image = new Image();
6      image.onload = function () {
7        console.log('Width:', this.width);
8        console.log('Height:', this.height);
9      };
10      image.src = reader.result;
11    };
12    reader.readAsDataURL(input.files[0]);
13  }
14}

FileReader を使用して、選択されたファイルを読み込みます。その後、読み込まれたデータを Image オブジェクトにセットして、 load イベントで画像の高さと幅を取得しています。

reader.onload で Image オブジェクトの読み込みを開始し、 image.onload で画像の読み込みが完了したら、画像の高さと幅を取得することができます。読み込みが完了すると onload イベントが発生するので、そのイベントハンドラで画像の高さと幅を取得することができます。

投稿2023/04/24 22:15

ID_7UGzV8hCHGs5

総合スコア58

退会済みユーザー

2023/04/25 12:59

> reader.onload = function () { onloadend イベントでは？ FileReader.readAsDataURL() https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL

ID_7UGzV8hCHGs5

2023/04/25 15:56

おっしゃる通りです！勘違いしておりました。質問者さん、SurferOnWwwさんのコードは、CreateDataUrlとCreateImage関数を使用して、非同期処理を行いながら、画像のData urlを取得し、img要素にロードしています。この方法は非常に効率的であり、コードの可読性が高く、再利用性もあると思います。また、DOMContentLoaded イベントを使用して、遅延読み込みの最適化も行っています。このコードは、開発者にとって非常に役立つ方法を示しており、良い実装の例となっていると思います。

python_biginer

2023/04/26 14:00

回答していただきありがとうございます。自分の知識が余りにも不足しているため、細かな部分の理解が追い付いていませんが、一つ一つの意味について学習していこうと思います。

行動規範の内容に同意します

ベストアンサー

input type="file" でファイルの選択が完了すると change イベントが発生するのでそれにリスナをアタッチし、以下の処置を行うようにしてはいかがですか？

(1) input type="file" で選択された画像ファイルを FileReader オブジェクトに readAsDataURL メソッドを使って読み込む

(2) readAsDataURL メソッドは非同期で動くので、読み込み完了の onloadend イベントのリスナで FileReader から result プロパティで Data url を取得

(3) image オブジェクトを作ってその src 属性に Data url 設定

(4) image オブジェクトの src 属性に Data url が設定され画像のロードが完了すると onload イベントが発生するのでそのリスナで image オブジェクトの高さと幅を取得

【追記】

上の回答に書いたことをコーディングしたサンプルを載せておきます。

html
1<!DOCTYPE html>
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6    <title></title>
7    <script type="text/javascript">
8        window.addEventListener('DOMContentLoaded', () => {
9            const inputFile = document.getElementById('img_id');
10            const resultDiv = document.getElementById("result");            
11
12            inputFile.addEventListener('change', async () => {
13                //  選択された画像の Data url を取得
14                let dataUrl = await CreateDataUrl(inputFile.files[0]);
15
16                // 画像がロードされた img オブジェクトを取得
17                let img = await CreateImage(dataUrl);
18
19                resultDiv.innerText = `Size: ${img.width} x ${img.height}`;
20            });
21        });
22
23        // input type="file" から取得できる File オブジェクトを引数
24        // に渡す。FileReader オブジェクトを生成して readAsDataURL 
25        // メソッドで Data url を生成し、resolve コールバックの引数
26        // に設定 
27        const CreateDataUrl = file => {
28            return new Promise(resolve => {
29                const reader = new FileReader();
30                reader.addEventListener('loadend', e => resolve(e.target.result));
31                reader.readAsDataURL(file);
32            });
33        };
34
35        // 上のメソッドで生成された画像の Data url を引数に渡す。それ
36        // を img 要素の src 属性に代入。ロード完了後の img 要素を 
37        // resolve コールバックの引数に設定
38        const CreateImage = dataUrl => {
39            return new Promise(resolve => {
40                const img = document.getElementById('picture_id');
41                img.addEventListener('load', e => resolve(e.target));
42                img.src = dataUrl;
43            });
44        };
45    </script>
46</head>
47<body>
48    <input type="file" id="img_id" />
49    <div id="result"></div>
50    <img id="picture_id" />
51</body>
52</html>