FireFoxで画像ファイルを読み込みJavaScriptで操作したいが読み込みができる前に動作してしまう

で質問したことを調査してもう少しわかったので再度質問させていただきます
出来ればサンプルソース等でお教えいただけるとありがたいです

FireFox(PCでもスマートフォンでも)でフォームからファイル選択をし、画像ファイルを選択
その後、そのファイルのデータを利用しての処理を行いたいが
うまくいかない

var file = $(this).prop('files')[0];
var fr = new FileReader();
fr.onload = function() {
    $('img#image').attr('src', fr.result);
    img = new Image();
    img.src = fr.result;

    if(img.width > 0){
        ooooo();
    }
};
fr.readAsDataURL(file);

上記のようなソースにしている。
Webkitで行った場合、
img
に正常にデータが入り、ooooo()が動作するのだが
FireFoxの場合imgがnullになる場合が多々ある(正常に動作する場合もある)

なお
img.src = fr.result;
の前の行に
alert(1);
などのように
・alertを表示
・OKをクリックでアラートを消す
とした場合、100%正常動作した

これらの理由や対策分かる方いらっしゃいますでしょうか？

退会済みユーザー

2017/01/08 04:04

今さらながらですが、前のスレッド 61153 を見ましたが、私の答えと同じ内容の答えがあってベストアンサーマークがつけてありますが・・・そうすると、下の私の回答も理解されないような気がしますが、どうでしょう?

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

回答2件

FileReaderオブジェクトを使った画像の選択、表示は次のように行うことができます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<input type="file" id="fileUpload">
9<img src="#" id="uploadImage" alt="アップロード">
10<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
11<script>
12    $(document).ready(function () {
13        $("#fileUpload").on("change", function () {
14            let fileReader = new FileReader();
15            fileReader.onload = function (e) {
16                $('#uploadImage').attr('src', e.target.result);
17            };
18            fileReader.readAsDataURL(this.files[0]);
19        });
20    });
21</script>
22</body>
23</html>

追記

Image()を使うことでwidth, heightが取得できると思いますが。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<input type="file" id="fileUpload">
9<img src="#" id="uploadImage" alt="アップロード">
10<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
11<script>
12    $(document).ready(function () {
13        $("#fileUpload").on("change", function () {
14            let fileReader = new FileReader();
15            fileReader.onload = function () {
16                let image = new Image();
17                image.src = fileReader.result;//読み込まれたファイルの内容
18                image.onload = function () {
19                    alert(image.width + " : " + image.height);
20                    $('#uploadImage').attr("src", image.src);//画像のURLをソースに設定
21                };
22            };
23            fileReader.readAsDataURL(this.files[0]);
24        });
25    });
26</script>
27</body>
28</html>

投稿2017/01/08 00:52

編集2017/01/09 21:00

s8_chu

総合スコア14731

maru

2017/01/09 14:26

画像の選択、表示を行いたいというよりは画像情報が正確に取得できていないんですよその理由がわからなくて・・

s8_chu

2017/01/10 13:54

追記しましたコードをfirefoxで動かしましたが、画像の幅や高さが取得できない状態は確認できませんでした。質問文にあるコードに詳しい記述がないので断定はできませんが、ooooo関数に何か問題がある可能性もあるのではないかと思います。

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

ベストアンサー

うまくいかないのは、width を取得しようとしている時点では、画像データの読み込みが完了してないからでしょう。

src に設定した画像データの読み込みが完了すると、image.onload イベントが発生するので、そのハンドラで処置を行うとうまくいくと思います。

********* 2017/1/10 14:15 追記 *********

2017/01/10 14:08 の私のコメントで書きましたようにコード例をアップしておきます。コピペすれば動くはずなのでお試しください。これと質問者さんのやりらいことが違う場合は、どこだどのように違うか具体的に書いてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
        // HTML5 File API の FileReader を利用して <input type="file"... /> で選択
        // された画像ファイルを読み込み、その画像の Data url 形式文字列を取得。
        // それを image オブジェクトの src 属性に設定する。その際 image.onload イベ
        // ントが発生するのでそのイベントにリスナをアタッチ。そのリスナの中で image
        // オブジェクトが保持する画像のサイズを取得する。

        // 以下の 3 行はそのための準備
        var fileReader;
        var image = new Image();
        image.onload = DrawImageOnCanvas;

        // document の読み込み完了後に { } 内の処置を行う
        $(function () {
            // ブラウザの HTML5 File API サポートを確認
            if (window.File && window.FileReader && window.FileList) {
                fileReader = new FileReader();

                // FileReader オブジェクトに画像を読み込むメソッド readAsDataURL は
                // 非同期で動くので、読み込み完了のイベント onloadend を待って、その
                // リスナで FileReader から Data url を取得し image オブジェクトの
                // src 属性に設定する。
                fileReader.onloadend = function () {
                    image.src = fileReader.result;
                };

                // <input type="file"... /> でファイルの選択が完了すると change
                // イベントが発生するのでそれにリスナをアタッチし処置を行う。
                $("#fileupload").change(function () {
                    var fileUpload = document.getElementById("fileupload");

                    // fileReader オブジェクトに <input type="file"... /> で選択
                    // された画像ファイルを読み込む
                    fileReader.readAsDataURL(fileUpload.files[0]);
                });
            } else {
                $('#result').text('File API がサポートされてません。');
            }
        });

        // 上で定義した image オブジェクトの src 属性に Data url が設定されると発生
        // する onload イベントのリスナ
        function DrawImageOnCanvas() {
            // オリジナル画像のサイズ
            var w = image.width;
            var h = image.height;

            $('#result').text('width: ' + w + ', height: ' + h);
        }          
    //]]>
    </script>
</head>
<body>
    <input id="fileupload" type="file" />
    <div id="result"></div>
</body>
</html>

投稿2017/01/08 03:06

編集2017/01/10 05:13

退会済みユーザー

総合スコア0

maru

2017/01/09 14:28

はい、正直どこの部分に image.onload をどのように差し込めばよいのかがわかりません。 ``` img = new Image(); img.src = fr.result; img.onload = function(){ if(img.width > 0){ ooooo(); } } ``` で良いのでしょうか？

退会済みユーザー

2017/01/09 16:12

それをやってみてどうなりました？　ダメだったのではないかと想像していますが・・・であれば、以下の記事のコードが参考になりませんか？ canvas の画像をアップロード http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

退会済みユーザー

2017/01/10 05:08

HTML5 File API の FileReader を利用して <input type="file"... /> で選択された画像ファイルを読み込み、オリジナル画像のサイズを取得するまでを、上に紹介した記事からその目的に不要な部分を削除して作ったので、ご参考にそれを回答欄にアップしておきます。コピペすれば動くはずなのでお試しください。これと質問者さんのやりらいことが違う場合は、どこだどのように違うか具体的に書いてください。

maru

2017/01/11 03:35

教えていただいた方法でうまくいきましたありがとうございます。

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

あなたの回答