Question

我了解从客户端<img />对象在JavaScript中创建File元素的当前常用技术是这样的。

（File对象将来自文件拖放处理程序或<input type="file" /> change事件。）

function showImageFile( file: File ): void {

    let rdr = new FileReader();
    rdr.readAsDataURL( file );
    rdr.onloadend = function() {
        let img = document.createElement('img');
        img.src = rdr.result;
        document.body.appendChild( img );
    };
}

我不喜欢这样-将可能是几兆字节的图像序列化为base64编码的字符串的概念（因此，在现有{{1的顶部使用1.3x more }}对象），以及将字符串反序列化为File元素的代价-最终，这将导致图像数据的至少3个实例存在于内存中。对我来说，这似乎非常浪费并且效率低下，并且JavaScript应用程序已经因为内存消耗过多而表现不佳。

我注意到，对于MDN建议对<img />和<video>元素（<audio>）进行以下操作：

HTMLMediaElement

（警告：如果曾经替换function showVideoFile( file: File ): void { let video = document.createElement('video'); video.srcObject = URL.createObjectURL( file ); // createObjectURL creates a URI alias to the existing file instance in-memory }或删除了srcObject元素，则必须使用video手动释放先前的objectURL。

有什么办法可以为revokeObjectURL做同样的事情？（我没有看到<img />上的srcObject属性，并且HTMLImageElement并非源自HTMLImageElement）。不幸的是，在线搜索“没有数据URI的javascript图像文件”只会返回 about HTMLMediaElement页面，这与我想要的相反。

Answer 1

您设置了它的…src。

document.getElementById('file').onchange = function () {
    if (this.files.length !== 0) {
        var img = new Image();
        img.src = URL.createObjectURL(this.files[0]);
        document.body.appendChild(img);
    }
};

<input type="file" id="file" accept="image/*" />

Answer 2

在Google的黑暗和肮脏的信息矿井上花费了更多的时间后，我在2014年12月的文章http://bytes.schibsted.com/the-magic-of-createobjecturl/中发现了一块煤块，其中说HTMLImageElement的{{1}}属性确实实际上接受对象URI（phe！）

MDN也在其网站上进行了报道，尽管掩埋了一些地方：https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images

简而言之，我的src函数可以像这样更新：

showImageFile

或者如果function showImageFile( file: File ): void { let objectURI = URL.createObjectURL( file ); // looks like "blob:http://mywebsite/{guid}" let img = document.createElement('img'); img.src = objectURI ; document.body.appendChild( img ); }元素将被重用：

img

我们是否*必须使用数据：URI（readAsDataURL）以在JavaScript中将<img/>与File对象一起使用？

2 个答案: