在新窗口中打开 base64 格式的图片

最新推荐文章于 2025-05-22 09:42:50 发布

原创最新推荐文章于 2025-05-22 09:42:50 发布 · 9.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#window.open #base64 #新窗口

技巧专栏收录该内容

4 篇文章

订阅专栏

 const img = new Image();
 img.src = this.base64String;
 const newWin = window.open("", "_blank");
 newWin.document.write(img.outerHTML);
 newWin.document.title = "流程图"
 newWin.document.close();

原理是找到 window.open 返回的 window 对象并操作里面的 document 对象。img.outerHTML 是一串字符串形式的标签，说明可以在新窗口中操作 dom 元素。

stackoverflow链接

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Slice-ddd

关注关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html js 新窗口打开base64图片链接,JS在浏览器中解析Base64编码图像

weixin_28717647的博客

06-04

2329

上一篇介绍中，我们将二进制文件(BLOB)保存为Base64编码的文本，这些文本可以内嵌在XML的标签中，因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。浏览器对Base64的支持图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异，IE7，FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因...

打开新窗口预览base64的实现

weixin_48474646的博客

02-06

1498

打开新窗口预览base64的实现。

参与评论您还未登录，请先登录后发表或查看评论

Base64编码：图片传输的便捷之道

最新发布

爱的叹息的专栏

05-22

732

Base64 是一种将二进制数据编码为 ASCII 字符串的方法，常用于在网络上传输或嵌入到文本格式中（如 HTML、CSS、JSON）。其原理是将每 3 个字节的二进制数据拆分为 4 组 6 位数据，并转换为对应的 Base64 字符。虽然 Base64 编码后的数据体积增大约 33%，但其兼容性好，适合小文件（如图标、验证码）的传输。Java 提供了 Base64 工具类，可以轻松将图片转换为 Base64 字符串，前端可直接通过 data URL 使用。然而，Base64 图片无法缓存，且不利于 SE

html js 新窗口打开base64图片链接,js 图片转base64的方式(两种)

weixin_42442653的博客

06-04

1377

方式一：Blob和FileReader 对象实现原理：使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]使用FileReader 对象接收blobjs 图片转base64方式getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")functi...

JavaScript - 在新窗口中打开 base64 格式的图片

idomyway的博客

11-25

4587

前言从后台返回img的base64，点击跳到新页面进行展示代码 const img = new Image() img.src = 'data:image/png;base64,' + data.imgbase64 const newWin = window.open('', '_blank') newWin.document.write(img.outerHTML) newWin.document.title = wjmc newWin.document

js加载base64图片

08-12

在JavaScript（JS）中加载Base64编码的图片是一种常见的技术，特别是在动态创建或处理图像时。Base64是一种用于将二进制数据转换为文本格式的方法，以便可以在HTML和JavaScript中安全地传递。以下是对这个主题的详细...

JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

11-27

本文主要探讨了如何使用JavaScript来实现一个功能，即为页面中所有的`<img>`标签添加`onclick`事件，并在用户点击图片时，在新窗口中打开图片进行查看。这个功能对于提升用户体验，尤其是展示大量图片的网站来说，是...

typora+picgo实现本地自动转储图片base64值

qq_37957939的博客

08-25

1240

Typora是一款非常优秀的markdown编辑器，他自带的图片上传服务以及其他各种功能方便了很多。但是因为使用picgo实现的图片上传服务依赖于网络，哪怕是本地图床转储，这不利于离线环境的跨设备传输。有时候我们要给别人拷贝一份md文件，却因为对方链接不到自己的图床而苦恼，于是我尝试了在md文件中用data协议嵌入图片数据的方式，尝试后发现可以成功。结合utools的图片压缩插件和编码解码插件，使用了一段时间，但是每次都有截图，复制到utools压缩，编码，还是有些麻烦。后来想着魔改一个picgo的插件，

转换Base64「Convert Base64」-crx插件

03-10

允许将图像转换为base64的小工具。您可以使用该按钮来从您的计算机转换一个imagem或... 允许将图像转换为base64的小工具。您可以使用该按钮将电脑中...转换将在一个新窗口中打开，您可以将其复制。支持语言:English

base64编码后的文件地址过长导致a标签失效

qq_43374968的博客

10-11

2497

做了一个Excel导出功能，因为要导出5W+条数据，刚开始是因为处理超时，就提高了nginx的超时时间 proxy_connect_timeout 300s; proxy_send_timeout 300s; proxy_read_timeout 300s; 不超时了之后又内存溢出了，查了之后就加了运行内存 -Xms256m -Xmx1024m 好不容易数据传到了前台，却发现没反应，经过两天时间的...

base64地址格式的图片，从新窗口打开

︶￣城南花已开

01-11

965

base64 格式的图片 base64跳转新页面跳转新页面

base64地址格式的图片，从新窗口打开&&使用window.open打开新的页面并修改样式添加内容

蓝胖子的博客

07-07

1488

【代码】base64地址格式的图片，从新窗口打开&&使用window.open打开新的页面并修改样式添加内容。

