解决图片、视频地址加密问题

news/2024/5/19 23:28:33/

 

const getImgUrl = async () => {const imgUrl = '远程链接地址'const response = await fetch(imgUrl)//取出blob二进制const blob = await response.blob()//url转为类似blob:http://localhost:9587/cf3265b9-75eb-4722-8e11-5048dec2564d//赋值给需要展示的地方const url = URL.createObjectURL(blob)
}

利用fetch或者xhr都可以,实现思路:

1、远程链接

2、fetch下载图片转二进制流

3、用URL.createObjectURL(blob)创建一个 DOMString

   (与FileReader.readAsDataURL(file)相似文末解释)

切记:需要在页面卸载之前 (例:vue 中 beforeDestroy) 去释放掉所创建的DOMString

释放方法: URL.revokeObjectURL()

主要区别

  1. 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
  2. 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机:

  1. createObjectURL是同步执行(立即的)
  2. FileReader.readAsDataURL是异步执行(过一段时间)

内存使用:

  1. createObjectURL返回一段带hash的url,并且一直存储在内存中,直到document触发了unload事件(例如:document close)或者执行revokeObjectURL来释放。
  2. FileReader.readAsDataURL则返回包含很多字符的base64,并会比blob url消耗更多内存,但是在不用的时候会自动从内存中清除(通过垃圾回收机制)
  3. 兼容性方面两个属性都兼容ie10以上的浏览器。

优劣对比:

  1. 使用createObjectURL可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存
  2. 如果不太在意设备性能问题,并想获取图片的base64,则推荐使用FileReader.readAsDataURL

 

 


http://www.ppmy.cn/news/46676.html

相关文章

创造歌词一首,关于毕业论文难写,暗示导师不负责

Verse1: 论文期花许多年 流露出满腹心事与抱怨 导师辅导奏效约等于零 孤军奋战,难说心中经历 Chorus: 毕业论文难写,导师不负责 被耽误的宝贵时间却延长 毕业论文难写,辛苦又劳顿 又何必在心灵裂缝中徘徊 Verse2&#…

天猫商品详情数据接口,京东商品详情数据接口,品牌商品数据分析,品牌店铺商品数据分析,监控商品价格销量接口代码封装教程

最近做一个品牌电商公司内部ERP系统分发的采集淘宝、天猫、京东商品详情页API接口的投标工作,集成的接口,其中有一个需求就是监控品牌授权店铺的价格、销量,标题、主图等等,具体需求如下描述:所有授权店铺的公开数据都…

Java——矩形覆盖

题目链接 牛客在线oj题——矩形覆盖 题目描述 我们可以用 21 的小矩形横着或者竖着去覆盖更大的矩形。请问用 n 个 21 的小矩形无重叠地覆盖一个 2*n 的大矩形,从同一个方向看总共有多少种不同的方法? 数据范围:0≤n≤38 进阶&#xff1…

OpenCV实例(三)答题卡识别

OpenCV实例(三)答题卡识别 1.答题卡识别概述2.单道题目的识别2.1基本流程及原理2.2代码实例: 作者:Xiou 1.答题卡识别概述 随着信息化的发展,计算机阅卷已经成为一种常规操作。在大型考试中,客观题基本不…

Trimble RealWorks处理点云数据(七)之点云导入3dmax

效果 背景 有时候我们需要通过点云数据来逆向建模,而建模软件常用的有3dmax,SketchUp等,那如何将点云数据导入3dmax来建模呢,下面我们来了解下 步骤 1、las导入Trimble RealWorks 2、对点云数据预处理 可以参考这篇文章 TrimbleRealWorks点云数据预处理 3、导出rcp格式…

普通人如何使用ChatGPT接单挣钱-第一弹

嘿,我是灵牧,今天这一期给大家带来的是普通人如何使用chatGPT挣钱的第一期 第一弹:通过GPT写一个Tkinter数独案例赚取¥50 事情原委: 今天在接单群里看到一个Tkinter写数独的需求案例,想要加一个独立的弹…

中文英文翻译-英翻中文在线翻译

如果您需要将大量的英文文件或网页翻译成中文,那么我们的批量翻译英文翻译中文的软件将是您最佳的选择。我们的软件是一款高效、准确、节省时间的翻译工具,可以在最短时间内完成大量英文文本的翻译,让您在工作生活中处处流畅地处理英语文本。…

网络之TCP中的快速重传和慢启动

