base64轉化為blob,blob轉化為file

2021-09-22 19:51:53 字數 976 閱讀 6258

背景:最近在做乙個移動端手寫簽名的功能。需求是將手寫簽名生成存到後台,實現步驟:canvas畫圖,生成base64,將base64轉為file物件。

1,canvas具體怎麼實現手寫簽名,不在細講,主要是touchmove.touchstart,touchend事件和canvas畫筆工具結合,生成base64,原生方法todataurl(),就可以將其轉化為base64。以上不是重點,重點是將base64轉為file,**如下

function dataurltofile(dataurl, filename) 

return new file([u8arr], filename, );

}

2,但是這種方式,低版本的瀏覽器是不支援的,具體不支援uint8array()還是file()不是很確定。

需要注意的是原作者規定了陣列最大長度是 1e5(10000),如果你的陣列比這個還大,需要手動改一下源** max_array_length 的值。但作者之所以設了這麼乙個最大值,是因為在低版本瀏覽器裡用 array 來模擬 bufferarray 的話是有效能問題的,所以慎重使用。

但是file()我沒有找到polyfill,所有將**改寫:

//將base64轉換為blob物件 解決低版本瀏覽器相容問題

function dataurltoblob(dataurl)

return new blob([u8arr], );

}//將blob轉換成file

function blobtofile(theblob, filename)

// 呼叫 dataurl為base64字串 filename為檔案名字,自己自定義

var file = blobtofile(dataurltoblob(dataurl), filename)

這樣就解決了低版本瀏覽器的相容問題,成功將檔案提交到後台,具體後台怎麼處理的我不是很清楚,我只是個比較菜的前端.

物件base64轉碼 Base64編碼轉換

1 為什麼mime要有編碼轉換 在mime總結這篇經驗中,總結了mime相較於rfc 822的擴充套件功能,其中提到了rfc 822的缺陷 非英語字元都不能在電子郵件中使用 2 電子郵件中不能插入二進位制檔案 如 3 電子郵件不能有附件。能夠對文字進行簡單的加密 2 quoted printable...

js實現base64的轉化

一 前言 1 字串轉base64。2 base64轉字串。3 input file選擇的轉base64。5 input file 修改上傳型別。二 外掛程式 將base64之間的轉化封裝成了外掛程式如下 js外掛程式 自定義乙個類 建構函式 function base64 else if c 127...

base64轉碼 解碼

最近有業務需要使用base64轉碼,現在整理一下 window.btoawindow.atob示例window.btoa test d zda window.atob d zda test如果字串中包含中文,直接使用btoa會報錯,可以先使用encodeuricomponent進行編碼 window...