前端 DataURL的幾種處理方式及相互間的轉換

2021-10-17 14:20:56 字數 1215 閱讀 1186

一、顯示

如果想在前端顯示一張,那麼後端傳過來的資料格式有三種。

二進位製流

如果返回的是的二進位製流,那麼需要在獲取資料的是時候,處理一下資料格式,轉成blob物件,再轉成dataurl

const img = document.createelement('img');

img.src = window.url.createobjecturl(data);

如果返回的是base64的資料格式,那麼也是直接放在路徑裡就好了

const img = document.createelement('img');

img.src = 'data:image/png;base64,' + data;

二、格式間的相互轉換

但有些時候,我們不僅是要顯示,還要將其轉化為我們所需要的格式,以下介紹一些轉化方法

轉base64

利用canvas的 todataurl() 方法

getbase64str(img)
base64轉二進位制

base64toblobarr(dataurl) 

return u8arr

}

二進位制轉base64

blobtobase64(data)
blob 轉base64

blobtodatauri(blob) 

reader.readasdataurl(blob);

}

base64轉blob

base64toblob(dataurl) 

return new blob([u8arr], );

}

總結

js將轉成base64和二進位製流,將二進位制流轉成base64

前端二進位制學習

前端跨域的幾種處理方式

什麼是跨域?瀏覽器想伺服器傳送請求,因為ajax只能在同源策略下使用,不能請求不同介面的資料,例如瀏覽器介面8080請求介面3000的資料,是請求不到資料的會報錯,這時就需要跨域來解決跨域就是解決此問題。以下三種方式是我所熟悉的前端跨域請求方式 從建立檔案到訪問的步驟 後台檔案介面為 3000,前端...

Oracle中sql直接處理數字的幾種方式

向下取整 select floor 5.534 from dual select trunc 5.534 from dual 上面兩種用法都可以對數字5.534向下取整,結果為5.向上取整 select ceil 5.534 from dual 保留n位小數 四捨五入 select round 5....

前端的幾種繼承

function sort arr return arr 氣泡排序 物件導向 封裝 繼承 多型 封裝繼承 1原型鏈繼承 function fz fz.prototype.age 26 function son son.prototype new fz var sonli new son fz son...