前端二进制系列二：前端网络图片预览

最新推荐文章于 2023-05-16 12:54:54 发布

Keen__

最新推荐文章于 2023-05-16 12:54:54 发布

阅读量717

点赞数

分类专栏：二进制 JavaScript HTML5

本文链接：https://blog.csdn.net/qq937654393/article/details/115428496

版权

JavaScript 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

二进制

3 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

一、网络下载图片 -> 图片预览

上一篇主要讲了本地获取图片进行预览，我们也可以通过 Fetch API 从网上从网络上获取图片，然后在进行图片预览。

当然对于网络上可正常访问的图片地址，我们可以直接把地址赋给 img 元素显示，这是最常见的使用方式，并不需要通过 fetch API 绕一大圈。
但如果在显示图片时你需要对图片进行特殊处理，比如解密图片数据时，你就可以考虑在 Web Worker 中使用 fetch API 获取图片数据并进行解密操作。

现在使用 fetch API 获取我的掘金头像，具体代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取远程图片预览示例</title>
  </head>
  <body>
    <h3>获取远程图片预览示例</h3>
    <img id="previewContainer" style="width: 400px;"/>
    <img id="previewContainer" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/642d4e54a1f2400f4747436afd3178ba~300x300.image" style="width: 400px;"/>

    <script>
      const image = document.querySelector("#previewContainer");
      fetch("https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/642d4e54a1f2400f4747436afd3178ba~300x300.image")
        .then((response) => response.blob())
        .then((blob) => {
          const objectURL = URL.createObjectURL(blob);
          image.src = objectURL;
        });
    </script>
  </body>
</html>

在这里插入图片描述
上述例子中通过 Fetch API 从网上请求图片资源，请求成功后把响应内容转成Blob对象（response.blob()），然后用URL.createObjectURL方法创建Object URL赋给 img 元素的 src 属性，从而实现图片的显示。

对于 fetch API 的 Response 对象来说，该对象除了提供 blob() 方法之外，还提供了 json()、 text() 、formData() 和 arrayBuffer() 等方法，用于把响应转换为不同的数据格式。

在前后端分离的项目中，大家用得比较多的应该就是 json() 方法，而其它方法可能用得相对比较少。对于前面的示例，我们把响应对象转换为 ArrayBuffer 对象，同样可以正常显示从网络下载的图像，具体的代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取远程图片预览示例</title>
  </head>
  <body>
    <h3>获取远程图片预览示例</h3>
    <img id="previewContainer" style="width: 400px;"/>
    <img id="previewContainer" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/642d4e54a1f2400f4747436afd3178ba~300x300.image" style="width: 400px;"/>

    <script>
      const image = document.querySelector("#previewContainer");
      fetch("https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/642d4e54a1f2400f4747436afd3178ba~300x300.image")
      .then((response) => response.arrayBuffer())
      .then((buffer) => {
        const blob = new Blob([buffer]);
        const objectURL = URL.createObjectURL(blob);
        image.src = objectURL;
      });
    </script>
  </body>
</html>

在以上代码中，我们先把响应对象转换为 ArrayBuffer 对象，然后通过调用 Blob 构造函数，把 ArrayBuffer 对象转换为 Blob 对象，再利用 createObjectURL() 方法创建 Object URL，最终实现图片预览。

二、Object URL

blob:null/6f8a1aee-d7cf-49e0-90cf-bfa6aa70b5e4

从浏览器控制台中可以看到Object URL，相比前面介绍的 Data URL，它简洁很多。接下来我们来认识一下 Object URL 这种协议。

Object URL 是一种伪协议，也被称为 Blob URL。它允许 Blob 或 File 对象用作图像，下载二进制数据链接等的 URL 源。在浏览器中，我们使用 URL.createObjectURL 方法来创建 Blob URL，该方法接收一个 Blob 对象，并为其创建一个唯一的 URL，其形式为 blob:<origin>/<uuid>。
浏览器内部为每个通过 URL.createObjectURL 生成的 URL 存储了一个「URL → Blob」映射。因此，此类 URL 较短，但可以访问 Blob。生成的 URL 仅在当前文档打开的状态下才有效。但如果你访问的 Blob URL 不再存在，则会从浏览器中收到 404 错误。

注：上述的 Blob URL 看似很不错，但实际上它也有副作用。虽然存储了 URL → Blob 的映射，但 Blob 本身仍驻留在内存中，浏览器无法释放它。映射在文档卸载时自动清除，因此 Blob 对象随后被释放。但是，如果应用程序寿命很长，那不会很快发生。因此，如果我们创建一个 Blob URL，即使不再需要该 Blob，它也会存在内存中。

针对这个问题，我们可以调用 URL.revokeObjectURL(url) 方法，从内部映射中删除引用，从而允许删除 Blob（如果没有其他引用），并释放内存。

参考原文：[1.3万字] 玩转前端二进制

Keen__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端二进制系列二：前端网络图片预览

一、网络下载图片 -> 图片预览上文主要讲了本地获取图片进行预览，我们也可以通过 Fetch API 从网上从网络上获取图片，然后在进行图片预览。当然对于网络上可正常访问的图片地址，我们可以直接把地址赋给 img 元素显示，这是最常见的使用方式，并不需要通过 fetch API 绕一大圈。但如果在显示图片时你需要对图片进行特殊处理，比如解密图片数据时，你就可以考虑在 Web Worker 中使用 fetch API 获取图片数据并进行解密操作。现在使用 fetch API 获取我的掘金头像，具
复制链接

扫一扫