.URL.createObjectURL

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

语法:

objectURL = URL.createObjectURL(blob || file);

参数:

File对象或者Blob对象

这里大概说下File对象和Blob对象:

File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象.

Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.

注意点:

每次调用createObjectURL的时候,一个新的URL对象就被创建了.即使你已经为同一个文件创建过一个URL. 如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法. 当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它.

二.URL.revokeObjectURL

URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

具体的意思就是说,一个对象URL,使用这个url是可以访问到指定的文件的,但是我可能只需要访问一次,一旦已经访问到了,这个对象URL就不再需要了,就被释放掉,被释放掉以后,这个对象URL就不再指向指定的文件了.

比如一张图片,我创建了一个对象URL,然后通过这个对象URL,我页面里加载了这张图.既然已经被加载,并且不需要再次加载这张图,那我就把这个对象URL释放,然后这个URL就不再指向这张图了.

语法:

window.URL.revokeObjectURL(objectURL);

参数:

objectURL 是一个通过URL.createObjectURL()方法创建的对象URL.

 

这两个方法不支持低版本浏览器.

最后,给个综合栗子:

通过ajax获取一张图片,显示在页面里.

html:

<body>

    <button id="getPic">获取图片的Blob数据</button>

</body>

js:

//获取图片Blob数据

      document.getElementById(‘getPic‘).onclick = function(e){

        $.ajax({

          type:‘GET‘,

          url:‘img.png‘,

          resDataType:‘blob‘,

          imgType:‘png‘,

          success:function(resText,resXML){

            var img = document.createElement(‘img‘);

            var objectUrl = window.URL.createObjectURL(resText);

            img.src = objectUrl;

            img.onload = function(){

              window.URL.revokeObjectURL(objectUrl);

            };

            document.body.appendChild(img);

          },

          fail:function(err){

            console.log(err)

          }

        });

        e.preventDefault();

      }

指定返回的数据格式为blob二进制数据.

通过返回的图片二进制数据来创建一个对象URL.

当图片加载完成后释放对象URL.

ajax.js:

var $={};

$.ajax = function(options){

    //1.获取参数

    var type = options.type.toUpperCase() || ‘GET‘;

    var resDataType = options.resDataType || ‘string‘;

    var reqDataType = options.reqDataType || ‘string‘;

    var url = options.url;

    var data = options.data;

    var success = options.success;

    var fail = options.fail;

    var progress = options.progress;

    var imgType = options.imgType || ‘jpg‘;

    //2.获取xhr对象

    var xhr = $.getXhr();

    //3.建立连接

    xhr.open(type,url);

    /*指定返回数据的格式需要在发送请求之前*/

    if(resDataType===‘blob‘){

        xhr.responseType = ‘blob‘;

    }

//4.发送请求

    if(type===‘GET‘){

        xhr.send(null)

    }

    else if(type===‘POST‘) {

        if(progress){

            xhr.upload.onprogress = progress;

        }

        if(reqDataType===‘json‘){

            xhr.setRequestHeader(‘Content-Type‘,‘application/json;charset=UTF-8‘);

            data = JSON.stringify(data);  //只能发送字符串格式的json,不能直接发送json

        }

        if(reqDataType===‘string‘){

            xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);

        }

        xhr.send(data);

    }

    //5.接收数据

    xhr.onreadystatechange = function(){

        if(this.readyState===4 && (this.status>=200 && this.status<300)){

            var res;

            if(resDataType===‘json‘){

                res = JSON.parse(this.responseText);

                success.call(this,res,this.responseXML)

            }

            if(resDataType===‘blob‘){

                res = new Blob([this.response],{type:‘image/‘+imgType});

                success.call(this,res)

            }

        }

    };

};

指定响应的格式是二进制数据.

使用xhr.response来获取响应的二进制数据,而不是xhr.responseText. 当定义了xhr.responseType=‘blob‘以后,xhr就没有responseText属性了.

