摘要：少年，我看你骨骼精奇，是萬中無一的武學(xué)奇才，我這有本圖片流秘籍，見與你有緣，就送于你了。文件大小，單位為字節(jié)，該屬性只讀。用來讀取或文件數(shù)據(jù)，基于文件大小不同，讀取的過程為異步。

少年，我看你骨骼精奇，是萬中無一的武學(xué)奇才，我這有本《圖片流》秘籍，見與你有緣，就送于你了。

本文所說的圖片流就是讀取本地圖片，并在頁面使用文件流的方式顯示出來。

首先，我們簡單說下文件上傳的幾種方式, 然后依次來實(shí)現(xiàn)它們

通過用戶點(diǎn)擊，創(chuàng)建,并監(jiān)聽change事件獲取file對(duì)象，大體如下

click = () => {
    let input = document.createElement("input")
    input.setAttribute("type", "file")
    input.setAttribute("accept", "image/*")
    
    input.onchange = event => {
        let file = event.target.files[0]
    }
    
    input.click()
    
} 

使用HTML5的拖放API，監(jiān)聽元素的drop事件，同樣是獲取file對(duì)象

會(huì)創(chuàng)建一個(gè)DataTransfer對(duì)象,下面我們還會(huì)遇到它，稍后再說

dragover = event => {
   event.preventDefault()
}

drop = event => {
    event.preventDefault()
    let files =  event.dataTransfer.files
}

給元素綁定粘貼事件，得益于contenteditable我們可以給所有元素添加，濤聲依舊，獲取event中包含的file

paste = (e) => {
    e.preventDefault()
    let file = e.clipboardData.files[0]
}

paste事件提供了一個(gè)clipboardData屬性，是一個(gè)DataTransfer類型的對(duì)象，前面我們說到，拖放會(huì)產(chǎn)生一個(gè)DataTransfer對(duì)象，沒錯(cuò)，粘貼也是它。

來來來，掀起了她的蓋頭來。

上面可以看到，clipboardData有如下屬性

dropEffect 默認(rèn)是node

effectAllowed 默認(rèn)是uninitialized

files 本地文件列表

items 剪切板中的各項(xiàng)數(shù)據(jù)

types 剪切板中的各項(xiàng)數(shù)據(jù)類型

我們只需要使用files即可，圖片文件在它里面

通常情況下， File 對(duì)象是來自用戶在一個(gè)元素上選擇文件后返回的 FileList 對(duì)象,也可以是來自由拖放操作生成的DataTransfer對(duì)象，繼承于Blob

廬山真面目，諾，就是這個(gè)樣子。

可以看到有如下屬性：

name：文件名，該屬性只讀。

size：文件大小，單位為字節(jié)，該屬性只讀。

type：文件的 MIME 類型，如果分辨不出類型，則為空字符串，該屬性只讀。

lastModified：文件的上次修改時(shí)間，格式為時(shí)間戳。

lastModifiedDate：文件的上次修改時(shí)間，格式為 Date 對(duì)象實(shí)例。

我們不去深究file對(duì)象，只需要知道通過它可以訪問本地的文件。

一個(gè) Blob對(duì)象表示一個(gè)不可變的, 原始數(shù)據(jù)的類似文件對(duì)象。Blob表示的數(shù)據(jù)不一定是一個(gè)JavaScript原生格式。 File 接口基于Blob，繼承 blob功能并將其擴(kuò)展為支持用戶系統(tǒng)上的文件。

var aBlob = new Blob( array, options );

array 是一個(gè)由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對(duì)象構(gòu)成的 Array ，或者其他類似對(duì)象的混合體，它將會(huì)被放進(jìn) Blob.

options 是一個(gè)可選的Blob熟悉字典，它可能會(huì)指定如下兩種屬性

type，默認(rèn)值為 “”，它代表了將會(huì)被放入到blob中的數(shù)組內(nèi)容的MIME類型。

endings，默認(rèn)值為”transparent”，它代表包含行結(jié)束符n的字符串如何被輸出。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
console.log(myBlob);

通過動(dòng)態(tài)創(chuàng)建blob，我們可以實(shí)現(xiàn)純前端下載

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${Date.now()}.doc`;
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);

Blob URL是blob協(xié)議的URL，格式如下

blob:http://localhost:1234/946644c4-ca98-405e-918c-759e790d0330

Blob URL可以通過URL.createObjectURL(blob)創(chuàng)建, 在每次調(diào)用createObjectURL()方法時(shí)，都會(huì)創(chuàng)建一個(gè)新的 URL 對(duì)象，即使你已經(jīng)用相同的對(duì)象作為參數(shù)創(chuàng)建過。

在不需要這些URL對(duì)象的時(shí)候， 通過URL.revokeObjectURL(objectURL) 釋放URL對(duì)象

使用Blob URL進(jìn)行顯示本地圖片，我們只需要把創(chuàng)建的URL賦值給img的src屬性就可以了。

FileReader用來讀取file或blob文件數(shù)據(jù)，基于文件大小不同，讀取的過程為異步。

let render = new FileReader()
render.onload = () => {
    let src = render.result
}
render.readAsDataURL(file)

FileReader讀取文件方法

readAsBinaryString file 將文件讀取為二進(jìn)制編碼

readAsBinaryArray file 將文件讀取為二進(jìn)制數(shù)組

readAsText file[, encoding] 按照格式將文件讀取為文本，encode默認(rèn)為UTF-8

readAsDataURL file 將文件讀取為DataUrl

使用FileReader進(jìn)行文件的讀取，就可以將圖片讀取成base64格式的了。

直接在FileReader實(shí)例的onload函數(shù)里面將result賦值給src即可

其實(shí)主要是兩種格式base64和blob，它們之間的差異如下

Blob URL的長度一般比較短

Blob URL可以方便的使用XMLHttpRequest獲取源數(shù)據(jù)， base64不是所有瀏覽器都支持

Blob URL 只能在當(dāng)前應(yīng)用內(nèi)部使用

canvas.toBlob(function (blobObj) {
    console.log(blobObj)
})

let imgSrc = canvas.toDataURL("image/png")

function dataURLtoBlob(dataurl) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], { type: mime });
}

前端利用Blob對(duì)象創(chuàng)建指定文件并下載

DataURL 與 File,Blob,canvas 對(duì)象之間的互相轉(zhuǎn)換

文本完整代碼，請(qǐng)戳github

各位，周末快樂。