base64 显示图片和pdf

最新推荐文章于 2024-06-13 11:17:58 发布
最新推荐文章于 2024-06-13 11:17:58 发布
阅读量9k 收藏 8
点赞数 3
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsjzzcbq/article/details/108338235
版权

base64 显示图片和pdf，通过base64 编码在页面上显示图片和pdf，实现如下

 

1、图片

图片

java 代码，将图片转成 base64 字符串

package com.tmp;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Base64;

public class Demo1 {

    public static void main(String[] args) throws IOException {
        File file = new File("C:\\Users\\Administrator\\Desktop\\img\\xiyang.jpg");

        FileInputStream inputStream = new FileInputStream(file);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();

        byte[] bytes = new byte[1024];
        int len;
        while ((len = inputStream.read(bytes)) != -1) {
            baos.write(bytes, 0, len);
        }

        byte[] res = Base64.getEncoder().encode(baos.toByteArray());
        String str = new String(res);

        System.out.println(str);
    }
}

base64 字符串

html 代码

在 img标签中显示 base64编码图片时，src后的 base64字符串添加前缀 data:image/png;base64,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="https://img-blog.csdnimg.cn/2022010700215296007.png"  />		
	</body>
</html>

效果如下

2、pdf

 

pdf 内容

java代码

package com.tmp;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Base64;

public class Demo1 {

    public static void main(String[] args) throws IOException {
        File file = new File("C:\\Users\\Administrator\\Desktop\\article\\纳兰词一首.pdf");

        FileInputStream inputStream = new FileInputStream(file);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();

        byte[] bytes = new byte[1024];
        int len;
        while ((len = inputStream.read(bytes)) != -1) {
            baos.write(bytes, 0, len);
        }

        byte[] res = Base64.getEncoder().encode(baos.toByteArray());
        String str = new String(res);

        System.out.println(str);
    }
}

base64 字符串

html 代码

在 iframe中显示 base64编码pdf 时，src后的 base64字符串添加前缀 data:application/pdf;base64,

 

 

 

