利用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) 触发点击事件,开始下载图片。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/3900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud系列(18)--将服务提供者Provider注册进Consul

前言:在上一章节中我们把服务消费者Consumer注册进了Zookeeper,并且成功通过服务消费者Consumer调用了服务提供者Provider,而本章节则是关于如何将服务提供者Provider注册进Consul里 准备环境: 先安装Consul,如果没有…

linux安装PyCharm

安装PyCharm PyCharm是一个流行的Python开发环境(IDE),由JetBrains提供。有两个版本:社区版(免费)和专业版(付费)。以下是安装社区版的方法: 使用snap包安装&#xff08…

ElasticSearch语句中must,must_not,should 组合关系

前言: 在实际应用中,发现当bool中同时使用must和should 没有达到想要的想过,而是只展示了must中的命中数据,所以打算探究一下bool中 三种逻辑关系的组合。 上述查询语句只展示了must的结果,没有should中的结果&#…

yolov8旋转目标检测输出的角度转化为适合机械爪抓取的角度

1. 机械爪抓取时旋转的角度定义 以X轴正方向(右)为零度方向,角度取值范围[-90,90)。 确认角度的方法: 逆时针旋转X轴,X轴碰到矩形框长边时旋转过的角度记为angleX: 1.如果angleX小于90&#xf…

RDD编程初级实践

参考链接 spark入门实战系列--8MLlib spark 实战_mob6454cc68310b的技术博客_51CTO博客https://blog.51cto.com/u_16099212/7454034 Spark和Hadoop的安装-CSDN博客https://blog.csdn.net/weixin_64066303/article/details/138021948?spm1001.2014.3001.5501 1. spark-shell…

【介绍下如何使用CocoaPods】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

Linux:服务器间同步文件的脚本(实用)

一、功能描述 比如有三台服务器,hadoop102、hadoop103、hadoop104,且都有atguigu账号 循环复制文件到所有节点的相同目录下,且脚本可以在任何路径下使用 二、脚本实现 1、查看环境变量 echo $PATH2、进入/home/atguigu/bin目录 在该目录下…

Redis 源码学习记录:字符串

redisObject Redis 中的数据对象 server/redisObject.h 是 Redis 对内部存储的数据定义的抽象类型其定义如下: typedef struct redisObject {unsigned type:4; // 数据类型,字符串,哈希表,列表等等unsigned encoding:4; …

文字PDF转图片PDF,适合pdf防复制

完整代码已传至github平台: https://github.com/yaunsine/text_pdf_to_image_pdf 分成两步操作: 1、将文字pdf输出成图片 2、将所有图片合成为pdf 将PDF文件输出为图片的形式 """pdf转图片 """ def pyMuPDF_fitz(pdfPa…

网页提示语闪太快的定位问题(selenium)

selenium UI自动化时,提示语闪太快,导致无法获取元素的问题 解决办法 步骤一: F12---》控制台输入debugger 步骤二:对于需要定位的部分,在控制台的debugger处回车,可以定住页面 步骤三:正常定…

Impala系统架构理解

1 impalad(含3个模块,执行hbase或hdfs中的数据,数据的底层存储为hdfs) 当用户通过用户接口提出查询或分析请求时,Impala会选择一个Impalad实例作为协调者(Coordinator)来负责整个查询过程的协调…

Android NDK开发 CMAKE 相关总结

预设变量含义介绍 工程结构组织: 代码目录 ├── CMakeLists.txt ├── a │ ├── CMakeLists.txt │ └── a.cpp └── b├── CMakeLists.txt├── b.cpp└── b.h路径相关: CMAKE_SOURCE_DIR:最顶层 CMakceLists.txt 所在…

【Python快速上手(六)】

目录 Python快速上手(六)Python3 列表和元组Python3 列表1.创建列表2.访问列表元素3.列表切片4.修改列表元素5.列表方法6.列表操作符注意事项 Python3 元组1.创建元组2.访问元组元素3.元组切片4.元组内置函数5.元组运算符注意事项 Python快速上手&#x…

【CTF Web】CTFShow web14 Writeup(PHP+switch case 穿透+SQL注入+文件读取)

web14 5 解法 <?php include("secret.php");if(isset($_GET[c])){$c intval($_GET[c]);sleep($c);switch ($c) {case 1:echo $url;break;case 2:echo A;break;case 555555:echo $url;case 44444:echo "A";break;case 3333:echo $url;break;case 222…

python网络爬虫爬取需要的数据

要爬取网站的数据&#xff0c;你可以使用 Python 的 requests 库来发送 HTTP 请求&#xff0c;并使用 BeautifulSoup 库来解析返回的 HTML 内容。但是&#xff0c;在此之前&#xff0c;你需要检查该网站的 robots.txt 文件&#xff0c;以确认是否允许爬虫抓取特定页面的数据。 …

win11 安装qt5.14.2 、qtcreator、vs编译器 。用最小安装进行 c++开发qt界面

系统 &#xff1a;win11 一、安装vs生成工具 &#xff0c;安装编译器 下载visualstudio tools 生成工具&#xff1a; 安装编译器 和 windows sdk&#xff1a; 安装debug 调试器&#xff1a; 二、Qt5.14.2下载 下载链接: Index of /archive/qt/5.14/5.14.2 安装qt 三、配置QT/…

ChuanhuChatGPT集成百川大模型

搭建步骤&#xff1a; 拷贝本地模型&#xff0c;把下载好的Baichuan2-7B-Chat拷贝到models目录下 修改modules\models\base_model.py文件&#xff0c;class ModelType增加Baichuan Baichuan 16 elif "baichuan" in model_name_lower: model_type ModelType.Ba…

短视频矩阵营销系统 poihuoqu 任意文件读取漏洞复现

0x01 产品简介 短视频矩阵营销系统是由北京华益云数据科技有限公司开发的一款产品,这家公司专注于抖音短视频矩阵营销系统的研发,致力于为企业提供全方位的短视频营销解决方案。华益云抖销短视频矩阵系统可以帮助企业快速搭建多个短视频账号,实现内容的批量制作和发布,提高…

PostgreSQL的扩展(extensions)-常用的扩展之pg_stat_kcache

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展之pg_stat_kcache pg_stat_kcache 是一个第三方的 PostgreSQL 扩展&#xff0c;它用于收集来自操作系统内核的查询级别的缓存使用和 I/O 统计信息。这个扩展提供了一个机制来补充 PostgreSQL 自带的统计信息&am…

Vue从0-1学会如何自定义封装v-指令

文章目录 介绍使用1. 理解指令2. 创建自定义指令3. 注册指令4. 使用自定义指令5. 自定义指令的钩子函数6. 传递参数和修饰符7. 总结 介绍 自定义封装 v-指令是 Vue.js 中非常强大的功能之一&#xff0c;它可以让我们扩展 Vue.js 的模板语法&#xff0c;为 HTML 元素添加自定义行…