HTML5 file對象和blob對象的互相轉換

　　使用FileReader 對象轉換：File => DataURL

　　該對象用于讀取文件(讀取單個對象文件，所以，不能直接讀取 Filelist 對象文件集合)，即把文件內容讀入內存。它接收 File 對象或 Blob 對象，作為參數。

　　生成該對象的構造函數方法如下：

　　var reader = new FileReader(); // 參數為 Blob 對象或 File 對象

　　對于不同類型的文件，FileReader 使用不同的方法讀取。方法如下：

　　readAsBinaryString(Blob|File)：返回二進制字符串，該字符串每個字節包含一個 0 到 255 之間的整數。

　　readAsText(Blob|File, opt_encoding)

　?。悍祷匚谋咀址?。默認情況下，文本編碼格式是’UTF-8’，可以通過可選的格式參數，指定其他編碼格式的文本。

　　readAsDataURL(Blob|File)：返回一個基于 Base64 編碼的 data-uri 對象。

　　readAsArrayBuffer(Blob|File) ：返回一個 ArrayBuffer(數組緩存)對象。

　　abort()：該方法用于中止文件上傳。

　　下面是獲取上傳對象的文本內容的方法：

　　var reader = new FileReader();

　　reader.onload = function(e){

　　// target.result 該屬性表示目標對象的DataURL

　　console.log(e.target.result);

　　}

　　// 傳入一個參數對象即可得到基于該參數對象的文本內容

　　reader.rederAsDataURL(file);

　　利用canvas剪切圖片

　　CanvasRenderingContext2D.drawImage() 是 Canvas 2D API 中的方法，它提供了多種方式來在Canvas上繪制圖像，我們使用drawImage方法節剪切圖片。

　　先從canvas獲取剪切過的圖片DataURL

　　// 獲取canvas

　　let ctx = this.$refs.canvas.getContext('2d')

　　// 獲取圖片dom元素

　　let image = this.$refs.image

　　// 裁剪圖片200 * 200圖片

　　ctx.drawImage(image, x, y, w, h, 0, 0, 200, 200)

　　// canvas生成剪切過的圖片DataURL

　　this.cutAvater = this.$refs.canvas.toDataURL()

　　將dataurl轉換為Blob對象

　　let arr = this.cutAvater.split(',')

　　let data = window.atob(arr[1])

　　let mime = arr[0].match(/:(.*?);/)[1]

　　let ia = new Uint8Array(data.length)

　　for (var i = 0; i < data.length; i++) {

　　ia[i] = data.charCodeAt(i)

　　}

　　this.blob = new Blob([ia], {type: mime})

　　利用File Api講blob轉成File對象

　　其實我google找了一圈只有 File => Blob，沒人寫怎么用Blob => File

　　最終我在File中找到了File()構造函數

　　let files = new window.File([this.blob], file.name, {type: file.type})