base64 ---> file
方式一
function base64toFile(base64Data, filename) {
var arr = base64Data.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 File([u8arr], filename, {
type: mime
});
}
方式二(兼容性好)
//将base64转换为blob
function base64toBlob(base64Data) {
var arr = base64Data.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
});
};
//将blob转换为file
function blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
};
// 使用
let blob = base64toBlob(base64Data);
let file = blobToFile(blob, fileName);
提示
(1) btoa() 方法用于创建一个base64编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。 语法:window.btoa(str) str 必需项,要编码的字符串 返回值:返回一个base64编码的字符串
可用Buffer.from(str).toString('base64')替代
(2) atob() 方法用于解码使用 base-64 编码的字符串。 语法:window.atob(encodedStr) encodedStr 必需项,一个通过btoa()方法编码的字符串 返回值:返回一个解码的字符串
可用Buffer.from(b64Encoded, 'base64').toString('binary')替代
提示
Uint8Array数组类型表示一个8位无符号整型数组,创建时内容被初始化为0,创建完成后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。 语法格式:
new Uint8Array()
//创建初始化为0的,包含length个元素的无符号整型数组
new Uint8Array(length)
图片URL ---> Base64
function imgURLToBase64(url) {
return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas')
let context = canvas.getContext('2d')
let img = new Image() //通过构造函数绘制图片实例
img.crossOrigin = 'Anonymous' //处理图片跨域问题,服务器也需允许跨域
img.src = url
img.onload = function() { //该加载过程为异步事件,请先确保获取完整图片
canvas.width = img.width
canvas.height = img.height
context.drawImage(img, 0, 0) //将图片绘制在canvas中
const URLData = canvas.toDataURL('image/png')
resolve(URLData)
canvas = null
}
img.onerror = function() {
reject('图片加载失败');
}
})
}
Blob(File) ---> Base64
/**
* Blob转Base64
* @param base64 String base64格式字符串
* 返回值为含有转换结果e.target.result的Promise对象
*/
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
var reader = new FileReader()
reader.readAsDataURL(blob)
//读取后,result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
reader.onload = function(e) {
resolve(e.target.result)
}
reader.onerror = function() {
reject('文件读取失败');
}
})
}
最新回复