少俠，留步，圖片預覽術

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

圖片流

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

首先，咱們簡單說下文件上傳的幾種方式, 而後依次來實現它們

上傳方式

input

經過用戶點擊，建立<input type="file" accept="image/*"/>,並監聽change事件獲取file對象，大致以下

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()
    
}

Drag && drop

使用HTML5的拖放API，監聽元素的drop事件，一樣是獲取file對象

會建立一個DataTransfer對象,下面咱們還會遇到它，稍後再說

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

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

paste

給元素綁定粘貼事件，得益於contenteditable咱們能夠給全部元素添加，濤聲依舊，獲取event中包含的file

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

clipboardData

paste事件提供了一個clipboardData屬性，是一個DataTransfer類型的對象，前面咱們說到，拖放會產生一個DataTransfer對象，沒錯，粘貼也是它。

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

上面能夠看到，clipboardData有以下屬性

• dropEffect 默認是node
• effectAllowed 默認是uninitialized
• files 本地文件列表
• items 剪切板中的各項數據
• types 剪切板中的各項數據類型

咱們只須要使用files便可，圖片文件在它裏面

文件格式

file

一般狀況下， File 對象是來自用戶在一個 <input>元素上選擇文件後返回的 FileList 對象,也能夠是來自由拖放操做生成的 DataTransfer對象，繼承於 Blob

廬山真面目，諾，就是這個樣子。

能夠看到有以下屬性：

• name：文件名，該屬性只讀。
• size：文件大小，單位爲字節，該屬性只讀。
• type：文件的 MIME 類型，若是分辨不出類型，則爲空字符串，該屬性只讀。
• lastModified：文件的上次修改時間，格式爲時間戳。
• lastModifiedDate：文件的上次修改時間，格式爲 Date 對象實例。

咱們不去深究file對象，只須要知道經過它能夠訪問本地的文件。

blob

一個 Blob對象表示一個不可變的, 原始數據的相似文件對象。Blob表示的數據不必定是一個JavaScript原生格式。 File 接口基於Blob，繼承 blob功能並將其擴展爲支持用戶系統上的文件。

建立blob對象

var aBlob = new Blob( array, options );

• array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其餘相似對象的混合體，它將會被放進 Blob.

• options 是一個可選的Blob熟悉字典，它可能會指定以下兩種屬性

  • type，默認值爲 「」，它表明了將會被放入到blob中的數組內容的MIME類型。
  • endings，默認值爲」transparent」，它表明包含行結束符n的字符串如何被輸出。

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

經過動態建立blob，咱們能夠實現純前端下載

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 URL是blob協議的URL，格式以下

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

Blob URL能夠經過URL.createObjectURL(blob)建立, 在每次調用createObjectURL()方法時，都會建立一個新的 URL 對象，即便你已經用相同的對象做爲參數建立過。

在不須要這些URL對象的時候， 經過URL.revokeObjectURL(objectURL) 釋放URL對象

使用Blob URL進行顯示本地圖片，咱們只須要把建立的URL賦值給img的src屬性就能夠了。

FileReader

FileReader用來讀取file或blob文件數據，基於文件大小不一樣，讀取的過程爲異步。

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

FileReader讀取文件方法

• readAsBinaryString file 將文件讀取爲二進制編碼
• readAsBinaryArray file 將文件讀取爲二進制數組
• readAsText file[, encoding] 按照格式將文件讀取爲文本，encode默認爲UTF-8
• readAsDataURL file 將文件讀取爲DataUrl

base64

使用FileReader進行文件的讀取，就能夠將圖片讀取成base64格式的了。

直接在FileReader實例的onload函數裏面將result賦值給src便可

格式差別

其實主要是兩種格式base64和blob，它們之間的差別以下

• Blob URL的長度通常比較短
• Blob URL能夠方便的使用XMLHttpRequest獲取源數據， base64不是全部瀏覽器都支持
• Blob URL 只能在當前應用內部使用

格式之間轉換

canvas轉爲blob對象

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

canvas轉爲base64

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

base64轉爲blob

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對象建立指定文件並下載

DataURL 與 File,Blob,canvas 對象之間的互相轉換

結尾

文本完整代碼，請戳github

各位，週末快樂。