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

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

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

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

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

javascript
1function fix_photo(imageUrl, tObj){
2	console.log(imageUrl);
3　
4	//以下のloadImage()処理が有効だと、なぜかループ処理される
5	loadImage(
6	    imageUrl,
7	    function (img) {
8	        if(img.type === "error") {
9	            console.log("Error loading image " + imageUrl);
10	        } else {
11	        	jQuery(tObj).attr('src', imageUrl);
12	            //document.body.appendChild(img);
13	        }
14	    },
15	    {maxWidth: 600}
16	);
17}

html
1<img onload="javascript:fix_photo('http://domain/path/to/iphone.jpg', this)" src="http://domain/path/to/dummy.jpg">
2<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が無限に繰り返されてブラウザがハングアップしてしまいました

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

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

回答1件

ベストアンサー

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

無限ループの原理

画像を読み込む
画像の読み込みが完了しloadイベントが発生する
onloadイベントハンドラが呼び出され, fix_photo関数が呼び出される.
loadImageメソッドに渡しているコールバック関数内でjQuery(tObj).attr('src', imageUrl)を実行しているので, もとのimg要素のsrcプロパティが書き換わる
一番上に戻る

JavaScript
1function fix_photo(imageUrl, tObj){
2    console.log(imageUrl);
3　
4    //以下のloadImage()処理が有効だと、なぜかループ処理される
5    loadImage(
6        imageUrl,
7        function (img) {
8            if(img.type === "error") {
9                console.log("Error loading image " + imageUrl);
10            } else {
11                jQuery(tObj).attr('src', imageUrl);//←ここでsrcをいじっているのでfix_photoが何度も呼び出される！
12                //document.body.appendChild(img);
13            }
14        },
15        {maxWidth: 600}
16    );
17}
18

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

JavaScript
1function fix_photo(imageUrl, tObj){
2    console.log(imageUrl);
3　
4    //以下のloadImage()処理が有効だと、なぜかループ処理される
5    loadImage(
6        imageUrl,
7        function (img) {
8            if(img.type === "error") {
9                console.log("Error loading image " + imageUrl);
10            } else {
11                tObj.removeAttribute("onload");//これでsrcを弄っても問題なくなった
12                jQuery(tObj).attr('src', imageUrl);
13                //document.body.appendChild(img);
14            }
15        },
16        {maxWidth: 600}
17    );
18}
19