本文提供一种保存图片到本地的实现方法(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) 触发点击事件,开始下载图片。