悟世君子
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
图片与base64互转、pdf文件转base64
weixin_43188760的博客
02-24 987
图片与base64互转、pdf文件转base64
小程序预览base64 码的pdf
10-22
5. **处理交互和安全问题**：由于涉及到网络请求和用户隐私，务必确保Base64编码的PDF数据的安全性，避免敏感信息泄露。同时，根据实际需求，可能还需要处理页面的滚动、缩放等交互功能。 6. **优化用户体验**：...
base64编码显示图片
lixinze的博客
05-11 2万+
1.base64编码显示图片 一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿到url地址后把url地址给前端 第一种方式简单,不需要服务器,但是这种不太符合现在...
base64存储图片/显示图片
黎鉴洪的博客
05-27 9066
不知道大家有没有这样一个需求：发布一篇文章，文章内容中可能涉及到图片，那么显示文章时候，如何展示文章如发布一样（包括图片），csdn 的发布文章就是一个很好的例子，虽然我不知道csdn是如何实现的，但我自己的实现方法主要有两种： 1.在富文本编辑器中上传图片，以IO流方式存储到文件服务器，上传成功后，返回图片的http地址（回显） 2.在富文本编辑器中上传图片，将图片以base64方式存储到数...
文件转base64有哪些前缀格式
最新发布
ivan5277的博客
06-13 822
这个格式常用于将文件内容直接嵌入HTML、CSS或JavaScript中，以便在网络传输时无需额外的HTTP请求，或者在某些API交互中作为文件内容的携带形式。参数可以在某些情况下附加到数据URI中以指定建议的文件名，但这不是标准Base64编码格式的一部分，且浏览器可能不会直接使用此参数保存文件时。文件转换为Base64编码时，通常会包含一个前缀，用来指示数据的MIME类型以及可能的文件名。部分是文件内容经过Base64编码后的字符串。是文件内容经过Base64编码后的字符串。注意，在上述示例中，
使用base64，展示图片
Crazy_GirlLL的博客
02-23 2256
使用base64和img标签组合出来的是这个样子 <img src=“data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU”/> 所以代码是： <template> <div class="communityPage" v-loading="loadin
使用【Blob、Base64】两种方式显示【文本、图片、视频】 & 使用 video 组件播放视频
凉了的凉茶的博客
10-11 4688
Blob 对象的类型是由 MIME 类型（Multipurpose Internet Mail Extensions）来确定的。MIME 类型是一种标准，用于表示文档、图像、音频、视频等多媒体文件的类型。
base64格式图片直接显示
qq_34907249的博客
02-08 6728
<img :src="'data:image/png;base64,'+url"/>
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
使用表现显示Base64文件，包括Pdf和Jpg
08-29
使用表现显示Base64文件，包括Pdf和Jpg
VB任意图像转换为Base64文本
01-03
总之，VB将本地图片转换为Base64编码的过程涉及了文件读取、二进制数据转换和用户界面交互等多个环节，这需要对VB编程和Base64编码有深入理解。通过使用模块和类文件，可以创建一个灵活且可复用的解决方案，以满足...
C++ Builder的base64和图片互转
03-06
在本主题“C++ Builder的base64和图片互转”中，我们将深入探讨如何在C++ Builder中实现base64编码和解码与图片之间的转换。 Base64是一种用于在网络上传输二进制数据的编码方式，它将二进制数据转化为ASCII字符，...
base64格式图片展示
weixin_65969505的博客
08-23 4713
原文链接：https://blog.csdn.net/happyzhlb/article/details/129245407。base64,图片的base64" />base64, base64编码的Javascript代码。base64, base64编码的icon图片数据。base64, base64编码的jpeg图片数据。base64, base64编码的gif图片数据。base64, base64编码的png图片数据。data:text/javascript, Javascript代码。
Base64图片页面显示
m0_73481765的博客
06-30 1万+
可以在 JavaScript 代码中动态创建一个 Image 对象，然后将 Base64 编码的图片数据赋值给它的 src 属性，最后将这个 Image 对象添加到页面中。这样就可以将 Base64 编码的图片在页面上显示出来了。需要注意的是，如果图片太大，可能会导致页面加载速度变慢，因此不建议在页面中大量使用 Base64 编码的图片。，其中 MIME type 表示数据的类型，比如 image/png 表示 PNG 图片，base64 表示数据使用 Base64 编码，接着是实际的编码数据。
Base64详解：玩转图片Base64编码
青春木鱼的博客
06-29 4万+
图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生，本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大，不过只是希望通过一些浅显的论述，让你知道什么是图片的 base64 编码，为什么我们要用它，我们如何使用并且方便的使用它，并让你懂得如何去在前端的实际工作中运用它。...
HTML显示pdf格式的图片的方法
qq_49249150的博客
11-09 8134
HTML显示pdf格式的图片的方法 在正常的html代码中，img标签是无法显示pdf格式的图片的，然而在我们投简历的时候最好的格式就是pdf格式，所用我们应该用相应的标签来显示pdf格式的图片 1，embed标签 embed 标签 – 定义网页中嵌入除图片外的多媒体，不过他不符合标准网页设计的理念,不赞成使用.embed标签已经被符合标准的object标签代替。 <embed src="${pageContext.request.contextPath}/admin/indexs/images/re
使用base64显示图片
HelianthS的博客
08-08 1841
因为在使用Thymeleaf模板H5生成pdf文件时需要使用图片生成盖章功能,在使用图片链接的时候,模板并没有去请求图片,所以要使用base64的方式去显示。 前端渲染: <img th:src="'data:image/png;base64,' + ${imgStr}" /> 后端返回: byte[] bytes = iossApi.downLoad("test1...
vue 把PDF的base64 转成图片 预览
Jw_1201的博客
03-29 5142
PDF和img图片一起预览把PDF的base64转成图片预览
HTML中img标签base64显示图片
热门推荐
象在舞的技术专栏
12-28 4万+
在浏览网页的时候大家可能会注意到一个奇怪的现象，有的图片的路径后面是一串很长的字符串，例如： data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMAAAABJ...
将网页中一个包含图片和文字，id为pdf的div的内容转换为 Canvas 对象，并转换为base64，图片未显示
05-23
将一个包含图片和文字的div转换为Canvas对象，并转换为base64格式可以分为以下几个步骤： 1. 获取div元素和其中的文本内容和图片元素 2. 创建一个空的Canvas元素 3. 将文本内容和图片绘制到Canvas上 4. 将Canvas转换为base64格式 代码实现如下： ```javascript // 获取div元素和其中的文本内容和图片元素 const divElement = document.getElementById('pdf'); const text = divElement.innerText; const image = divElement.querySelector('img'); // 创建一个空的Canvas元素 const canvas = document.createElement('canvas'); canvas.width = divElement.offsetWidth; canvas.height = divElement.offsetHeight; // 获取Canvas的绘图上下文 const ctx = canvas.getContext('2d'); // 将文本内容和图片绘制到Canvas上 ctx.font = '16px Arial'; ctx.fillText(text, 10, 50); if (image) { ctx.drawImage(image, 0, 0); } // 将Canvas转换为base64格式 const base64 = canvas.toDataURL(); console.log(base64); ``` 值得注意的是，如果图片未加载完成或者未显示，Canvas中不会绘制该图片。因此在使用此方法之前，需要确保图片已经加载完成并且已经显示在页面上。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悟世君子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值