1. 程式人生 > >前端實現圖片轉base64

前端實現圖片轉base64

使用canvas

新建個canvas標籤然後用css隱藏。之後獲取此canvas元素,使用toDataURL方法轉換。

12 var canvas=document.getElementById("xxxx");var base64=canvas.toDataURL("圖片地址");

使用 FileReader

使用 FileReader 的 readAsDataURL 方法,讀取圖片並把base64資料儲存到其result屬性中。

1234 var reader=new FileReader();var file=fileList[0];//這裡fileList是通過 File API 獲取的檔案陣列(開啟multi)
reader.readAsDataURL(file);var base64=reader.result;

用途

把圖片轉成base64形式用處主要是減少HTTP請求、實時預覽要上傳的圖片。
如果通過canvas的話還能做圖片的進一步加工處理。