这里虽然使用new Blob(),但其实不用它,直接返回xhr.response,一样是正确的.

参考原文: https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL

URL.createObjectURL() 与 URL.revokeObjectURL()的更多相关文章

  1. URL.createObjectURL和URL.revokeObjectURL

    一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里,新的对象URL ...

  2. JS获取当前网页内容，创建文件并下载，URL.createObjectURL和URL.revokeObjectURL

    有时候需要在前端侧对于动态生成的内容进行下载,比如页面上某一段文本信息,再比如对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借 ...

  3. 图片上传预览 （URL.createObjectURL）

    知识预备:1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定. ...

  4. URL.createObjectURL()

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  5. URL.createObjectURL()的使用方法

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  6. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  7. js图片前端预览之 filereader 和 window.URL.createObjectURL

    //preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...

  8. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  9. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

随机推荐

  1. CVE-2016-3714 - ImageMagick 命令执行

    ImageMagick是一款使用量很广的图片处理程序,很多厂商都调用了这个程序进行图片处理,包括图片的伸缩.切割.水印.格式转换等等.但近来有研究者发现,当用户传入一个包含『畸形内容』的图片的时候,就 ...

  2. [学习笔记] 多项式与快速傅里叶变换(FFT)基础

    引入 可能有不少OIer都知道FFT这个神奇的算法, 通过一系列玄学的变化就可以在 $O(nlog(n))$ 的总时间复杂度内计算出两个向量的卷积, 而代码量却非常小. 博主一年半前曾经因COGS的一 ...

  3. HTML 基本标签01

    ↑ !DOCTYPE 文档类型声明:让浏览器,按html5的标准对代码进行解释与执行 文档类型声明必不可少,而且,必须放在文档最上方 如果不写文档类型声明,浏览器会默认按照兼容模式运行,可能会出现不明 ...

  4. SSE图像算法优化系列十：简单的一个肤色检测算法的SSE优化。

    在很多场合需要高效率的肤色检测代码,本人常用的一个C++版本的代码如下所示: void IM_GetRoughSkinRegion(unsigned char *Src, unsigned char ...

  5. .Net Core 2.0生态（3）：ASP.NET Core 2.0 特性介绍和使用指南

    ASP.NET Core 2.0 发布日期:2017年8月14日 ASP.NET团队宣布ASP.NET Core 2.0正式发布,发布Visual Studio 2017 15.3支持ASP.NET ...

  6. Linux Socket多线程实现简单的多人聊天（pend）

    Server: 设置可聊天数为5,为每一个client创建一个线程,这个线程负责接收client的聊天内容并发给其他用户看. 用mutex同步各个线程修改聊天室空余聊天位. Client: 主线程负责 ...

  7. 使用Maven来创建WEB项目

    IDE: Eclipse Tool:Maven 1. 下载JDK,配置java环境变量 2.下载Maven,配置Maven环境变量 3. 利用Maven来创建WEB项目 (1)按照下面的截图流程创建m ...

  8. iOS的阴影绘制及性能优化

    今天来讲讲iOS开发过程中的阴影绘制及其潜在的绘图性能问题.虽然在开发过程中,我们使用阴影功能的机会不是很多,但是如果用了,有可能引起如卡顿等性能问题,所以,还是有必要来探究一下阴影的绘制过程,及如何 ...

  9. [UWP]了解模板化控件(5.2)：UserControl vs. TemplatedControl

    1. UserControl vs. TemplatedControl 在UWP中自定义控件常常会遇到这个问题:使用UserControl还是TemplatedControl来自定义控件. 1.1 使 ...

  10. 我读<代码整洁之道>--读书笔记整理

    第一章 整洁代码 "我可以列出我留意到的整洁代码的所有特点,但其中有一条是根本性的,整洁的代码总是看起来像是某位特别在意他的人写的.几乎没有改进的余地,代码作者设么都想到了,如果你企图改进它 ...