1.转File对象
let files = new window.File([bits], file.name, {type: file.type})
bits img/Blob/base64 格式图片
2.File对象转base64
封装
async fileToBase64(file) {
/*
file File对象
*/
let reader = new FileReader();
let fn = function() {
return new Promise((resolve) => {
reader.onload = function() {
let obj = {
code: 200,
data: this.result,
msg: '成功'
}
resolve(obj)
}
reader.onerror = function() {
let obj = {
code: 100,
data: '',
msg: '失败'
}
resolve(obj)
}
})
}
reader.readAsDataURL(file)
let res = await fn()
return res
}
调用
async upload(Files) {
let res = await file.fileToBase64(Files)
if(res.code == 200) {
// 成功
} else if(res.code == 100) {
// 失败
console.log(res.msg)
}
}
3.img转Blob对象
// url img地址,图片地址如果是网络图片,网络地址需要处理跨域
// fn 函数,返回一个blob对象
imageToBlob (url, fn) {
if (!url || !fn) return false;
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
// 注意这里的this.response 是一个blob对象 就是文件对象
fn(this.status == 200 ? this.response : false);
}
xhr.send();
return true;
}
4.img转Base64
// 将图片转换为Base64
function imageUrlToBase64(img, fn) {
// 一定要设置为let,不然图片不显示
let image = new Image();
// 解决跨域问题
image.setAttribute('crossOrigin', 'anonymous');
let imageUrl = img;
image.src = imageUrl;
// image.onload为异步加载
image.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
// 解决图片转base64透明部分填充成黑色问题
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, image.width, image.height);
let quality = 0.8;
// 这里的dataurl就是base64类型
let dataURL = canvas.toDataURL('image/jpeg', quality);
fn(dataURL);
};
}