image - Load Event on Image はモバイル ブラウザーでは機能しません

Question

FileReader API を使用して、ユーザーが写真をアップロードし、変更をコミットする前に写真のサムネイルを表示できるようにする次のスクリプト (この質問のために削除) があります。

        try {
        reader = new FileReader();
        reader.onload = (function (theImg) {
            return function (evt) {

                var img=new Image();
                img.src = evt.target.result;

                var canvas=document.createElement("canvas");
                var ctx=canvas.getContext("2d");
                var thumb_width = 200;
                var thumb_height = 150;

                img.onload = (function(){ 
                    var width = img.width;
                    var height = img.height;

                    if (width > height) {
                      if (width > thumb_width) {
                        height *= thumb_width / width;
                        width = thumb_width;
                      }
                    } else {
                      if (height > thumb_height) {
                        width *= thumb_height / height;
                        height = thumb_height;
                      }
                    }
                    canvas.width=width;
                    canvas.height=height;

                    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

                    //alert(canvas.toDataURL().length);                 
                    theImg.src = canvas.toDataURL();                        

                });
            };
        }(source_img));

        reader.readAsDataURL(file);

    } catch (e) {

        alert("\nUnfortunately this method of uploading photos is not supported by this browser\n\nYou will be redirected to a standard Upload Form\n");

        return false;
    }

これを Mac OS X (および Windows XP & 7) で Chrome を使用してテストすると、Safari と Opera は img.onload = (function(){ }); がなくても完全に動作します。しかし、画像がロードされる前に、ソース画像が空のキャンバスに割り当てられていたため、Firefox で必要でした。

素晴らしいので、SafariとChromeを使用してiPhoneでこれをテストするまで、すべてデスクトップで動作していました. デバイスで直接デバッグできないため、アラートを使用して、ソース画像が空のキャンバスに割り当てられていることを示すことができました。これは img.onload = (function(){ }); しかし、明らかにこれはモバイル ブラウザでは機能しません。

img.onload = (function(){ }); の代わりに次のことを試しました。

$(img).load(function() { });

そしてさえ

img.addEventListener("load", function () { }, false);

誰かにアイデアや提案があれば、助けていただければ幸いです。ありがとう。