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

news2024/12/27 17:21:19

开始的代码是这样的,新开一个窗口显示经过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.coloradmin.cn/o/879509.html

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

相关文章

《算法竞赛·快冲300题》每日一题:“房间划分”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 房…

考公-判断推理-组合排列

例题 例题 例题 代入法 例题 排除法 例题

AMD限制资源用量CU_MASK

通过配置两个环境变量来控制进程所使用的CU&#xff1a; CU_MASK_0 CU_MASK_1 举例&#xff1a; 使用每个ES中的一半CU则配置如下&#xff1a; export CU_MASK_00xcccccccc export CU_MASK_10xcccccccc

判断推理 -- 图形推理 -- 位置规律

一组图&#xff1a;从前往后找规律。 二组图&#xff1a;从第一组图找规律&#xff0c;第二组图应用规律。 九宫格&#xff1a; 90%横着看找规律&#xff0c;第一行找规律&#xff0c;第二行验证规律&#xff0c;第三行应用规律。 所有有元素组成都是线&#xff0c;三角形&…

【C++ STL基础入门】初识STL

文章目录 前言一、STL是什么&#xff1f;1.STL概念2.容器是什么&#xff1f;3.STL的优势 二、将会学习到的stl和算法1.将会学到的容器2.算法3.字符串基础字符串字符串视图(basic_string_view) 总结 前言 本系列STL是以VS2022为编译器&#xff0c;C20为标准来写的一套STL。 ST…

笔记04:全局内存

一、CUDA内存模型概述 寄存器、共享内存、本地内存、常量内存、纹理内存和全局内存 一个核函数中的线程都有自己私有的本地内存。 一个线程块有自己的共享内存&#xff0c;对同一个线程块中所有的线程都可见&#xff0c;其内容持续线程块的整个生命周期。 所有线程都可以访问…

武汉地铁19号线完成5G专网全覆盖,现场测试下行速率超千兆!

近日&#xff0c;极目新闻记者从中国移动湖北公司获悉&#xff0c;随着武汉地铁19号线全线隧道正式贯通&#xff0c;湖北移动目前已完成新月溪公园至鼓架山站5G网络覆盖&#xff0c;轨行区5G专网全覆盖&#xff0c;并成功进行试车验证&#xff0c;19号线成为国内首条全线实现5G…

互联网发展历程:从中继器口不够到集线器的引入

互联网的发展&#xff0c;就像一场不断演进的技术盛宴&#xff0c;每一步的变革都在推动着我们的世界向前。然而&#xff0c;在网络的早期&#xff0c;一项重要的技术问题曾困扰着人们&#xff1a;当中继器的接口数量不足时&#xff0c;如何连接更多的设备&#xff1f;这时&…

C#_Array类型

简介 公共语言运行时中所有数组的基类、抽象类&#xff0c;用于创建、处理、搜索、排序数组。 常用属性 Rank&#xff1a;获取数组维数&#xff08;在多维数组中采用有序整数来标注&#xff0c;例如一维数组、二维数组、三维数组&#xff09;&#xff0c;数量从1开始。 leng…

记录--form 表单恢复初始数据

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 form 表单恢复初始数据 在现代的 Web 开发中&#xff0c;表单是不可或缺的组件之一。用户可以通过表单输入和提交数据&#xff0c;而开发者则需要对这些数据进行处理和存储。然而&#xff0c;在某些情…

web基础入门和PHP语言基础入门 一

web基础入门和php语言基础入门 一 WEB简介与HTTP入门WEB简介HTTP 简介HTTP 请求报文&#xff1a;请求方法&#xff1a;请求头部&#xff1a;&#xff08;常见的请求头&#xff09;HTTP 响应报文&#xff1a;响应状态码&#xff1a;Cookie HTML入门学习什么是HTML什么是标记语言…

调试 SELinux

semanage port -a -t http_port_t -p tcp 82 题目&#xff1a; 非标准端口 82 上运行的 WEB 服务器在提供内容时遇到问题。根据需要调试并解决问题&#xff0c; 并使其满足以下条件&#xff1a; 系统上的 web 服务器能够提供/var/www/html 中所有现在有的 html 文件&#xff…

分享一个使用Java工具类——git格式图片裁剪重组

git格式图片裁剪重组 有时候需要自己录制一个gif图片的时候就不知道去哪里录制&#xff0c;所以只能在百度找一个可以录制gif图片的软件&#xff0c;但是你会发现&#xff0c;你能找到的免费导出的都是有水印的&#xff0c;所以你可能就需要找一个水印少一点的软件了&#xff…

AI黑马挑战赛,探索研发新趋势丨IDCF

随着AI的出现&#xff0c;获取知识的成本大幅降低&#xff0c;当DevOps与AI相结合时&#xff0c;必将产生全新的化学反应。不断涌现的AI新工具提醒我们&#xff0c;一个全新的研发工作范式正在逐渐形成。而DevOps的核心理念是敏捷协同&#xff0c;作为工程师&#xff0c;如何通…

印度通过《2023年数字个人数据保护法案》

2023年8月7日&#xff0c;印度议会下议院&#xff08;Lok Sabha&#xff09;通过《2023年数字个人数据保护法案》&#xff08;Digital Personal Data Protection Bill 2023&#xff09;。8月9日&#xff0c;该法案获得上议院&#xff08;Rajya Sabha&#xff09;批准。 - 该法案…

Leaflet入门,Leaflet如何实现vue双向绑定数据添加到图片标记物到地图上,动态根据vue数据更新到地图上以及鼠标经过标记物显示提示框

前言 本章使用Leaflet的vue2-leaflet或者vue-leaflet插件方式实现vue数据绑定地图数据,实现地图标记物与vue数据的双向联动更新,以及鼠标经过标记物显示提示框功能。 实现效果演示 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定…

问题:module was compiled with an incompatible version of kotlin

module was compiled with an incompatible version of kotlin 简要说明 不同模块使用不一致的kotlin版本编译&#xff0c;导致最后merge的时候版本冲突出错了 解决方案 临时解决 build->rebuild project 永久解决 项目不使用kotlin&#xff0c;关闭插件kotlin enable-…

Blazor前后端框架Known-V1.2.12

V1.2.12 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…

山西电力市场日前价格预测【2023-08-15】

日前价格预测 预测明日&#xff08;2023-08-15&#xff09;山西电力市场全天平均日前电价为335.15元/MWh。其中&#xff0c;最高日前电价为390.18元/MWh&#xff0c;预计出现在19: 30。最低日前电价为296.13元/MWh&#xff0c;预计出现在13: 00。 价差方向预测 1&#xff1a; 实…

探秘未知:Unknome数据库揭示人体内未探索的基因和蛋白质奥秘

图片来源&#xff1a;RICHARD JONES/SCIENCE PHOTO LIBRARY/GETTY IMAGES 当我们谈论广阔且未被充分探索的领域时&#xff0c;往往会想到宇宙和地球的深海。然而&#xff0c;就在我们自身的人体内&#xff0c;仍有许多未知领域等待我们去探索。"Unknome"&#xff0c;…