質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2828閲覧

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

kutu

総合スコア257

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/01/08 00:34

https://teratail.com/questions/61153

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

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%正常動作した

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/01/08 04:04

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

回答2

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kutu

2017/01/09 14:26

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

2017/01/10 13:54

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

0

ベストアンサー

うまくいかないのは、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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kutu

2017/01/09 14:28

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

退会済みユーザー

2017/01/10 05:08

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

2017/01/11 03:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問