最近项目刚好用到,网上查阅整理下:
//将base64转换为文件对象
$base64ToFiles(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
//转换成file对象
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
//转换成成blob对象
//return new Blob([u8arr],{type:mime});
},
//将图片转换为Base64
//url 图片链接或者是blob对象,callback 回调函数
$getImgToBase64(url,callback){
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免文档冗余和污染
let img = new Image;
img.crossOrigin = 'Anonymous';
//要先确保图片完整获取到,这是个异步事件
img.onload = function(){
canvas.height = img.height;//确保canvas的尺寸和图片一样
canvas.width = img.width;
ctx.drawImage(img,0,0);//将图片绘制到canvas中
let dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的
callback(dataURL);//调用回调函数
canvas = null;
};
img.src = url;
},
// 将base64转换为Blob文件 (分片上传用blob)
$convertBase64UrlToBlob(urlData) {
let bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type:'image/png'});
},
// 将blob转换为file文件
//type事例 type:'image/png'
$blobToFiles(blob, {name,type}) {
return new window.File([blob], name, {type: type})
}