点击base64编码过的图片在另一个页面显示

开始的代码是这样的,新开一个窗口显示经过base64编码后的图片,但是url太长了显示失败。

openImage(imgSrc) {window.open(imgSrc, '_blank');
},

解决方法:这段代码接收一个Base64编码的图像数据,把它转换为一个Blob对象。

Blob:是一个特殊的URL方案,它用于表示指向浏览器内存中Blob对象或File对象的引用。

注意:blob URL是短暂的。当它们不再被引用,或者当你调用URL.revokeObjectURL()方法时,它们会被释放,以减少内存使用。这意味着blob URL并不持久,它们只存在于当前浏览器会话中。如果你在一个新的浏览器窗口或标签页中打开一个blob URL,它将不起作用,因为该URL是特定于之前的浏览器上下文的。

下面是代码:

openImage(base64Data) { // 解码base64编码的数据。base64Data.split(',')[1]是提取真正的图像数据(移除了"data:image/jpeg;base64,"部分)const byteCharacters = atob(base64Data.split(',')[1]);// 创建一个数组,用于存储每个字符的ASCII码const byteNumbers = new Array(byteCharacters.length);// 遍历byteCharacters字符串,并将每个字符的ASCII码值存储在byteNumbers数组中for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);}// 使用byteNumbers数组创建一个Uint8Array对象。Uint8Array是一个字节的数组。const byteArray = new Uint8Array(byteNumbers);// 用byteArray创建一个Blob对象。Blob对象代表一个不可变、原始数据的类文件对象。// Blob对象的内容是由选项type指定的MIME类型。const blob = new Blob([byteArray], {type: 'image/jpeg'});// 创建一个指向存储在Blob对象中的数据的URL。这个URL可以用于文件下载或者用在img标签的src属性中。const imageUrl = URL.createObjectURL(blob);// 在新的浏览器窗口或标签页中打开上面创建的URL,从而显示该图像window.open(imageUrl, '_blank');
}

 

完。

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

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

相关文章

LabVIEW使用边缘检测技术实现彩色图像隐写术

LabVIEW使用边缘检测技术实现彩色图像隐写术 隐写术是隐藏信息的做法&#xff0c;以隐瞒通信的存在而闻名。该技术涉及在适当的载体&#xff08;如图像&#xff0c;音频或视频&#xff09;中插入秘密消息。在这些载体中&#xff0c;数字图像因其在互联网上的广泛使用而受到青睐…

1+X Web前端开发职业技能等级证书建设方案

一 、系统概述 1X Web前端开发技术是计算机类专业重要的核心课程&#xff0c;课程所包含的教学内容多&#xff0c;实践性强&#xff0c;并且相关技术更新快。传统的课堂讲授模式以教师为中心&#xff0c;学生被动式接收&#xff0c;难以调动学生学习的积极性和主动性。混合式教…

5.0 Spring Boot核心

1. Spring Boot注解 注解名称 注解说明 SpringBootApplication 用于标注Spring Boot应用为启动类&#xff0c;是一个组合注解&#xff0c;主要组合了SpringBootConfiguration、EnableAutoConfiguration和ComponentScan注解 SpringBootConfiguration 继承自Configuration&a…

【apifox】如何写一份合格的 API 文档?

要想弄清楚如何开始写出一份合格的 API 文档&#xff0c;我们需要首先了解什么是 API&#xff0c;它的使用场景有哪些&#xff0c;应该具备什么样的能力。 什么是 API&#xff1f; 想象一下&#xff0c;当小 A 购入了一台新的电脑后&#xff0c;希望将显示画面投射至一块色准…

【Quarkus技术系列】「云原生架构体系」在云原生时代下的Java“拯救者”是Quarkus,那云原生是什么呢?

云原生时代下的Java"拯救者" 在云原生时代&#xff0c;其实Java程序是有很大的劣势的&#xff0c;以最流行的spring boot/spring cloud微服务框架为例&#xff0c;启动一个已经优化好&#xff0c;很多bean需要lazy load的application至少需要3-4秒时间&#xff0c;内…

构建之法 - 软件工程实践教学:每天都向前推进一点点

作者&#xff1a;福州⼤学 汪璟玢⽼师 汪老师&#xff1a;每次都向前推进一点点&#xff0c;哪怕只有一点点&#xff0c;也好过什么都不做。 ​邹老师&#xff1a;对&#xff0c;几个学期下来&#xff0c;就已经超过那些“空想”的团队很远了。坚持下去&#xff01; 汪老师&…

vue或uniapp使用pdf.js预览

一、先下载稳定版的pdf.js&#xff0c;可以去官网下载 官网下载地址 或 pdf.js包下载(已配置好&#xff0c;无需修改) 二、下载好的pdf.js文件放在public下静态文件里&#xff0c; uniapp是放在 static下静态文件里 三、使用方式 1. vue项目 注意路径 :src"static/pd…

数据结构——时间复杂度和空间复杂度

1.算法效率 2.时间复杂度 3.空间复杂度 4. 常见时间复杂度以及复杂度oj练习 1.算法效率 1.1 如何衡量一个算法的好坏 如何衡量一个算法的好坏呢&#xff1f;比如对于以下斐波那契数的计算 long long Fib(int N) { if(N < 3) return 1; return Fib(N-1) Fib(N-2); }我们看到…

