blob对象转为file文件，并在img中展示

完整代码

<script>
  fetch(
    "https://desk-fd.zol-img.com.cn/t_s1440x900c5/g7/M00/0B/02/ChMkK2Plp3SIejdhADnMQEaMKKsAAMrvwBgm7cAOcxY127.jpg"
  )
    .then((response) => response.blob())
    .then((blob) => {
      // 将Blob转换为File
      const file = new File([blob], "icon.png", { type: "image/png" });

      // 创建图像元素并显示图像
      const imageUrl = URL.createObjectURL(file);
      const imgElement = document.createElement("img");
      imgElement.src = imageUrl;
      document.body.appendChild(imgElement);

      // 图像元素完成加载时，释放URL对象
      imgElement.addEventListener("load", () => {
        URL.revokeObjectURL(imageUrl);
        console.log("URL对象已释放！");
      });
    });
script>

核心代码

创建一个 Blob 对象，然后将其转换为 File 对象并将其用作图像的源

// 通过fetch获取图像数据
fetch('./icon.png')
  .then(response => response.blob())
  .then(blob => {
    // 将Blob转换为File
    const file = new File([blob], 'icon.png', { type: 'image/png' });

    // 创建图像元素并显示图像
    const imageUrl = URL.createObjectURL(file);
    const imgElement = document.createElement('img');
    imgElement.src = imageUrl;
    document.body.appendChild(imgElement);
  });

此代码将使用 fetch 获取图像数据，将 Blob 转换为 File，然后将 File 转换为一个 URL，该 URL 分配给 img 元素的 src 属性以显示图像。此代码假设图像文件在您的项目根目录中并命名为 icon.png。您需要将文件名和类型替换为您实际使用的文件。

它还需要注意，如果您决定将这段代码放在函数中，则不需要使用 async/await 或 .then()，因为 fetch 请求本身就返回一个 Promise 对象。

• 报错：

  Access to fetch at ‘file:///C:/Users/26502/Desktop/icon.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

• 解决（将的图像文件上传到云存储或 web 服务器上）

  这个错误通常是由于浏览器的安全策略所致。基于安全考虑，浏览器不允许从本地计算机直接访问文件系统中的文件。

  在本地计算机上调试开发时，您可以尝试在您的浏览器中安装一个插件或扩展程序，以允许从本地计算机直接访问文件系统中的文件。例如，Allow CORS: Access-Control-Allow-Origin 是一个常用的 Chrome 扩展程序，也适用于 Firefox。您可以安装该扩展程序并将其启用，然后重新加载您的网页，可能就可以解决这个问题了。

  另外一种解决办法是将您的图像文件上传到云存储或 web 服务器上。这将使您能够通过 HTTP 协议从网络中访问文件，从而避免浏览器本地安全策略的限制。

补充

如果使用 URL.createObjectURL() 创建了一个 URL 对象，应该在不再需要该对象时手动释放它，以释放内存并避免浏览器内存泄漏的风险。

您可以在图像元素从 DOM 中删除之前调用 URL.revokeObjectURL()。例如，您可以添加图像元素加载完成时调用 URL.revokeObjectURL() 的事件侦听器：

const imageUrl = URL.createObjectURL(file);
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
document.body.appendChild(imgElement);

// 图像元素完成加载时，释放URL对象
imgElement.addEventListener('load', () => {
  URL.revokeObjectURL(imageUrl);
  console.log('URL对象已释放！')
});

此代码将创建一个 元素，分配一个 URL 给它，并在 body 上添加这个元素。然后，它会添加一个 load 事件侦听器，在图像加载完成时释放 URL 对象。

另外，需要注意的是，在某些情况下，浏览器可能会在 load 事件之前立即释放 URL 对象，因此在给 img 元素分配 src 属性时，您应该尽可能快地完成这个操作，以便在记忆 URL 之前立即触发 load 事件。

最后，需要注意的是，您在 FileReader 对象中读取 File 时，不需要手动释放 URL 对象。因为 FileReader 实际上只是将文件读入内存中，不会生成 URL 对象。

fetch

Fetch 是一个现代化的 Web API，用于提供对 Web 应用程序中资源的异步请求和响应。它提供了一种简单、灵活和可读性强的方式，与 AJAX 类型的 XHR 相比具有更好的可扩展性和功能性。

使用 fetch，您可以轻松地从服务器获取数据，并以多种格式处理响应。与传统的 XHR 一样，您可以指定各种配置选项，如请求方法、标头、凭据等。

以下是一个使用 fetch 获取 JSON 数据的示例：

fetch('https://example.com/api/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在此示例中，我们使用 fetch 方法发出一个 GET 请求来请求 JSON 数据，然后使用 .then() 在响应中解析 JSON 格式的数据，并将解析后的数据记录到控制台中。如果出现任何错误，则捕获错误并将其记录到控制台中。

此外，您还可以指定其他的请求选项，例如请求方法、请求体和请求标头等，如下所示：

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourToken'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: '[email protected]'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在此示例中，我们使用 fetch 方法发出一个 POST 请求，请求头包含 Content-Type 和 Authorization 标头，请求体是一个包含名称和电子邮件的 JSON 对象。然后，我们解析响应中的 JSON 数据，并将其记录到控制台中。

总之，Fetch API 提供了一个灵活而简单的方式来处理 Web 应用程序的异步请求和响应，比传统的 XHR 更具可读性和可扩展性。