javascript - Safari 上的 FileReader 即将启动

Question

我正在制作一个多部分 html 调查问卷样式表单，其中包含大量文本问题和一些图像。对于图像问题，用户选择图像，我创建一个 Canvas 元素并在文件输入下方显示调整大小的图像。

if (window.FileReader)
    {
        var file   = element.files[0];
        var $input = $(element);
        var $fileName = file.name;
        var reader = new FileReader();
        reader.onload = function(e) {

            var img = document.createElement("img");
            img.src = e.target.result;

            var dataID   = $input.data("questionId");

            var canvasID = "canvas_" + dataID;
            $("#"+canvasID).remove();

            var canvas = document.createElement("canvas");
            canvas.setAttribute("id", canvasID);
            canvas.setAttribute("height", "200");
            canvas.setAttribute("width", "200");

            var heightWidth = getHeightWidth(img);
            canvas.height = heightWidth[0];
            canvas.width  = heightWidth[1];

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img,0,0, canvas.width, canvas.height);

            var sectionID = "section_" + dataID;
            $("#" + sectionID).append(canvas);

            $("#file_title-" + dataID).val($fileName);
        }

        reader.readAsDataURL(file);
   }
   else
   {
        alert("This browser does not support image uploading.");
   }

这在 Chrome 中运行良好，但在桌面或 iOS 上的 safari (safari 8.x) 中运行不佳。我的代码中的问题是，在 Safari 上，它从 getHeightWidth() 返回 height=0 width=0 ，这让我认为 img 尚未准备好处理。这个理论得到了进一步验证，因为如果我更改为新图片并改回原始图片，它会正确显示。

我真的不知道从哪里开始，任何调试帮助将不胜感激。谢谢大家

Answer 1

代码假设图像加载是同步的，但它是异步的，即使使用数据 URI，也应该假设如此。如果图像未正确加载，其宽度和高度属性将为 0。

您可以通过为 img 添加一个 onload 处理程序来解决此问题，然后将用于检测和设置大小的代码移动到该处理程序中(还记得添加一个 onerror 处理程序作为以防图像文件损坏)。