将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.只有单值属性的简…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