js 导出txt文件、blob流视频下载，window.open预览、打开、下载base64图片、pdf、文件

0303

12-08

3962

【代码】js 导出txt文件、blob流视频下载，window.open预览、打开、下载base64图片、pdf、文件。

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

无心

08-15

603

这意味着blob URL并不持久，它们只存在于当前浏览器会话中。如果你在一个新的浏览器窗口或标签页中打开一个blob URL，它将不起作用，因为该URL是特定于之前的浏览器上下文的。Blob：是一个特殊的URL方案，它用于表示指向浏览器内存中Blob对象或File对象的引用。开始的代码是这样的，新开一个窗口显示经过base64编码后的图片，但是url太长了显示失败。解决方法：这段代码接收一个Base64编码的图像数据，把它转换为一个Blob对象。注意：blob URL是短暂的。

elementui，js，window.open预览、打开、下载base64图片、pdf、文件

liaoyi9203的博客

01-11

2727

在这里文件的base64字符串是带前面的头信息的，如下： data:image/jpeg;base64,/9j/4QGCRX data:application/pdf;base64,JVBERi0x showOrDownload: function (base64String) { //这里截取后的fileHeader是data:image/jpeg var fileHeader = base64String.slice(0, base64String.indexOf(";base64")); //图

在chrome新版本上使用window.open显示base64 pdf数据(Show base64 pdf data using window.open on chrome new version)

万事俱备，就差一个程序员了

09-19

1065

I am using following code for open base64 data as pdf in new window var pdf=response.data.base64; var doc = document.createElement("a"); doc.href ='data:application/octet-stream;base64,' + pdf; doc.target = "blank"; doc.click(); $window.open('data

前端生成base64预览图片

Junibl1231的博客

04-07

1370

前端生成base64预览图片

读取本地图片并编码为base64格式

glt3953的专栏

04-23

1017

读取本地图片并编码为base64格式 bool PluginImp::GetImageFromLocal( std::string image_path ) { HANDLE pfile; pfile = ::CreateFile(base::SysUTF8ToWide(image_path).c_str(), GENERIC_READ, 0, NULL, OPEN_EXISTING,

python base64的字符串转成图片

02-19

当你接收到一个通过Base64编码过的字符串表示的图片时，你需要将其解码回原始的二进制形式，并保存为图片文件。以下是详细步骤以及对应的Python代码示例来完成这一任务： ### 步骤说明 1. **导入所需库** 需要引入`base64`标准库来进行解码工作，同时如果想要显示或进一步处理这张图片的话还可以选择性地加载`PIL.Image`（来自Pillow包）或其他图像处理相关的库。 2. **准备Base64编码的字符串** 确保你已经有了代表一张图片的Base64编码后的字符串。通常这样的字符串会以某种前缀开头（例如"data:image/png;base64,"），这是为了指明数据的内容类型及编码方式，但在实际操作中我们可以忽略这部分内容仅保留纯编码部分。 3. **去除Base64字符串中的非编码字符** 如果你的Base64字符串包含了前面提到的那种描述性的头部信息，则需要先把它们去掉，只留下真实的Base64编码部分。 4. **解码Base64字符串得到byte数组** 利用`base64.decodebytes()`或者`base64.b64decode()`函数可以将Base64编码转换回原本的字节流(byte array)。 5. **创建并保存图片文件** 把上述获得的字节数组写入一个新的文件即生成了相应的图片文件。 6. （可选）使用PIL展示图片若你想立即查看结果而不必手动打开图片文件夹找到新建立好的文件，那么利用Pillow库可以帮助你在程序内部显示出该图片预览窗口。 ### 示例代码这里给出一段简单的Python脚本来演示以上流程： ```python import base64 from PIL import Image from io import BytesIO def base64_to_image(base64_str, output_path=None): """ Convert a base64 string to an image file. :param base64_str: The input base64 encoded string representing the image content without prefix like 'data:image/jpeg;base64,'. :param output_path: Path where you want to save the decoded image. If None, it won't be saved but returned as PIL Image object instead. :return: A Pillow Image instance if no path provided for saving; otherwise returns nothing. """ # Remove any data URI scheme prefixes and decode clean_base64 = ','.join(base64_str.split(',')[1:]) if ',' in base64_str else base64_str img_bytes = base64.b64decode(clean_base64) # Create an IO stream from bytes byte_stream = BytesIO(img_bytes) # Open image using PIL/Pillow library img = Image.open(byte_stream).convert("RGB") if output_path: img.save(output_path) else: return img if __name__ == "__main__": # Example usage - replace this with your actual Base64-encoded string example_base64_jpg = "YOUR_BASE_64_ENCODED_IMAGE_STRING_HERE" result_img = base64_to_image(example_base64_jpg) result_img.show() # Display the resulting image directly # Or alternatively specify a filepath to write out the image there # base64_to_image(example_base64_jpg, "./output.jpg") ``` 这段脚本展示了怎样接收一个Base64编码过且可能含有MIME类型的头信息的字符串输入，对其进行清理和解码之后最终恢复出原图，并可以选择是否直接存储下来或是即时显示出来供开发者确认效果。