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

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

ただいまの
回答率

90.51%

  • JavaScript

    20325questions

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

  • iOS

    4671questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

  • iPhone

    1106questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

iPhoneからの画像の回転表示対策:JavaScript-Load-Image

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 521

taaa

score 20

iPhoneで撮影された画像のアップロードで、htmlに表示するとき、画像が回転されてしまうエラーを解決したいと思っています

ライブラリJavaScript-Load-Imageを使い、

1)<img>のonloadで出力する画像のURLをfunction関数 fix_photoに渡して、
2)その内部でJavaScript-Load-Imageを利用してcanvasに回転修正したものを生成
3)それをjpgに変換して表示

という処理をしたいのですが、 (1)の時点で引っかかっています

function fix_photo(imageUrl, tObj){
    console.log(imageUrl);
 
    //以下のloadImage()処理が有効だと、なぜかループ処理される
    loadImage(
        imageUrl,
        function (img) {
            if(img.type === "error") {
                console.log("Error loading image " + imageUrl);
            } else {
                jQuery(tObj).attr('src', imageUrl);
                //document.body.appendChild(img);
            }
        },
        {maxWidth: 600}
    );
}
<img onload="javascript:fix_photo('http://domain/path/to/iphone.jpg', this)" src="http://domain/path/to/dummy.jpg">
<img onload="javascript:fix_photo('http://domain/path/to/iphone.jpg', this)" src="http://domain/path/to/dummy.jpg">

上記のような単純な処理で、
とりあえず対象の画像URLをfunction内に取り込めてるか console.log()で確認すると正常に表示されたのですが、
その後、「loadImage(~~);」を追記したところ、console.logが無限に繰り返されてブラウザがハングアップしてしまいました

何が原因でしょうか
ご意見ご回答よろしくお願いします

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

img要素のonloadイベントハンドラ内でsrcプロパティを弄っていれば, そりゃイベントループに陥ります. 

無限ループの原理

  • 画像を読み込む
  • 画像の読み込みが完了しloadイベントが発生する
  • onloadイベントハンドラが呼び出され, fix_photo関数が呼び出される.
  • loadImageメソッドに渡しているコールバック関数内でjQuery(tObj).attr('src', imageUrl)を実行しているので, もとのimg要素のsrcプロパティが書き換わる
  • 一番上に戻る
function fix_photo(imageUrl, tObj){
    console.log(imageUrl);
 
    //以下のloadImage()処理が有効だと、なぜかループ処理される
    loadImage(
        imageUrl,
        function (img) {
            if(img.type === "error") {
                console.log("Error loading image " + imageUrl);
            } else {
                jQuery(tObj).attr('src', imageUrl);//←ここでsrcをいじっているのでfix_photoが何度も呼び出される!
                //document.body.appendChild(img);
            }
        },
        {maxWidth: 600}
    );
}

で, どうすればこの問題を解決できるかというと, 上のループを断ち切れば良いのです. つまり, onloadイベントハンドラを無効化すれば処理は止まります. 

function fix_photo(imageUrl, tObj){
    console.log(imageUrl);
 
    //以下のloadImage()処理が有効だと、なぜかループ処理される
    loadImage(
        imageUrl,
        function (img) {
            if(img.type === "error") {
                console.log("Error loading image " + imageUrl);
            } else {
                tObj.removeAttribute("onload");//これでsrcを弄っても問題なくなった
                jQuery(tObj).attr('src', imageUrl);
                //document.body.appendChild(img);
            }
        },
        {maxWidth: 600}
    );
}

NOTE:
ざっと見, onloadイベントを使っている意味がわからないので, もう少しコードを整理した方が良さそうです.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/17 15:40

    ありがとうございました!
    非常にお恥ずかしい、検証不足というかアホ丸出しでお手を煩わせました
    また何かありましたらよろしくお願いします

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20325questions

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

  • iOS

    4671questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

  • iPhone

    1106questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。