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>
