JavaScript将Base64图片转换为URL格式的方法
作者:小满时间:2026-10-30 22:00:29浏览:439
本文介绍在JavaScript中将Base64编码的图片数据转换为可访问的URL格式。核心思路是先通过atob解码Base64字符串为二进制数据,封装为Blob对象,再利用window.URL.createObjectURL生成临时URL。该方法适用于前端直接展示图片,无需上传至服务器,同时提供了完整的代码实现与注意事项。
1)将base64图片格式转为可读的url格式
实现这一转换的核心逻辑是先将图片文件转换为二进制数据,随后利用URL对象的createObjectURL函数,将生成的二进制Blob对象映射为一个临时的URL字符串。
function getBase64URL(pic) {
const blob = base64ImgtoFile(pic)
const blobUrl = window.URL.createObjectURL(blob);
return blobUrl
}2)将图片转为文件
function base64ImgtoFile (dataurl, filename = 'file') {
//将base64格式分割:['data:image/png;base64','XXXX']
const arr = dataurl.split(',')
// .*? 表示匹配任意字符到下一个符合条件的字符 刚好匹配到:
// 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
})
}总结
到此这篇关于JavaScript如何将base64图片转化为URL格式的文章就介绍到这了,更多相关base64图片转化URL格式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
作者最新文章
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz:主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53
