data url

data url的语法为：

data:[<mediatype>][;base64],<data>

说明：

（1）mediatype：设置内容类型，缺省为text/plain;charset=US-ASCII

（2）对于一些“小”的数据，可以使用data url在网页中直接嵌入，而不是从外部文件载入。

适用于html的img、iframe、link、script；css的background-image。

例如：

data:text/plain;charset=utf-8,你好，中文！

data:text/plain;charset=utf-8;base64,5L2g5aW977yM5Lit5paH77yB

data:text/html;charset=utf-8,

data:text/html;charset=utf-8;base64,

data:text/css;charset=utf-8,

data:text/css;charset=utf-8;base64,

data:text/javascript;charset=utf-8,

data:text/javascript;charset=utf-8;base64,

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHVK...

（3）动态生成data url（读取本地文件生成data url）

<div id="c"></div>

<form>

<input type="file" name="file1" id="file1" onchange=readit()">

</form>

<script>

function readit(){

  var file1=document.getElementById("file1").files[0];

  var fr=new FileReader();

  fr.readAsDataURL(fr);

  fr.onload=function(){

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

    img.src=this.result;

    document.getElementById("c").appendChild(img);

  }

}

</script>

blob url

blob：不可变，原始数据的类文件对象。

blob url只能通过动态生成，形如blob:http://，适用于html的img、iframe、link、script、audio、video等。

创建blob对象的语法为：

var blob=new Blob(array,options);

说明：

（1）array为设置数据。

（2）options为设置参数，主要有：

type：设置内容类型，取值有text/plain、text/html、text/css、text/javascript等，缺省为""。

例如：

var blob=new Blob(["<script>alert('hello world!')</script>"],{"type":"text/html"});

创建blob url的语法为：

var url=URL.createObjectURL(blob对象);

读取本地文件生成blob url

<div id="c"></div>

<form>

<input type="file" name="file1" id="file1" onchange=readit()">

</form>

<script>

function readit(){

  var fr=new FileReader();

  var file1=document.getElementById("file1").files[0];

  fr.readAsArrayBuffer(file1);

  fr.onload=function(){

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

    img.src=URL.createObjectURL(new Blob([this.result]));

    document.getElementById("c").appendChild(img);

  }

}

</script>

读取远程文件生成blob url（fetch）

<div id="c"></div>

<script>

__window.onload=function(){

  fetch("./images/m11.png").then(response=>{

    if(response.ok){

      response.blob().then(blob=>{

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

        img.src=URL.createObjectURL(blob);

        document.getElementById("c").appendChild(img);

      });

    }

  });

}

</script>

读取远程文件生成blob url（ajax）

<div id="c"></div>

<script>

__window.onload=function(){

  var xhr=new XMLHttpRequest();

  xhr.responseType="blob";

  xhr.onreadystatechange=function(){

    if(xhr.readyState==4&&xhr.status==200){

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

      img.src=URL.createObjectURL(xhr.response)

      document.getElementById("c").appendChild(img);

    }

  }

  xhr.open("get","./images/m11.png",true);

  xhr.send();

}

</script>