最近在做一個裁剪圖片的需求，基于vue和elementui寂殉，裁剪完圖片遇到一個坑，elementui的upload組件接受一個promise，要求promise resolve一個File對象才可以使用新文件上傳那先，而canvas是轉成了blob對象，我google查了好久赡艰，沒有發(fā)現有blob對象轉File的文章售淡，所以今天來寫一個吧！
使用FileReader 對象轉換：File => DataURL
該對象用于讀取文件（讀取單個對象文件，所以揖闸，不能直接讀取 Filelist 對象文件集合）苦掘，即把文件內容讀入內存。它接收 File 對象或 Blob 對象楔壤，作為參數鹤啡。
生成該對象的構造函數方法如下：
var reader = new FileReader(); // 參數為 Blob 對象或 File 對象
對于不同類型的文件，FileReader 使用不同的方法讀取蹲嚣。方法如下：
- readAsBinaryString(Blob|File)：返回二進制字符串递瑰，該字符串每個字節(jié)包含一個 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方法節(jié)剪切圖片夫啊。
先從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})
File()構造函數的前兩個參數為必傳
