3

我有以下脚本（针对这个问题进行了精简），它使用 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 进行测试时，即使没有 img.onload = (function(){ }); ，Safari 和 Opera 也能完美运行。但在 Firefox 中需要它，因为在加载图像之前，源图像被分配给一个空的画布。

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

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

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

乃至

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

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

4

0 回答 0