利用blob对象于浏览器保存图片到本地

本文提供一种保存图片到本地的实现方法（PC+H5都可以）
前置知识：
简介：Blob对象是一个表示大量不可变原始数据的容器。它主要用于处理二进制数据，如图片、音频、视频等文件。Blob 对象可以用于存储和操作大型数据集，例如文件或数据流。
使用场景：
从服务器获取二进制数据，如图片、音频或视频文件。
在客户端操作和处理二进制数据，例如通过 File API 读取用户上传的文件。
将二进制数据发送到服务器，例如通过 XMLHttpRequest 或 Fetch API 上传文件。
先实现代码：
Blob特点
不可变：Blob 对象的内容在创建后无法更改。如果需要修改 Blob 对象的内容，可以创建一个新的 Blob 对象。
高效：Blob 对象可以处理大型数据集，而不会消耗过多的内存。这是因为 Blob 对象在处理数据时，会将数据分块处理，而不是一次性加载整个数据集。
可以通过 URL 表示：可以使用 URL.createObjectURL() 方法为 Blob 对象创建一个 URL，以便在浏览器中引用和访问 Blob 对象。

    async saveImage(imageUrl) {
      try {
        const response = await fetch(imageUrl);
        const data = await response.blob();
        const url = URL.createObjectURL(data);
        const a = document.createElement("a");
        const event = new MouseEvent("click");
        a.download = "image";
        a.href = url;
        a.dispatchEvent(event);
      } catch (error) {
        console.error("保存图片失败:", error);
      }
    },

这里具体说明一下保存函数：async saveImage(imageUrl) ：
该函数是一个异步函数，接受一个参数 imageUrl，表示图片的地址。使用 try 和 catch 处理错误。下载图片：使用 fetch(imageUrl) 下载图片，并将响应存储在 response 变量中。然后将响应转换为Blob格式，并将其存储在 data 变量中。
使用 URL.createObjectURL(data) 方法将二进制数据转换为临时 URL，并将其存储在 url 变量中。然后创建一个新的 a标签元素，并将其存储在 a 变量中。设置下载属性 a.download 为 “image”，表示下载的文件名为 “image”。将临时 URL 设置为 a标签元素的 href 属性。最后，创建一个新的 MouseEvent 对象，并将其存储在 event 变量中。使用 a.dispatchEvent(event) 触发点击事件，开始下载图片。