JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
更新時(shí)間：2023年07月24日 10:38:21 作者：這是個(gè)問(wèn)題
這篇文章主要給大家介紹了關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關(guān)資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個(gè)簡(jiǎn)單的加密來(lái)保護(hù)某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下
1）將base64圖片格式轉(zhuǎn)為可讀的url格式
將圖片文件轉(zhuǎn)為二進(jìn)制，然后通過(guò)URL的createObjectURL函數(shù)，將二進(jìn)制轉(zhuǎn)為url格式
function getBase64URL(pic) {
const blob = base64ImgtoFile(pic)
const blobUrl = window.URL.createObjectURL(blob);
return blobUrl
}2）將圖片轉(zhuǎn)為文件
function base64ImgtoFile (dataurl, filename = 'file') {
//將base64格式分割：['data:image/png;base64','XXXX']
const arr = dataurl.split(',')
// .*？ 表示匹配任意字符到下一個(gè)符合條件的字符 剛好匹配到：
// image/png
const mime = arr[0].match(/:(.*?);/)[1] //image/png
//[image,png] 獲取圖片類型后綴
const suffix = mime.split('/')[1] //png
const bstr = atob(arr[1]) //atob() 方法用于解碼使用 base-64 編碼的字符串
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}總結(jié)
到此這篇關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的文章就介紹到這了,更多相關(guān)base64圖片轉(zhuǎn)化URL格式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js jquery ajax的幾種用法總結(jié)(及優(yōu)缺點(diǎn)介紹)
本篇文章只要介紹了js jquery ajax的幾種用法總結(jié)(及優(yōu)缺點(diǎn)介紹)，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
function, new function, new Function之間的區(qū)別
function, new function, new Function之間的區(qū)別...2007-03-03
js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色
昨天在做js 從10種顏色中隨機(jī)取色，并每次取出的顏色不同，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下2013-10-10
jquery中validate與form插件提交的方式小結(jié)
這篇文章主要介紹了jquery中validate與form插件提交的方式小結(jié),需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)純前端壓縮圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
折疊導(dǎo)航的實(shí)現(xiàn)方法有很多，在文本為大家介紹下如何使用js實(shí)現(xiàn)的折疊導(dǎo)航，感興趣的朋友可以參考下2013-11-11
JavaScript實(shí)現(xiàn)圖片預(yù)加載的方法總結(jié)
在Web前端開(kāi)發(fā)中,圖片是網(wǎng)頁(yè)內(nèi)容的重要組成部分,但它們的加載時(shí)間往往會(huì)影響頁(yè)面的整體性能,為了提升用戶體驗(yàn),減少等待時(shí)間,開(kāi)發(fā)者通常會(huì)采用圖片預(yù)加載（Image Preloading）技術(shù),本文給大家介紹了JavaScript實(shí)現(xiàn)圖片預(yù)加載的方法總結(jié),需要的朋友可以參考下2024-12-12
在這篇文章中，我將分享12個(gè)非常有用的JavaScript技巧。這些技巧可以幫助你減少并優(yōu)化代碼，需要的朋友參考下本文吧2017-05-05
js判斷請(qǐng)求的url是否可訪問(wèn),支持跨域判斷的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷請(qǐng)求的url是否可訪問(wèn),支持跨域判斷的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要介紹了TypeScript?泛型重載函數(shù)的使用方式，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08