以往如果想要瀏覽器可以在頁面中顯示自己電腦的圖片，會需要將自己的圖片上傳到網站上，取得線上圖片的網址之後才能在頁面中顯示。
今天分享一個神奇的方法，讓你可以在頁面中直接顯示圖片，而且圖片不需要上傳到網路上。而且這功能是瀏覽器支援的，在離線模式一樣可以運作唷

為什麼瀏覽器不能直接存取電腦的圖片？

其實這問題的癥結點在於瀏覽器（或更精確來說是 javascript）如果有能力可以直接存取到電腦的檔案而不用任何取可，那會是一件蠻危險的事情。
尤其現在幾乎每個網頁都有用 javascript 你很難保證它不會偷偷挖礦或是做其他壞事情？
為了安全性，javascript 在瀏覽器是被困在一個安全沙盒的環境被執行的，所以 javascript 沒辦法直接取得本地檔案。

BLOB 是什麼？

BLOB 全名 Binary large object，javascript 依靠這種物件存取二進位資料。
在瀏覽器中的 File 底層就是 Blob，我們可以使用 URL.createObjectURL() 這個方法將 File 或是 Blob 轉換成特殊網址(例如：blob:https://fiddle.jshell.net/1ec6bee0-292f-4d0a-9d93-34a3272e793e) 這串網址不是實際的線上網址，而是對應到瀏覽器內部資源的虛擬網址。有了它，我們就可以在頁面中顯示預覽圖片了。
另外要記得的是，如果沒有要繼續使用這個資料的話，記得用 URL.revokeObjectURL() 將相關資源的記憶體釋放出來

參考

• Blob - Web APIs | MDN
• 使用 Blob 和 File 相關 Web API 即時呈現上傳圖片檔案 | Peng Jie's Blog