因專案需求以及客製化樣式,決定自行手刻一個拖曳點擊上傳圖片的區塊,需要兼有圖片預覽、移除圖片、指定格式、檢查檔案大小以及因應 iOS 獨有的 heic 格式的轉檔。
內容
圖片預覽既圖片移除
利用 URL.createObjectURL 來達成,多數的桌機、手機端的瀏覽器都是支援的。
由於是使用裝置的記憶體來儲存,所以關閉時,一定要記得使用 URL.revokeObjectURL 方法來釋放記憶體既移除圖片
指定格式
<input> 的 accept 屬性,以使用 image/ 為開頭並以 , 分隔。
例如允許使用者送 png, jpg ,那就是 “image/png,image/jpg”。 image/* 代表任何格式的圖片
另外在程式碼內,也需透過 File 的 type 屬性來檢查,以防使用者改 <input> 的內容
檢查檔案大小
File 的大小預設數字以 bytes 為單位。若上限為 2 MB,那就用 2 * 1024 * 1024
1MB = 1024 KB = 1048576 Bytes
heic 格式
這在 iOS 手機上會出現,因為其預設的拍攝相片、儲存相片會用 heic 格式,會需要透過轉檔才能給 <img> 標籤使用。src 屬性是不支援 heic 的
實作是搭配 heic-convert 來使用。若要在瀏覽器端支援,要使用 heic-convert/browser
程式碼
參考資料
1. heic-convert
2. HEIC 格式的圖片怎麼辦?使用 heic2any.js 轉換為 JPEG 或 PNG