最近在做一個(gè)裁剪圖片的需求，基于vue和elementui，裁剪完圖片遇到一個(gè)坑，elementui的upload組件接受一個(gè)promise，要求promise resolve一個(gè)File對象才可以使用新文件上傳，而canvas是轉(zhuǎn)成了blob對象，我google查了好久，沒有發(fā)現(xiàn)有blob對象轉(zhuǎn)File的文章，所以今天來寫一個(gè)吧！
使用FileReader 對象轉(zhuǎn)換：File => DataURL
該對象用于讀取文件（讀取單個(gè)對象文件，所以，不能直接讀取 Filelist 對象文件集合），即把文件內(nèi)容讀入內(nèi)存。它接收 File 對象或 Blob 對象，作為參數(shù)。
生成該對象的構(gòu)造函數(shù)方法如下：
var reader = new FileReader(); // 參數(shù)為 Blob 對象或 File 對象
對于不同類型的文件，F(xiàn)ileReader 使用不同的方法讀取。方法如下：
- readAsBinaryString(Blob|File)：返回二進(jìn)制字符串，該字符串每個(gè)字節(jié)包含一個(gè) 0 到 255 之間的整數(shù)。
- readAsText(Blob|File, opt_encoding) ：返回文本字符串。默認(rèn)情況下，文本編碼格式是'UTF-8'，可以通過可選的格式參數(shù)，指定其他編碼格式的文本。
- readAsDataURL(Blob|File)：返回一個(gè)基于 Base64 編碼的 data-uri 對象。
- readAsArrayBuffer(Blob|File) ：返回一個(gè) ArrayBuffer（數(shù)組緩存）對象。
- abort()：該方法用于中止文件上傳。
下面是獲取上傳對象的文本內(nèi)容的方法：
var reader = new FileReader();
reader.onload = function(e){
// target.result 該屬性表示目標(biāo)對象的DataURL
console.log(e.target.result);
}
// 傳入一個(gè)參數(shù)對象即可得到基于該參數(shù)對象的文本內(nèi)容
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()
具體的裁剪方法我下篇文章會(huì)寫
將dataurl轉(zhuǎn)換為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轉(zhuǎn)成File對象
其實(shí)我google找了一圈只有 File => Blob，沒人寫怎么用Blob => File 最終我在File中找到了File()構(gòu)造函數(shù)
let files = new window.File([this.blob], file.name, {type: file.type})
File()構(gòu)造函數(shù)的前兩個(gè)參數(shù)為必傳
