base64字串與圖片的相互轉換
阿新 • • 發佈:2019-01-09
一.base64字串轉圖片
原理是當base64字串作為img標籤的src屬性時,如果是有效的,則可以預覽。
而若要下載,則
建立一個新的a標籤
將a標籤的href屬性設定為該base64字串
設定a標籤的download屬性為檔名
再通過js手動觸發該a標籤的點選事件,則完成了下載行為(具體視瀏覽器可能需要選擇下載目錄或者使用預設目錄)。
二.圖片轉base64字串
分為兩種,一種是提供圖片的src標籤,另一種是通過上傳圖片檔案。
優點是……可以縮放圖片大小?
缺點是不能跨域(但另外一個也不行)
順序如下:
1. 使用者提供src
2. 建立新的img標籤,並將src設定給img標籤
3. img標籤載入完畢(onload回撥觸發),繼續執行以下程式碼:
4. 將該圖片寫入canvas(此時可以根據圖片大小設定該canvas的大小,或者讓圖片自適應canvas的大小)
5. 通過canvas的toDataURL方法獲取base64字串
6. 輸出該base64字串;
四.檔案上傳形式
需要input標籤支援type=file,需要使用FileReader物件
優點是選完檔案後自動轉換,操作更簡單一些。
順序如下:
1.當type=file的input標籤觸發onchange事件時,開始執行以下指令
2.建立一個新的FileReader物件;
3.使用其的readAsDataURL這個API,讀取檔案內容;
4.當讀取成功時(觸發onload回撥函式),可以通過回撥函式的引數e,利用屬性e.target.result獲取base64字串;
5.該base64字串即為所需要的內容。
圖片轉為base64字串
base64字串轉為圖片
原理是當base64字串作為img標籤的src屬性時,如果是有效的,則可以預覽。
而若要下載,則
建立一個新的a標籤
將a標籤的href屬性設定為該base64字串
設定a標籤的download屬性為檔名
再通過js手動觸發該a標籤的點選事件,則完成了下載行為(具體視瀏覽器可能需要選擇下載目錄或者使用預設目錄)。
二.圖片轉base64字串
分為兩種,一種是提供圖片的src標籤,另一種是通過上傳圖片檔案。
三.提供圖片的src標籤
需要藉助canvas標籤來完成。優點是……可以縮放圖片大小?
缺點是不能跨域(但另外一個也不行)
順序如下:
1. 使用者提供src
2. 建立新的img標籤,並將src設定給img標籤
3. img標籤載入完畢(onload回撥觸發),繼續執行以下程式碼:
4. 將該圖片寫入canvas(此時可以根據圖片大小設定該canvas的大小,或者讓圖片自適應canvas的大小)
5. 通過canvas的toDataURL方法獲取base64字串
6. 輸出該base64字串;
四.檔案上傳形式
需要input標籤支援type=file,需要使用FileReader物件
優點是選完檔案後自動轉換,操作更簡單一些。
順序如下:
1.當type=file的input標籤觸發onchange事件時,開始執行以下指令
2.建立一個新的FileReader物件;
3.使用其的readAsDataURL這個API,讀取檔案內容;
4.當讀取成功時(觸發onload回撥函式),可以通過回撥函式的引數e,利用屬性e.target.result獲取base64字串;
5.該base64字串即為所需要的內容。
五.DEMO頁面:
base64字串轉為圖片