母婴即时零售行业数据可视化分析

对新晋父母来说&#xff0c;很多母婴用品如同一位贴心的助手&#xff0c;为他们的宝宝提供温暖和呵护。从婴儿床垫到可爱的拼图玩具&#xff0c;每一件用品都是为宝宝的成长和发展量身定制。对于繁忙的父母们而言&#xff0c;这些用品不仅帮助照顾孩子&#xff0c;更是为他们减…

【MySQL】数据库基础

文章目录 1. 数据库基础1.1 什么是数据库1.2 在Linux上见见数据库 2. 主流数据库3. 服务器、数据库、表三者之间的关系4. MySQL结构5. SQL语句分类6. 存储引擎 1. 数据库基础 1.1 什么是数据库 数据库是按照数据结构来组织、存储和管理数据的仓库&#xff0c;是一个长期存储在…

旧版本docker未及时更新,导致更新/etc/docker/daemon.json配置文件出现docker重启失败

一、背景 安装完docker和containerd之后&#xff0c;尝试重启docker的时候&#xff0c;报错如下&#xff1a; systemctl restart dockerJob for docker.service failed because the control process exited with error code. See “systemctl status docker.service” and “…

Django-配置邮箱功能(一):使用django自带的发送邮件功能

一、获取邮箱授权码 以QQ邮箱为例子&#xff1a; 1、进入到设置&#xff0c;找到账户 2、开启POP3等服务&#xff0c;点击管理服务 3、进入管理服务&#xff0c;生成授权码 4、按照要求发送短信就可以了 5、将授权码复制保存&#xff0c;离开界面就看不到了 二、django项目中…

【CTF-MISC】这是一张单纯的图片

题目链接&#xff1a;https://ctf.bugku.com/challenges/detail/id/2.html 下载图片&#xff0c;使用010 Editor打开&#xff1a; 在文件末尾可以看到疑似HTML实体的内容&#xff0c;将其解码即可得到答案。

day3 TCP/UDP基础模型、多点通信、TCP开发服务器模型

1.多线程中的newfd&#xff0c;能否修改成全局&#xff0c;不行&#xff0c;为什么&#xff1f; 不能。线程之间共享附属进程的所有资源&#xff0c;newfd是全局变量&#xff0c;作用域是全局&#xff0c;一经更改所有线程中的newfd都会变化。 2.多线程中分支线程的newfd能否…

Spring Boot+Redis 实现一个简单的限流器示例

Spring BootRedis 实现一个简单的限流器&#xff0c;限制 文章目录 Spring BootRedis 实现一个简单的限流器&#xff0c;限制0.前言1.基础介绍2.步骤2.1. 引入依赖2.2. 配置文件2.3. 核心源码优化后再优化一下加入布隆过滤器 4.总结5.参考文档6. Redis从入门到精通系列文章 0.前…

每天一道leetcode:1129. 颜色交替的最短路径(图论中等广度优先遍历)

今日份题目&#xff1a; 给定一个整数 n&#xff0c;即有向图中的节点数&#xff0c;其中节点标记为 0 到 n - 1。图中的每条边为红色或者蓝色&#xff0c;并且可能存在自环或平行边。 给定两个数组 redEdges 和 blueEdges&#xff0c;其中&#xff1a; redEdges[i] [ai, bi…

用python来爬取某鱼的商品信息(2/2)

目录 上一篇文章 本章内容 设置浏览器为运行结束后不关闭&#xff08;可选&#xff09; 定位到搜索框的xpath地址 执行动作 获取cookie 保存为json文件 修改cookie的sameSite值并且导入cookie 导入cookie&#xff08;出错&#xff09; 导入cookie&#xff08;修改后&…

Tik Tok娱乐+电商MCN怎么做?

在美国外的热门市场中&#xff0c;TikTok 主要做的区域市场包括中东、拉美、欧洲和东亚&#xff0c;而这里面适合做电商的其实并不多。 欧洲、东亚都属于成熟市场&#xff0c;且 TikTok 本身在欧洲面临 DSA 法案更严格的审查&#xff0c;与在英国相同&#xff0c;欧洲各市场消…

【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置axios,utils工具包,vue.fonfig.js配置项 (下)

系列文章目录 这里是创建移动端项目 【Vue】Vue2.x创建项目全程讲解&#xff0c;保姆级教程&#xff0c;手把手教&#xff0c;Vue2怎么创建项目&#xff08;上&#xff09; 【Vue】Vue2创建移动端项目实战教程&#xff0c;创建移动端项目保姆级教程&#xff0c;接上一篇创建Vue…

ArcGIS入门操作手册

一.ArcGIS安装过程 参考本人博客&#xff1a;保姆级Arcgis安装图文安装教程_追忆苔上雪的博客-CSDN博客 二.ArcGIS植被指数计算 (1)使用工具&#xff1a;栅格计算器 打开软件&#xff0c;右侧搜索栅格计算器打开&#xff0c;要是搜索栏不小心叉掉找不到了&#xff0c;可以通…