使用 readAsDataURL() 进行图像预览

Posted 2023-05-07

【中文标题】使用 readAsDataURL() 进行图像预览

【英文标题】：Using readAsDataURL() for image preview

【发布时间】：2013-05-02 01:18:09

【问题描述】：

jsFiddle 网址：http://jsfiddle.net/Xotic750/AjtLx

整天都在处理这个问题，但我看不到问题所在。这可能是由于我对 FileReader 对象如何工作的理解狭隘，但我想做的是使用 readAsDataURL() 来获取用户选择的图像并在表格的屏幕上预览它们。一切都在工作减去......你猜对了......预览......好吧。我想我已经接近了，因为预览会起作用，但它只显示集合的最后一张图像。例如，如果我上传了 6 张图片，那么第一行的 3 张图片会损坏，第二行的前 2 张图片会损坏，然后最后的第 6 张图片将显示预览......任何建议都非常感谢。此外，一旦这可行，它可能会帮助其他人尝试做同样的事情，因为我已经到处寻找解决这个问题的方法，但我似乎无法挖掘任何东西......

function PreviewImages() 
    var inputID = document.getElementById('input_clone');
    var totalImages = inputID.files.length;
    var imagesPerRow = 3;
    var numRows = totalImages / imagesPerRow;
    var row = "";
    var cell = "";
    var element1 = "";
    var elementID = "";


    for(var i = 0; i < numRows; i++) //create rows
        row = document.getElementById('image_preview_table').insertRow(i);
        for(var ii = 0; ii < imagesPerRow; ii++) //create cells
            cell = row.insertCell(ii);
            elementID = "img_" + ii;
            element1 = document.createElement("img");
            element1.name = elementID;
            element1.id = elementID
            cell.appendChild(element1);

            oFReader = new FileReader();

            oFReader.onload = function(oFREvent)
                var dataURI = oFREvent.target.result;
                var image = document.getElementById(elementID);
                image.src = dataURI;
            ;

                oFReader.readAsDataURL(document.getElementById("input_clone").files[ii]);

    

【参考方案1】：

您的代码的问题是：readAsDataURL() 是异步的，您应该等到它完成读取后再调用第二次读取或通过调用 new FileReader() 创建一个新实例。

Xotic750 的答案很有效，因为他为每张图像创建了一个 FileReader，而您只使用了一个 FileReader。

但是，使用 FileReader 预览图像并不是一个好的选择，因为 FileReader.readAsDataURL() 会将整个图像转换为一个大字符串（形式为“data:image/jpeg;base64,/9j/4SVaRXhpZgAAS.. ....")，然后通过将整个图像数据字符串放入 img.src 属性来显示图像，如果图像很大，则冒着内存不足的风险。

img.src 旨在包含图像的 url，而不是图像的数据，尽管您可以通过 img.src = "data:image/jpeg;.... ..”。

因此，您应该使用 window.URL.createObjectURL() 创建一个引用本地图像的 url，并将此 url 分配给 img.src：

...
img.src = window.URL.createObjectURL(fileInput.files[i]);
...

【讨论】：

感谢您指出 dataUrl 和 问题，在加载中等大小的图像 (> 200kb) 时预览冻结 UI 时遇到了困难

【参考方案2】：

这是一个解决方案，您可能会注意到，对您的原件进行了相当多的调整以使其正常工作。

CSS

div.rounded 
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;

label 
    display: block;

input 
    display: block;

#previewTable 
    width: 100%;

html

<div id="imagesDiv" class="rounded">
    <label for="chooseFiles">Add Images</label>
    <input type="file" id="chooseFiles" multiple="multiple" />
    <table id="previewTable">
        <thead id="columns"></thead>
        <tbody id="previews"></tbody>
    </table>
</div>

javascript

(function (global) 
    var imagesPerRow = 3,
        chooseFiles,
        columns,
        previews;

    function PreviewImages() 
        var row;

        Array.prototype.forEach.call(chooseFiles.files, function (file, index) 
            var cindex = index % imagesPerRow,
                oFReader = new FileReader(),
                cell,
                image;

            if (cindex === 0) 
                row = previews.insertRow(Math.ceil(index / imagesPerRow));
            

            image = document.createElement("img");
            image.id = "img_" + index;
            image.style.width = "100%";
            image.style.height = "auto";
            cell = row.insertCell(cindex);
            cell.appendChild(image);

            oFReader.addEventListener("load", function assignImageSrc(evt) 
                image.src = evt.target.result;
                this.removeEventListener("load", assignImageSrc);
            , false);

            oFReader.readAsDataURL(file);
        );
    

    global.addEventListener("load", function windowLoadHandler() 
        global.removeEventListener("load", windowLoadHandler);
        chooseFiles = document.getElementById("chooseFiles");
        columns = document.getElementById("columns");
        previews = document.getElementById("previews");

        var row = columns.insertRow(-1),
            header,
            i;

        for (i = 0; i < imagesPerRow; i += 1) 
            header = row.insertCell(-1);
            header.style.width = (100 / imagesPerRow) + "%";
        

        chooseFiles.addEventListener("change", PreviewImages, false);
    , false);
(window));

开启jsfiddle

【讨论】：

不错！似乎在 chrome 中运行良好，但在 Firefox 中出现问题。

我自己看了一下，发现了问题。在removeEventListener 中，第二个参数实际上不是可选的。 Chrome 显然不会抱怨，但 Firefox 会抱怨。修改后的小提琴可以在jsfiddle.net/6cgTj/23找到。

@Ray Nicholas，是的，这就是 Firefox 的问题。我已经更新了，应该一切正常。