blob 添加圖檔 html_你不知道的前端圖檔處理（萬字長文，建議收藏）

本文阿寶哥将按照以下的流程來介紹前端如何進行圖檔處理，然後穿插介紹二進制、Blob、Blob URL、Base64、Data URL、ArrayBuffer、TypedArray、DataView 和圖檔壓縮相關的知識點。

閱讀完本文，小夥伴們将能輕松看懂以下轉換關系圖：

還在猶豫什麼？跟上阿寶哥的腳步，讓我們一起來玩轉前端二進制。請小夥伴們原諒阿寶哥的 “自戀”，在後面的示例中，我們将使用阿寶哥的個人頭像作為示範素材。

好的，現在我們開始來進入第一個環節：「選擇本地圖檔 -> 圖檔預覽」。

一、選擇本地圖檔 -> 圖檔預覽

1.1 FileReader API

在支援 FileReader API 的浏覽器中，我們也可以利用該 API 友善實作圖檔本地預覽功能。