代码之家 › 专栏 › 技术社区 › Dai

我们是否必须使用data:uri(readAsDataURL)在JavaScript中使用<img/>文件对象?

data-uri file javascript

Dai · 技术社区 · 6 年前

<img /> 来自客户端的JavaScript中的元素 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.3x) 内存位于现有内存之上对象)以及将字符串反序列化回 <img/> 元素-最终这将导致内存中至少存在3个图像数据实例。对我来说,这似乎是非常浪费和低效的,JavaScript应用程序已经因为过度的内存消耗而名声不佳。

<video> 和 <audio> 元素( HTMLMediaElement )MDN建议执行以下操作:

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/> SRC对象 财产 HTMLImageElement HTMLImageElement 不是源于 重元素 关于 readAsDataURL

2 回复 | 直到 6 年前

Ry- 6 年前

你设定了它的 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/*" />

Dai 6 年前

http://bytes.schibsted.com/the-magic-of-createobjecturl/ 也就是说 HTMLImageElement src 属性做实际接受一个对象URI(呸!)

MDN也在他们的网站上介绍了这一点,尽管有些隐秘: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images

简言之,我的 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 元素将被重用:

var img: HTMLImageElement;

function showImageFile( file: File ): void {

    let oldSrc = img.src;

    let objectURI = URL.createObjectURL( file );

    img.src = objectURI;

    if( oldSrc ) URL.revokeObjectURL( oldSrc );
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

3 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前

我们是否*必须*使用data:uri(readAsDataURL)在JavaScript中使用<img/>文件对象?

我们是否必须使用data:uri(readAsDataURL)在JavaScript中使用<img/>文件对象?