[TOC]
* * * * *
[參考文章一](https://javascript.ruanyifeng.com/htmlapi/file.html#toc0)
[參考文章二](https://www.jianshu.com/p/4d014a45aaf7)
### `Blob` API
1. `Blob` API 允許我們通過js直接操作二進制數據
> 一個Blob對象就是一個包含有只讀原始數據的類文件對象。Blob對象中的數據并不一定得是JavaScript中的原生形式。File接口基于Blob，繼承了Blob的功能,并且擴展支持了用戶計算機上的本地文件。
2. `Blob` 語法
`new Blob(dataArray,option)`
- dataArray：數組，包含了要添加到Blob對象中的數據，數據可以是任意多個ArrayBuffer，ArrayBufferView， Blob，或者 DOMString對象。
- option：對象，用于設置Blob對象的屬性（如：[MIME類型](http://www.w3school.com.cn/media/media_mimeref.asp)）
3. `Blob` 的使用
將字符串元素轉化為二進制
```JavaScript
let div = "<div>我是div</div>"
let blob = new Blob([div],{type:'text/html'})
// Blob(13)?{size: 13, type: "text/html"}
```
`Blob` 還有一個`slice`方法，返回一個新的`Blob`對象，包含了源`Blob`對象中指定范圍內的數據
```JavaScript
blob.slice(start,end)
```
- start: 可選，代表要拷貝的起始位置
- end: 可選，代表要拷貝的結束位置，默認到結束位置
例如：
```JavaScript
let div = "<div>我是div</div>"
let blob = new Blob([div],{type:'text/html'}) // Blob(13)?{size: 13, type: "text/html"}
let copyBlob = blob.slice(0,3) //Blob(3)?{size: 3, type: ""}
```
### `Blob URL`
Blob URL是blob協議的URL，它的格式如下：
```JavaScript
blob:http://XXX
```
Blob URL可以通過URL.createObjectURL(blob)創建。在絕大部分場景下，我們可以像使用Http協議的URL一樣，使用Blob URL。常見的場景有：作為文件的下載地址和作為圖片資源地址。
**1. 文件下載**
```HTML
<a href="" id="download">點擊下載</a>
<script>
let div = "<div>我是div</div>"
let blob = new Blob([div],{type:'text/html'})
let blobUrl = URL.createObjectURL(blob)
let a = document.getElementById('download')
a.href = blobUrl
a.download = "blob"
</script>
```
上邊代碼單點擊`a`標簽時，會下載一個名為 `blob`的`html`文件
**2.圖片資源**
```HTML
<input type="file" id="inp">
<img src="" alt="blob"/>
<script>
let inp = document.getElementById("inp")
let img = document.querySelector('img')
inp.onchange = function(e){
let file = e.target.files[0]
let blobUrl = URL.createObjectURL(file)
img.src = blobUrl
}
</script>
```
上邊上傳圖片后，圖片會自動加載出來
這個URL可以放置于任何通常可以放置URL的地方，比如img標簽的src屬性。需要注意的是，即使是同樣的二進制數據，每調用一次URL.createObjectURL方法，就會得到一個不一樣的URL。
這個URL的存在時間，等同于網頁的存在時間，一旦網頁刷新或卸載，這個URL就失效。除此之外，也可以手動調用URL.revokeObjectURL方法，使URL失效。
```JavaScript
window.URL.revokeObjectURL(objectURL);
```
比如上面我們加載圖片資源后，可以釋放createObjectURL創建的對象
```JavaScript
inp.onchange = function(e){
let file = e.target.files[0]
let blobUrl = URL.createObjectURL(file)
img.src = blobUrl
}
img.onload = function(){
URL.revokeObjectURL(this.src);
}
```
**3. Blob URL 和 DataURL 的區別**
- `Blob URL`的長度一般比較短，但`Data URL`因為直接存儲圖片`base64`編碼后的數據，往往很長，如上圖所示，瀏覽器在顯示Data URL時使用了省略號（…）。當顯式大圖片時，使用`Blob URL`能獲取更好的可能性。
- `Blob URL`可以方便的使用`XMLHttpRequest`獲取源數據，對于`Data URL`，并不是所有瀏覽器都支持通過`XMLHttpRequest`獲取源數據的。
- `Blob URL` 只能在當前應用內部使用，把`Blob URL`復制到瀏覽器的地址欄中，是無法獲取數據的。`Data URL`相比之下，就有很好的移植性，你可以在任意瀏覽器中使用。
