点击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.hqwc.cn/news/67448.html

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

相关文章

warning: remember to run ‘libtool --finish /usr/local/1/php-7.4.29/libs

ubuntu上php7.4.33编译安装完成后警告报错&#xff0c;如下所示 # /usr/local/apache2/apr/build-1/libtool --finish /usr/local/soft/php-7.4.33/libs # vim /etc/ld.so.conf.d/local.conf /usr/local/lib /usr/lib64 # ldconfig 或者安装依赖服务&#xff0c;重新编译 #…

Unity3D高级编程:主程手记学习1

第一章 软件架构 Untiy 分层设计 分层后再分治

使用基于jvm-sandbox的对三层嵌套类型的改造

使用基于jvm-sandbox的对三层嵌套类型的改造 问题背景 先简单介绍下基于jvm-sandbox的imock工具&#xff0c;是Java方法级别的mock&#xff0c;操作就是监听指定方法&#xff0c;返回指定的mock内容。 jvm-sandbox 利用字节码操作和自定义类加载器的技术&#xff0c;将原始方法…

企业直播MR虚拟直播(MR混合现实直播技术)视频介绍

到底什么是企业直播MR虚拟直播&#xff08;MR混合现实直播技术&#xff09;&#xff1f; 企业直播MR虚拟直播新玩法&#xff08;MR混合现实直播技术&#xff09; 我的文章推荐&#xff1a; [视频图文] 线上研讨会是什么&#xff0c;企业对内对外培训可以用线上研讨会吗&#x…

Python学习笔记_基础篇(三)_数据类型之列表

一.基本数据类型 整数&#xff1a;int 字符串&#xff1a;str(注&#xff1a;\t等于一个tab键) 布尔值&#xff1a; bool 列表&#xff1a;list &#xff08;元素的集合&#xff09; 列表用[] 元祖&#xff1a;tuple 元祖用&#xff08;&#xff09; 字典&#xff1a;dict 注&a…

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…

Python语言入门简介

一、Python的历史 关键点: Python是一种用途广泛、解释性、面向对象的程序设计语言。 Python是新西兰的Guido van Rossum在1990 年创建的&#xff0c;它以英国流行喜剧“Monty Python的飞行马戏团”命名。van Rossum将Python开发作为一个嗜好&#xff0c;Python 因其简单、简洁…

flutter开发实战-实现左右来回移动的按钮引导动画效果

flutter开发实战-实现左右来回移动的按钮引导动画效果 最近开发过程中需要实现左右来回移动的按钮引导动画效果 一、动画 AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。Animati…

VBA技术资料MF42:VBA_从Excel中上面的单元格复制公式

【分享成果&#xff0c;随喜正能量】唯有梦想才配让你不安&#xff0c;唯有行动才能解除你的不安.绳锯木断&#xff0c;水滴石穿。也许你现在做的事情很小&#xff0c;只要你能日积月累的坚持下去&#xff0c;才会发现意义非凡。所谓的成功&#xff0c;便是别人失败的时候你还在…

每天一道leetcode:剑指 Offer 13. 机器人的运动范围(中等广度优先遍历剪枝)

今日份题目&#xff1a; 地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0]的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&#xff0c;也不能进入行坐标和列坐标的数位之…

ArcGIS入门操作手册

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

从零开始 Spring Cloud 10:Elasticsearch

从零开始 Spring Cloud 10&#xff1a;Elasticsearch 图源&#xff1a;laiketui.com 基础 什么是 Elasticsearch Elasticsearch 是一个开源搜索引擎&#xff0c;可以用它实现从海量数据中对数据的高效查询。 关于 Elasticsearch 的历史渊源以及广泛用途&#xff0c;可以观看…