FireFoxで画像ファイルを読み込みJavaScriptで操作したいが読み込みができる前に動作してしまう
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 1,779
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%正常動作した
これらの理由や対策分かる方いらっしゃいますでしょうか？
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+4
FileReaderオブジェクトを使った画像の選択、表示は次のように行うことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<input type="file" id="fileUpload">
<img src="#" id="uploadImage" alt="アップロード">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#fileUpload").on("change", function () {
let fileReader = new FileReader();
fileReader.onload = function (e) {
$('#uploadImage').attr('src', e.target.result);
};
fileReader.readAsDataURL(this.files[0]);
});
});
</script>
</body>
</html>追記
Image()を使うことでwidth, heightが取得できると思いますが。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<input type="file" id="fileUpload">
<img src="#" id="uploadImage" alt="アップロード">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#fileUpload").on("change", function () {
let fileReader = new FileReader();
fileReader.onload = function () {
let image = new Image();
image.src = fileReader.result;//読み込まれたファイルの内容
image.onload = function () {
alert(image.width + " : " + image.height);
$('#uploadImage').attr("src", image.src);//画像のURLをソースに設定
};
};
fileReader.readAsDataURL(this.files[0]);
});
});
</script>
</body>
</html>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+3
うまくいかないのは、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>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.92%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
SurferOnWww
2017/01/08 13:04
今さらながらですが、前のスレッド 61153 を見ましたが 、私の答えと同じ内容の答えがあってベストアンサーマークがつけてありますが・・・ そうすると、下の私の回答も理解されないような気がしますが、どうでしょう?