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 中工作正常，但在桌面上的 safari (safari 8.x) 或 iOS 中无效。我的代码中的问题是，在 Safari 上它来自 getHeightWidth() 的 returns height=0 width=0 这让我认为 img 还没有准备好被处理。这个理论得到了进一步验证，因为如果我换一张新图片，然后再换回原来的图片，它就能正常显示。

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

Answer 1

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

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

Safari 上的 FileReader 即将启动

FileReader on safari firing to soon

javascript

canvas

safari

filereader