小白: 大牛你好,我是一名即将毕业的大学生,最近正在准备找工作,但是我对TCP中的快速重传和慢启动不是很了解,能否请您帮我解释一下呢? 大牛: 当然可以,TCP中的快速重传和慢启动是TCP拥塞控制算法中非常重要…

2023年全国最新道路运输从业人员精选真题及答案55

百分百题库提供道路运输安全员考试试题、道路运输从业人员考试预测题、道路安全员考试真题、道路运输从业人员证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 39.道路运输车辆维护分为()、一级维护和…

牛客 华为研发工程师编程题

1.汽水瓶 某商店规定:三个空汽水瓶可以换一瓶汽水,允许向老板借空汽水瓶(但是必须要归还)。 小张手上有n个空汽水瓶,她想知道自己最多可以喝到多少瓶汽水。 数据范围:输入的正整数满足 1≤n≤100 注意…

Spark学习:spark读写postgreSql

读写PostgreSql 一、环境搭建二、写三、读四、ETL一、环境搭建 1、spark安装包,官网地址,我下的是如下版本 2、postgreSql数据库jdbc驱动,官网地址,我下的是如下版本 3、java版本1.8;scala版本2.12.15 4、spark安装包解压到任意目录,把postgreSql的jdbc驱动jar包放在spark的…

数据库系统概论(第五版) 王珊 第四章 课后习题答案

目录 (一)数据库安全性の概念 1. 什么是数据库的安全性 2.数据库安全性和计算机系统的安全性有什么关系? 4.试述实现数据库安全性控制的常用方法和技术 5.什么是数据库中的自主存取控制方法和强制存取控制方法? (二)考试…

Jenkins版本升级(v2.107.1 -_ v2.204.1)

文章目录 背景解决第1步:备份jenkins_home第2步:备份tomcat第3步:修改tomcat端口第4步:修改catalina.sh,设置jenkins_home第5步:下载2.204.1的jenkins包第6步:启动tomcat背景 jenkins版本:2.107.1 应用服务器:Tomcat8.5 重启jenkins后,发现很多插件都加载失败了,导…

手机如何访问电脑文件?(iOS和Android)

可以通过手机访问电脑文件吗? “我需要在我的电脑上查看一个文件,但我现在在外面无法实际访问它。我可以通过手机访问我的电脑文件吗?” 答案当然是可以的,无论您使用的是iOS设备还是Android设备,您都可以通过手机…

数据结构—顺序表

目录 1.顺序表概念 2.顺序表分类: 3.实现动态顺序表 3.1初始化顺序表 SLInit 3.2 检查顺序表容量 SLCheckCapacity 3.3 打印顺序表 SLPrint 3.4尾插 SLPushBack 3.5头插 SLPushFront 3.6尾删 SLPopback 3.7头删 SLPopFront 3.8 顺序表查找 SLFind 3.9 顺…

【springcloud开发教程】负载均衡——Ribbon

Ribbon是什么? Spring Cloud Ribbon 是基于Netflix Ribbon 实现的一套客户端负载均衡的工具。简单的说,Ribbon 是 Netflix 发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将 Netflix 的中间层服务连接在一起。Ribbon 的…

ChatGPT帮我和老板吵架,半分钟做了个思维导图...

大家好,我是小z,也可以叫我阿粥 最近那个疑似成都电科的截图已经传疯了,贴一张图回味下: 这种壮士断腕式的吵法,可以说几乎是单方面的虐杀。但是有朋友问了,在职场中还是有所顾忌,有没有更体面点…

机器视觉检测技术在工业零部件的应用

众所周知,在工业生产中,传统的检测技术需要大量的检测工作者,不仅影响生产效率,而且带来不可靠的因素。 视觉检测技术克服了传统检测技术的缺点,确保了检测的安全性。 可靠性和自动化程度高,已成为当前检测…

jQuery制作一个简单的打地鼠游戏(超详细讲解)

🙈作者简介:练习时长两年半的Java up主 🙉个人主页:老茶icon 🙊 ps:点赞👍是免费的,却可以让写博客的作者开兴好久好久😎 📚系列专栏:Java全栈,计…

如何定位Spark数据倾斜问题,解决方案

文章目录 前言一、数据倾斜和数据过量二、 数据倾斜的表现三、定位数据倾斜问题定位思路:查看任务-》查看Stage-》查看代码 四、7种典型的数据倾斜场景解决方案一:聚合元数据解决方案二:过滤导致倾斜的key解决方案三:提高shuffle操…