将PDF流使用 canvas 绘制然后转为图片展示在页面上(二)
将PDF流转为图片展示在页面上
使用 pdfjs-dist 库来渲染 PDF 页面到 canvas 上,然后将 canvas 转为图片
安装 pdfjs-dist 依赖
npm install pdfjs-dist
或者
yarn add pdfjs-dist
创建一个组件来处理 PDF 流的加载和渲染
该组件中是一个包含 PDF 文件的 ArrayBuffer 或者 Uint8Array。
将 pdf 流传入该组件中使用
/** @format */import React, { useState, useEffect } from 'react';
// import { pdfjs } from 'pdfjs-dist';
var pdfjs = require('pdfjs-dist/es5/build/pdf.js');
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;const PdfToImage = ({ pdfData }) => {const [imageSrc, setImageSrc] = useState(null);const base64ToArrayBuffer = (base64) => {var binary_string = window.atob(base64);var len = binary_string.length;var bytes = new Uint8Array(len);for (var i = 0; i < len; i++) {bytes[i] = binary_string.charCodeAt(i);}return bytes.buffer;};useEffect(() => {const renderPDF = async (arrayBuffer) => {const loadingTask = pdfjs.getDocument({ data: arrayBuffer });try {const pdf = await loadingTask.promise;const page = await pdf.getPage(1); // 获取第一页const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例const canvas = document.createElement('canvas');const canvasContext = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext,viewport,};await page.render(renderContext).promise;// 将canvas内容转换为图片const imageSrc = canvas.toDataURL('image/png');setImageSrc(imageSrc);} catch (error) {console.error('Error rendering PDF:', error);}};// 首先将base64的PDF流转为ArrayBufferlet arrayBuffer = base64ToArrayBuffer(pdfData);// 然后将ArrayBuffer格式的数据转为图片renderPDF(arrayBuffer);}, [pdfData]);return <div>{imageSrc && <img src={imageSrc} alt="PDF as image" />}</div>;
};export default PdfToImage;
使用示例
这里的PDF_content 也可以直接使用 ArrayBuffer 或者 Uint8Array 的格式,直接传入组件,将组件中的 base64ToArrayBuffer 方法不使用即可。
import React from 'react';
import PdfToImage from './PdfToImage.jsx';render() {const PDF_content = 'XXXX....BYFhEdCmVuZHN0cmVhbQplbmRvYmoKc3RhcnR4cmVmCjg2NTkxCiUlRU9GCg=='// base64 格式return (<PdfToImage pdfData={PDF_content}></PdfToImage>)}
相关文章:
将PDF流使用 canvas 绘制然后转为图片展示在页面上(二)
将PDF流转为图片展示在页面上 使用 pdfjs-dist 库来渲染 PDF 页面到 canvas 上,然后将 canvas 转为图片 安装 pdfjs-dist 依赖 npm install pdfjs-dist 或者 yarn add pdfjs-dist创建一个组件来处理 PDF 流的加载和渲染 该组件中是一个包含 PDF 文件的 ArrayBuffer…...
【深度学习】 零基础介绍卷积神经网络(CNN)
零基础介绍 卷积神经网络(CNN,Convolutional Neural Network)是深度学习中的一种神经网络,特别擅长处理图像和视频等有空间结构的数据。 假设我们在做一个“照片分类”的任务,比如判断一张照片中是猫还是狗。下面用一…...
Coze概述
### Coze概述 Coze(中文名为扣子)是由字节跳动开发的一个新一代AI应用开发平台,旨在让用户轻松创建各种AI驱动的应用和聊天机器人,无论用户的编程经验如何。以下是Coze的一些关键特性和功能: #### 关键特性 - **无代…...
康佳Android面试题及参考答案(多张原理图)
JVM 内存分布和分代回收机制是什么? JVM 内存主要分为以下几个区域。 堆(Heap)是 JVM 管理的最大的一块内存区域,主要用于存放对象实例。所有线程共享堆内存,在堆中又分为年轻代(Young Generation)和老年代(Old Generation)。年轻代又分为 Eden 区和两个 Survivor 区(…...
2022 年 3 月青少年软编等考 C 语言四级真题解析
目录 T1. 拦截导弹思路分析T2. 神奇的数列思路分析T3. 硬币思路分析T4. 公共子序列思路分析T1. 拦截导弹 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统。但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的…...
关于24年408真题的疑问
45.某计算机按字节编址,采用页式虚拟存储管理方式,虚拟地址和物理地址的长度均为32位,页表项的大小为4字节,页大小为4MB。虚拟地址结构如下: 这一道题如果不细想的话,其实是可以做对的,毕竟数字…...
【容器】k8s学习笔记基础部分(三万字超详细)
概念 应用部署方式演变 在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署在物理机上 优点:简单,不需要其它技术的参与 缺点:不能为应用程序定义资源使…...
dayjs(2kb)和momentjs(70kb)关系详述及项目中如何选择讲解
关系 API:Day.js被设计为Moment.js的极简替代品,其API和用法与Moment.js几乎完全一致。这使得开发者在两者之间进行切换时,学习成本极低。 理念: Moment.js是一个大而全的时间日期库,提供了丰富的日期时间操作方法&am…...
【Python网络爬虫笔记】11- Xpath精准定位元素
目录 一、Xpath 在 Python 网络爬虫中的作用(一)精准定位元素(二)应对动态网页(三)数据结构化提取 二、Xpath 的常用方法(一)节点选取(二)谓词筛选࿰…...
6.python列表
Python 列表 (List) 深度总结 文章目录 Python 列表 (List) 深度总结1. 列表的基本概念2. 访问列表中的元素3. 修改列表4. 删除列表元素5. 列表的操作符6. 列表的内置函数7. 列表的方法8. 列表的高级用法8.1 列表推导式 (List Comprehensions)8.2 列表的浅拷贝与深拷贝8.3 列表…...
Android中bindService和startService启动服务有何区别
Android中bindService和startService启动服务有何区别 bindService 和 startService 是 Android 中两种用于与 Service 交互的方式,它们的区别主要在于 生命周期管理 和 使用场景。以下是详细对比: 1. bindService方式 bindService 是一种绑定方式&am…...
超牛免费 机械臂模型、工业机器人模型下载网站集合
机械臂是一种高精度、多输入多输出的复杂系统,能够模仿人手的动作,按照给定程序、轨迹和要求实现自动抓取、搬运等功能。它通常由执行机构、驱动装置、控制系统以及传感器等组成,能够完成各种复杂的动作。 机械臂在工业、医学、娱乐、…...
引领未来的变革:15种前沿RAG技术及其应用探索
在现代人工智能领域,检索增强生成(RAG)技术逐渐成为推动各种应用的重要力量。这些技术通过结合信息检索与文本生成,能够更有效地处理和利用信息。本文将详细介绍15种前沿RAG技术及其具体应用实例,以帮助您更好地理解这…...
Scala泛型应用场景
Scala中的泛型(Generics)是一种强大的工具,允许开发者编写可重用的代码,同时保持类型安全。泛型在Scala中有多种应用场景,以下是一些常见的应用场景: 集合类: Scala的集合类(如List…...
AI监控赋能健身馆与游泳馆全方位守护,提升安全效率
一、AI视频监控技术的崛起 随着人工智能技术的不断发展,AI视频监控正成为各行业保障安全、提升效率的关键工具。相比传统监控系统,AI技术赋予监控系统实时分析、智能识别和精准预警的能力,让“被动监视”转变为“主动防控”。 二、AI监控应用…...
Avalonia实战实例二:添加三种状态的Svg图片按钮
文章目录 一、Avalonia和WPF中Style的不同1、Avalonia中舍弃了触发器2、Avalonia中Style不再使用x:Key命名区分二、使用Svg图片控件三、实现三种状态的按钮1、使用转换器2、伪类选择接着上一篇:使用Prism创建项目,并创建窗口 这一篇主要是添加: 两个Svg图片按钮,并包含三种…...
基于注意力的几何感知的深度学习对接模型 GAABind - 评测
GAABind 作者是苏州大学的生物基础与医学院, 期刊是 Briefings in Bioinformatics, 2024, 25(1), 1–14。GAABind 是一个基于注意力的几何感知蛋白-小分子结合模式与亲和力预测模型,可以捕捉小分子和蛋白的几何、拓扑结构特征以及相互作用。使用 PDBBind2020 和 CASF2016 作…...
arcGIS使用笔记(无人机tif合并、导出、去除黑边、重采样)
无人机航拍建图之后,通过大疆智图软件可以对所飞行的区域的进行拼图,但是如果需要对拼好的图再次合并,则需要利用到arcGIS软件。下面介绍arcGIS软件在这个过程中常用的操作。 1.导入tif文件并显示的方法:点击“”图标进行导入操作…...
Color-Light-Control-and-Four-Way-Responder based on STM32F103C8T6
Light Control and Responder 若要实现同样效果请看源码: gitee.com/apollo_666/Color-Light-Control-and-Four-Way-Responder # Abstract The design project for a decorative lighting controller enhanced our practical skills and engineering capabilities. During our…...
openGauss开源数据库实战二十八
文章目录 任务二十八 基于PowerDesigner的openGauss数据库设计任务目标实施步骤一、在Win11上安装 PowerDesigner16二、PowerDesigner快速入门1.启动和配置E-R概念建模2.创建数据项3.创建域4.创建实体5.创建两个实体之间的联系 三、PowerDesigner上的E-R建模1.只有单值属性的简…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
HashMap中的put方法执行流程(流程图)
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
协议转换利器,profinet转ethercat网关的两大派系,各有千秋
随着工业以太网的发展,其高效、便捷、协议开放、易于冗余等诸多优点,被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口,具有实时性、开放性,使用TCP/IP和IT标准,符合基于工业以太网的…...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件(6类核心文件) 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
