直接上代码:
let imgUrl = "";//网络图片地址
this.imgToBase64(imgUrl).then(res=>{
let fileName = `网络图片.png`;
let imgFile = this.dataURLtoFile(res,fileName);
//imgFile 就是图片的file对象
}).catch((err)=>{
console.log("err:",err)
})
// 网络图片转Base64
imgToBase64(url){
return new Promise((reslove, reject)=>{
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.setAttribute('crossOrigin', '*');
img.src = url+"?v="+Math.random();
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
let dataURL = canvas.toDataURL('image/png');
reslove(dataURL);
canvas = null;
};
img.onerror = (err)=>{
reject();
}
})
},
//将base64转换为文件
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = window.atob ? atob(arr[1]) : this.atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
try {
return new File([u8arr], filename || "123." + mime.split("/")[1], {
type: mime
});
} catch (ex) {
var blob = new Blob([u8arr], {
type: mime
});
blob.lastModifiedDate = new Date();
blob.lastModified = Date.now()
blob.name = filename || "123." + mime.split("/")[1];
return blob;
}
},
//base64解密(兼容ie9)
atob: function(s) { //解密
s = s.replace(/\s|=/g, '');
var cur,
prev,
mod,
i = 0,
result = [],
base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
while (i < s.length) {
cur = base64hash.indexOf(s.charAt(i));
mod = i % 4;
switch (mod) {
case 0:
//TODO
break;
case 1:
result.push(String.fromCharCode(prev << 2 | cur >> 4));
break;
case 2:
result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
break;
case 3:
result.push(String.fromCharCode((prev & 3) << 6 | cur));
break;
}
prev = cur;
i++;
}
return result.join('');
},