前端接收，text/html类型的图片流

最新推荐文章于 2024-01-12 14:46:14 发布

转载最新推荐文章于 2024-01-12 14:46:14 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/492ec29dd76b

文章标签：

#html #ajax #js #url

html5 专栏收录该内容

6 篇文章

订阅专栏

这段代码展示了如何通过XMLHttpRequest获取图片的Blob数据，并利用window.URL.createObjectURL将Blob转换为URL，加载到img元素中显示。在图片加载完成后，通过window.URL.revokeObjectURL释放内存。

长这个样子在这里插入图片描述

<div class="headL"></div>

用到window.URL.revokeObjectURL和window.URL.createObjectURL；

<script>
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "图片URL", true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    var blob = this.response;
    var img = document.createElement("img");
    img.onload = function (e) {
      window.URL.revokeObjectURL(img.src);
    };
    img.src = window.URL.createObjectURL(blob);
    $(".headL").html(img);
  }
  xhr.send();
</script>