/**
* 通过图片url 获取图片file对象
* @param url
* @param fileName 文件名称(一定要带后缀)
* @param callback 回调函数
* @returns {*}
*/
function getImageFileFromUrl(url, fileName,callback) {
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.setRequestHeader('Accept', 'image/jpeg');
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status == 200) {
blob = xhr.response;
let imgFile = new File([blob], fileName, {type: 'image/jpeg'});
callback.call(this,imgFile);
}};
xhr.send();
}
demo:(用的图片url是百度上随便搜的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<img/>
</body>
<script>
function getImageFileFromUrl(url, imageName,callback) {
// imageName一定要带上后缀
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.setRequestHeader('Accept', 'image/jpeg');
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status == 200) {
blob = xhr.response;
let imgFile = new File([blob], imageName, {type: 'image/jpeg'});
console.log(imgFile)
callback.call(this,imgFile);
}};
xhr.send();
}
$(function () {
getImageFileFromUrl('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4085579248,162891217&fm=15&gp=0.jpg','testFile.jpg',function(file){
console.log(file)
var r = new FileReader()
r.readAsDataURL(file)
r.onload = function (e) {
var base64 = e.target.result;
$("img").attr('src', base64);
}
});
})
</script>
</html>