通过图片url 获取图片file对象

最新推荐文章于 2025-05-29 14:29:18 发布

MistyWood

最新推荐文章于 2025-05-29 14:29:18 发布

阅读量7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： jquery js 前端

本文链接：https://blog.csdn.net/MistyWood/article/details/107788312

前端学习专栏收录该内容

20 篇文章

订阅专栏

/**
 * 通过图片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>