0

所以我使用这个函数从用户硬盘读取图像并将它们显示为缩略图，如果他们有一个能够使用 FileAPI 的浏览器：

// loop over them sequentially to prevent hogging memory
function load(i) {
    reader.onload = (function(file) {
        return function(e) {
            var loadNext = function(i) {
                if (data[i + 1] !== undefined) {
                    setTimeout(function() {
                        load(i + 1);
                    }, 100);
                }
            };

            if (e.target.result.match(/^data\:image\/.*$/) === null) {
                loadNext(i);
                return;
            }

            // output file name
            placeholders[i].custom.children.title.html(file.name);

            // the server has returned an error, don't load the image
            if (placeholders[i].custom.error === true) {
                placeholders[i].custom.update({loaded: true});
                loadNext(i);
                return;
            }

            // create new image
            var $image = $('<img />')
                .attr('alt', '')
                .attr('src', e.target.result)
                .attr('title', file.name);

            // setup remove link
            placeholders[i].custom.children.remove
                .click(function(event) {event.preventDefault();})
                .attr('data-file-name', file.name);

            // once finished loading
            $image.load(function() {
                if (placeholders[i].custom.error !== true) {
                    placeholders[i].addClass('success').attr('id', 'preview-' + file.name)
                    placeholders[i].custom.children.content.html($image);
                }
                placeholders[i].custom.update({loaded: true});

                loadNext(i);
            });
            return;
        }
    })(data[i]);

    reader.readAsDataURL(data[i]);
}
load(0);

问题是，如果他们上传特别大的文件或大量文件，那么 CPU 使用率（铬）和内存使用率（火狐）往往会飙升。

不久前我正在解决这个问题（我不得不停止这个项目并返回它）并且我设法通过确保文件（来自一个<input type="file" multiple="multiple" />元素）按顺序加载来解决一些问题。不幸的是，这仍然不够，所以我开始着手以块的形式加载数据，并在读取每个块（slice 和 readAsArrayBuffer）时添加一个短暂的延迟，这在很大程度上解决了读取问题。

如何将数组缓冲区中的数据输出到画布？我上次展示了一些东西，但它被打乱得面目全非。

4

1 回答 1

0

http://jsfiddle.net/8A3tP/1/

这就是我最终如何做到的。我使用window.btoa()将二进制数据（使用 readAsBinaryString 而不是 readAsArrayBuffer）转换为 base64 字符串。从那里我可以创建一个图像对象var image = document.createElement('img'); image.src = result;并使用它来填充画布 Canvas2DContext.drawImage(image, 0, 0);

于 2012-09-21T12:19:09.633 回答