图片或文件Blob、File、Base64之间的相互转换
【摘要】 在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。
首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。
前言
在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。
首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。
- base64 : 可以直接当作链接地址使用
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
- File 对象:
File{
lastModified: 1649490762164
lastModifiedDate: Sat Apr 09 2022 15:52:42 GMT+0800 (GMT+08:00) {}
name: "1649490762160-251.png"
size: 25748
type: "image/png"
webkitRelativePath: ""
[[Prototype]]: File
}
- Blob 对象
Blob{
size: 25748
type: "image/png"
[[Prototype]]: Blob
}
- blob链接
blob:url/22ec44b8-5864-4960-8ea8-a71a7e40bb63
base64 转 Blob 对象
//base64 转 Blob对象
/* base64: data:image/png;base64,iVB....
/* Blob:{...}
*/
function base64ToBlob(data) {
var arr = data.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
base64 转 File 对象
/** base64 转 File 对象
/* @param data base64
/* @param filename 自定义文件名
/* @return File 对象
*/
function base64ToFile(data, filename) {
var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
let suffixArr = mime.split("/")
if (suffixArr.length && !filename) {
let suffix = suffixArr[suffixArr.length - 1]
filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
}
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
File 对象,Blob 对象 转base64
//blob ,File 对象 转 base64
function blobFileTobase64(blobFile) {
let reader = new FileReader()
reader.readAsDataURL(blobFile);
return new Promise((resolve, reject) => {
reader.onload = function () {
resolve(this.result)
}
reader.onerror = (err) => {
reject(err);
};
})
}
blob链接转 base64 :
利用canvas.toDataURL的API转化成base64
function urlToBase64(url, type = "image/png") {
return new Promise((resolve, reject) => {
let img = new Image()
img.src = url
img.onload = function () {
let canvas = document.createElement("canvas")
canvas.width = this.naturalWidth
canvas.height = this.naturalHeight
let ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0)
let result = canvas.toDataURL(type || 'image/png')
resolve(result)
}
img.onerror = function (err) {
reject(err)
}
})
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)