在图像上加载事件不适用于移动浏览器

时间:2013-12-03 22:02:31

标签: image canvas onload filereader todataurl

我有以下脚本(针对此问题进行了细分),该脚本使用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;
    }

使用Chrome在Mac OS X(和Windows XP& 7)上测试时,即使没有img.onload =(function(){}),Safari和Opera也能正常运行;但是在Firefox中需要它,因为在加载图像之前,源图像被分配给空白画布。

很好,所以都在桌面上工作,直到我尝试使用Safari和Chrome在我的iPhone上进行测试。由于我无法直接在我的设备上调试,我设法使用警报来显示有时源图像被分配给空画布,我认为这将由img.onload =(function(){})修复;但显然这在移动浏览器中不起作用,除非其他因素导致其失败。

我尝试了以下代替img.onload =(function(){});

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

甚至

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

如果有人有任何想法或建议,我将不胜感激。感谢。

0 个答案:

没有答案