# Blob對象
一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。Blob表示的數據不一定是一個JavaScript原生格式。[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)接口基于Blob，繼承 blob功能并將其擴展為支持用戶系統上的文件。
> 數據類型 Blob 對象是在HTML5中，新增了File API。
## 構造Blob對象
生成Blob對象有兩種方法：一種是使用Blob構造函數，另一種是對已有的Blob對象使用slice()方法切出一段。
### Blob構造函數
~~~
var blob = new Blob(data[, options]))
~~~
返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。
Blob構造函數接受兩個參數：
參數data是一組數據，所以必須是數組，即使只有一個字符串也必須用數組裝起來.
參數options是對這一Blob對象的配置屬性，目前也只有一個type也就是相關的MIME需要設置 type的值： ‘text/csv,charset=UTF-8’ 設置為csv格式，并設置編碼為UTF-8，’text/html’ 設置成html格式。
> 注意：任何瀏覽器支持的類型都可以這么用
~~~
var blob = new Blob(['我是Blob'],{type: 'text/html'});
~~~
### Blob屬性
~~~
blob.size //Blob大小（以字節為單位）
blob.type //Blob的MIME類型，如果是未知，則是“ ”（空字符串）
~~~
### slice() 創建
slice()返回一個新的Blob對象，包含了源Blob對象中指定范圍內的數據。
~~~
Blob.slice([start[, end[, contentType]]])
~~~
參數說明：
start 可選，開始索引,可以為負數,語法類似于數組的slice方法.默認值為0.
end 可選，結束索引,可以為負數,語法類似于數組的slice方法.默認值為最后一個索引.
contentType可選 ，新的Blob對象的MIME類型,這個值將會成為新的Blob對象的type屬性的值,默認為一個空字符串.
## URL.createObjectURL()
URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
~~~
objectURL = URL.createObjectURL(blob);
~~~
使用URL.createObjectURL()函數可以創建一個Blob URL，參數blob是用來創建URL的File對象或者Blob對象，返回值格式是：blob://URL。
> 在每次調用 createObjectURL() 方法時，都會創建一個新的 URL 對象，即使你已經用相同的對象作為參數創建過。當不再需要這些 URL 對象時，每個對象必須通過調用 URL.revokeObjectURL() 方法傳入創建的URL為參數，用來釋放它。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內存使用狀況，應該在安全的時機主動釋放掉它們。
## URL.revokeObjectURL()
URL.revokeObjectURL() 靜態方法用來釋放一個之前通過調用 URL.createObjectURL() 創建的已經存在的 URL 對象。當你結束使用某個 URL 對象時，應該通過調用這個方法來讓瀏覽器知道不再需要保持這個文件的引用了。
~~~
window.URL.revokeObjectURL(objectURL);
~~~
> 參數: objectURL 是一個通過URL.createObjectURL()方法創建的對象URL.
## Blob的使用
1. 使用Blob最簡單的方法就是創建一個URL來指向Blob：
~~~
<a download="data.txt" id="getData">下載</a>
var data= 'Hello world!';
var blob = new Blob([data], {
type: 'text/html,charset=UTF-8'
});
window.URL = window.URL || window.webkitURL;
document.querySelector("#getData").href = URL.createObjectURL(blob);
~~~
上面的代碼將Blob URL賦值給a，點擊后提示下載文本文件data.txt，文件內容為“Hello World”。
2.Blob 響應
~~~
window.URL = window.URL || window.webkitURL; // Take care of vendor prefixes.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement('img');
var URL = window.URL || window.webkitURL; //兼容處理
var objectUrl = URL.createObjectURL(blob);
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // 釋放 url.
};
img.src = objectUrl;
document.body.appendChild(img);
...
}
};
xhr.send();
~~~
## 總結
目前，Blob對象大多是運用在，處理大文件分割上傳（利用Blob中slice方法），處理圖片canvas跨域(避免增加crossOrigin = "Anonymous",生成當前域名的url，然后 URL.revokeObjectURL()釋放，createjs有用到)，以及隱藏視頻源路徑等等。
① 大文件分割上傳
~~~
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);
})();
~~~
② 圖片跨域請求，處理跨域問題，參考[createjs ImageLoader.js](http://createjs.com/docs/preloadjs/files/preloadjs_loaders_ImageLoader.js.html#l37)
③ 隱藏視頻源路徑
~~~
var video = document.getElementById('video');
var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);
~~~
轉載：[https://juejin.im/entry/5937c98eac502e0068cf31ae](https://juejin.im/entry/5937c98eac502e0068cf31ae)
參考資料：
[文件和二進制數據的操作](http://javascript.ruanyifeng.com/htmlapi/file.html)
[XMLHttpRequest2 新技巧](https://www.html5rocks.com/zh/tutorials/file/xhr2/)
[URL.createObjectURL()](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL)
[Sending and Receiving Binary Data](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data)
[createjs ImageLoader.js](http://createjs.com/docs/preloadjs/files/preloadjs_loaders_ImageLoader.js.html#l37)
[URL.createObjectURL和URL.revokeObjectURL](http://www.cnblogs.com/liulangmao/p/4262565.html)
