前端实现在PDF上添加标注(1)
前段时间接到一个需求,用户希望网页上预览PDF,同时能在PDF上添加文字,划线,箭头和用矩形框选的标注,另外还需要对已有的标注进行修改,删除。
期初在互联网上一通搜索,对这个需求来讲发现了两个问题。
第一:有些同行给的方案不符合预期。大多数是在PDF的上面加一层透明层,然后再在这个透明层上面添加文字。这样做批注不能随PDF滚动或放大缩小而跟随,回显也是一个麻烦事,可以说没办法回显。
第二:有些很强,功能很全面的给PDF添加批注的插件,完全符合需求,但是需要支付几百上千的费用。
因此只能硬着头皮开发了。
主要用 pdfjs + pdfjs-dist + jspdf + fabric实现,最终完美完成用户需求
效果展示:
1、添加自由线: 2、添加文字标注(可以对文字标注进行拖动位置,放大缩小)
3、添加矩形和箭头(添加后可调整位置,大小)
4、删除已经添加过的批注,以及将添加批注的PDF导出,带批注的PDF。
另外还能有很多其他的批注都能实现,比如添加图片,修改颜色,修改画笔粗细等等。
提供源码
相关文章:
前端实现在PDF上添加标注(1)
前段时间接到一个需求,用户希望网页上预览PDF,同时能在PDF上添加文字,划线,箭头和用矩形框选的标注,另外还需要对已有的标注进行修改,删除。 期初在互联网上一通搜索,对这个需求来讲发现了两个问…...
Springboot 中如何使用Sentinel
在 Spring Boot 中使用 Sentinel 非常方便,Spring Cloud Alibaba 提供了 spring-cloud-starter-alibaba-sentinel 组件,可以快速将 Sentinel 集成到你的 Spring Boot 应用中,并利用其强大的流量控制和容错能力。 下面是一个详细的步骤指南 …...
如何优化React应用的性能?
文章目录 1. 引言2. 渲染优化2.1 使用 React.memo 避免不必要的重新渲染2.2 使用 shouldComponentUpdate 或 PureComponent2.3 使用 useMemo 和 useCallback 3. 异步渲染与懒加载3.1 使用 React.lazy 和 Suspense 实现懒加载3.2 分割代码(Code-Splitting)…...
ES的java操作
ES的java操作 一、添加依赖 在pom文件中添加依赖包 <dependencies><dependency><groupId>org.elasticsearch</groupId><artifactId>elasticsearch</artifactId><version>7.8.0</version></dependency><!-- elastic…...
八大排序——简单选择排序
目录 1.1基本操作: 1.2动态图: 1.3代码: 代码解释 1. main 方法 2. selectSort 方法 示例运行过程 初始数组 每轮排序后的数组 最终排序结果 代码总结 1.1基本操作: 选择排序(select sorting)也…...
算法学习笔记之贪心算法
导引(硕鼠的交易) 硕鼠准备了M磅猫粮与看守仓库的猫交易奶酪。 仓库有N个房间,第i个房间有 J[i] 磅奶酪并需要 F[i] 磅猫粮交换,硕鼠可以按比例来交换,不必交换所有的奶酪 计算硕鼠最多能得到多少磅奶酪。 输入M和…...
【数据结构】(8) 二叉树
一、树形结构 1、什么是树形结构 根节点没有前驱,其它节点只有一个前驱(双亲/父结点)。所有节点可以有 0 ~ 多个后继,即分支(孩子结点)。每个结点作为子树的根节点,这些子树互不相交。 2、关于…...
前端大屏适配方案:从设计到实现的全流程指南
引言 随着数据可视化需求的增长,大屏展示项目在前端开发中越来越常见。然而,大屏开发面临独特的挑战: 屏幕分辨率多样:从1080P到4K甚至8K,如何保证清晰度?布局复杂:多图表、多组件如何合理排列…...
10. Hbase Compaction命令
一. 什么是Compaction 在 HBase 中,频繁进行数据插入、更新和删除操作会生成许多小的 HFile,当 HFile 数量增多时,会影响HBase的读写性能。此外,垃圾数据的存在也会增加存储需求。因此,定期进行 Compact操作ÿ…...
完善sql盲注中的其他函数 dnslog+sqlmap外带数据
2. 布尔盲注 布尔盲注是通过观察应用程序的响应(如页面内容、HTTP 状态码等)来判断查询条件是否为真。 <?php // 数据库连接配置 $host localhost; $dbname testdb; $user root; $password password; // 创建数据库连接 $conn new mysqli($ho…...
Python 识别图片和扫描PDF中的文字
目录 工具与设置 Python 识别图片中的文字 Python 识别图片中的文字及其坐标位置 Python 识别扫描PDF中的文字 注意事项 在处理扫描的PDF和图片时,文字信息往往无法直接编辑、搜索或复制,这给信息提取和分析带来了诸多不便。手动录入信息不仅耗时费…...
Java 有哪些锁,他们的区别是什么
Java 锁的分类 Java 中的锁可以从多个维度进行分类: 悲观锁 vs. 乐观锁公平锁 vs. 非公平锁独占锁 (互斥锁) vs. 共享锁 (读写锁)可重入锁 vs. 不可重入锁自旋锁偏向锁 vs. 轻量级锁 vs. 重量级锁 (JVM 锁优化) 1. synchronized 关键字: 类型: 悲观锁…...
CSS实现单行、多行文本溢出显示省略号(…)
在网页设计中,我们常常遇到这样的情况:文本内容太长,无法完全显示在一个固定的区域内。为了让界面看起来更整洁,我们可以使用省略号(…)来表示内容溢出。这不仅能提升用户体验,还能避免内容溢出…...
网络协议/MQTT Paho.MQTT客户端库接口基础知识
开源c版mqtt客户端:https://github.com/eclipse-paho/paho.mqtt.cMQTT 客户端与服务器之间支持的通信协议主要包括: 协议地址格式加密默认端口适用场景服务器地址示例TCPtcp://不加密1883局域网或对安全性要求不高的场景tcp://localhost:1883TLS/SSLssl://加密8883对安全性要…...
VSCode C/C++ 开发环境完整配置及常见问题(自用)
这里主要记录了一些与配置相关的内容。由于网上教程众多,部分解决方法并不能完全契合我遇到的问题,因此我选择以自己偏好的方式,对 VSCode 进行完整的配置,并记录在使用过程中遇到的问题及解决方案。后续内容也会持续更新和完善。…...
深入解析 Go 中的 `io.Pipe()`:实现高效的并发通信
在 Go 语言中,io.Pipe() 是一个强大且灵活的工具,用于在不同的 goroutine 之间实现高效的同步和通信。它通过创建一对连接的 I/O 流,允许数据在管道的两端安全地传递。本文将详细介绍 io.Pipe() 的工作原理、主要特点、使用方法以及一些实际应…...
【Kubernetes】常用命令全解析:从入门到实战(中)
🐇明明跟你说过:个人主页 🏅个人专栏:《Kubernetes航线图:从船长到K8s掌舵者》 🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、什么是k8s 2、K8s的核心功能 二、资…...
嵌入式八股文面试题(二)C语言算法
相关概念请查看文章:C语言概念。 1. 如何实现一个简单的内存池? 简单实现: #include <stdio.h> #include <stdlib.h>//内存块 typedef struct MemoryBlock {void *data; // 内存块起始地址struct MemoryBlock *next; // 下一个内…...
Proxmox VE 8.3 qm 方式导入ESXi Linux OVA UEFI模式虚拟机
前言 实现esxi ova uefi 虚拟机导入到pve,Linux UEFI 都支持 创建一个105虚拟机 qm 参数使用参考,以下可以根据自己的实际情况执行调整 esxi 导出虚拟机参考 #vmid (100 - 999999999) vmid=105# qm vm name...
人工智能浪潮下脑力劳动的变革与重塑:挑战、机遇与应对策略
一、引言 1.1 研究背景与意义 近年来,人工智能技术发展迅猛,已成为全球科技领域的焦点。从图像识别、语音识别到自然语言处理,从智能家居、智能交通到智能医疗,人工智能技术的应用几乎涵盖了我们生活的方方面面,给人…...
【线性代数】1行列式
1. 行列式的概念 行列式的符号表示: 行列式的计算结果:一个数 计算模型1:二阶行列式 二阶行列式: 三阶行列式: n阶行列式: 🍎计算行列式 计算模型2:上三角形行列式 上三角形行列式特征:主对角线下皆为0。 上三角形行列式: 化上三角形通用方法:主对角线下,…...
厘米和磅的转换关系
在排版和设计领域,厘米(cm)和磅(pt)都是常用的长度度量单位,它们之间的转换关系基于特定的换算标准,下面为你详细介绍: 基本换算关系 磅是印刷行业常用的长度单位,1英寸…...
vant4 van-list组件的使用
<van-listv-if"joblist && joblist.length > 0"v-model:loading"loading":finished"finished":immediate-check"false"finished-text"没有更多了"load"onLoad">// 加载 const loading ref(fals…...
QT 异步编程之多线程
一、概述 1、在进行桌面应用程序开发的时候,假设应用程序在某些情况下需要处理比较复制的逻辑,如果只有一个线程去处理,就会导致窗口卡顿,无法处理用户的相关操作。这种情况下就需要使用多线程,其中一个线程处理窗口事…...
HCIA项目实践---OSPF的知识和原理总结
9.5 OSPF 9.5.1 从哪些角度评判一个动态路由协议的好坏? (1)选路佳(是否会出环) OSPF 协议采用链路状态算法,通过收集网络拓扑信息来计算最短路径,从根本上避免了路由环路的产生。 (…...
DNS污染:网络世界的“隐形劫持”与防御
在互联网的底层架构中,DNS(域名系统)如同数字世界的“导航员”,将用户输入的域名翻译成机器可读的IP地址。然而,DNS污染(DNS Poisoning)正像一场无声的“地址篡改”危机,威胁着全球网…...
Unity Shader Feature
Shader Feature 设置Keyword //0:Red 1:Green 2:Blue Mat.SetInt(“_Color”,0); 需要在创建时进行设置,运行时不可设置 Shader "Unlit/KeywordEnum" {Properties{[KeywordEnum(Red,Green,Blue)] _Color("Color",int) 0}SubShader{Pass{HLSL…...
Java-数据结构-栈与队列(常考面试题与单调栈)
在上一篇的学习中,我们学习了栈和队列的基本知识,以及它们对应都有哪些方法,在什么应用场景下如何使用,并且还对它们进行了模拟实现,而其实对于栈和队列的相关知识还远不止于此,而今天我们就对栈与队列进行…...
Python Pandas(11):Pandas 数据可视化
数据可视化是数据分析中的重要环节,它帮助我们更好地理解和解释数据的模式、趋势和关系。通过图形、图表等形式,数据可视化将复杂的数字和统计信息转化为易于理解的图像,从而便于做出决策。Pandas 提供了与 Matplotlib 和 Seaborn 等可视化库…...
wordpress模板文件结构超详解
wordpress网站建设中,主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步,本文所讲的模板文件结构包括两部分,一是指以文件名为概念的文件结构,二是指文件内容的代码结构。 一、如何使模板文件起作用 ↑ wordpres…...
大脑神经网络与机器神经网络的区别
大脑神经网络(生物神经网络)与机器神经网络(人工神经网络,ANN)虽然名称相似,但在结构、功能、学习机制等方面存在显著差异。以下是两者的主要区别: 1. 基础结构与组成 大脑神经网络: 由 生物神经元(约860亿个)通过突触连接形成动态网络。 神经元通过电化学信号(动作…...
【H5自适应】高端科技类pbootcms网站模板 – 三级栏目、下载与招聘功能支持
(H5自适应)高端大气的科技类pbootcms网站模板 带三级栏目、下载和招聘功能 后台地址:您的域名/admin.php 后台账号:admin 后台密码:123456 为了提升系统安全,请将后台文件admin.php的文件名修改一下。修改之后,后台…...
SQL-leetcode—1661. 每台机器的进程平均运行时间
1661. 每台机器的进程平均运行时间 表: Activity ----------------------- | Column Name | Type | ----------------------- | machine_id | int | | process_id | int | | activity_type | enum | | timestamp | float | ----------------------- 该表展示了一家工厂网站的…...
C++ Primer 跳转语句
欢迎阅读我的 【CPrimer】专栏 专栏简介:本专栏主要面向C初学者,解释C的一些基本概念和基础语言特性,涉及C标准库的用法,面向对象特性,泛型特性高级用法。通过使用标准库中定义的抽象设施,使你更加适应高级…...
清华大学:DeepSeek 如何赋能职场应用(35 页 PDF)
原来已经分享过清华大学的 DeepSeek:从入门到精通(100页PDF) 现在又来第二弹:《DeepSeek 如何赋能职场应用?从提示语技巧到多场景应用》 PDF里介绍了 DeepSeek 这一人工智能工具及其在职场中的应用,从基础…...
idea 错误: 找不到或无法加载主类 @C:\Users\admin\AppData\Local\Temp\idea_arg_file1549212448
idea 错误: 找不到或无法加载主类 C:\Users\admin\AppData\Local\Temp\idea_arg_file1549212448 该错误往往和左下角爱弹出的如下提示是一个意思 Error running ‘PayV3Test1.testTransferBatchesBatchId’ Error running PayV3Test1.testTransferBatchesBatchId. Command lin…...
开发指南098-logback-spring.xml说明
可执行的工程src\main\resources目录有logback-spring.xml文件用于配置日志。配置日志有些容易犯晕的地方,这里列出: 1、<logger>标签的优先级高于<root>标签:所以,如果<logger>标签指定了某个具体的包或类的…...
【SpringBoot3.x+】slf4j-log4j12依赖引入打印日志报错的两种解决方法
最开始引入了1.7.5版本的slf4j-log4j依赖包,但是控制台不报错也不显示日志 在https://mvnrepository.com/找到最新的2.0.16版本之后出现报错: 进入提示的slf4j网站中可以找到从2.0.0版本开始,slf4j-log4j已经被slf4j-reload4j取代࿱…...
【STM32】H743的以太网MAC控制器的一个特殊功能
调试743的MAC,翻阅手册的时候,发现了一个有意思的功能 混杂模式 H743的MAC控制器,可以设置为混杂模式,这就意味着它可以做一些网络监控的应用,譬如连接具备端口镜像功能的交换机,然后直接代替PC实现网络数据…...
Java LinkedList(单列集合)
LinkedList 是 Java 中实现了 List 接口的一个类,它属于 java.util 包。与 ArrayList 不同,LinkedList 是基于双向链表实现的,适合于频繁进行插入和删除操作的场景。 1. LinkedList 的基本特性 基于链表实现:LinkedList 使用双向…...
docker compose快速部署kafka-connect集群
先部署kafka集群,启动 参考:docker compose部署kafka集群-CSDN博客 创建timezone文件,内容填写Asia/Shanghai 再部署kafka-connect集群 networks: net: external: true services: kafka-connect1: restart: always image:…...
docker 部署nginx,nginx 504
遇到问题 原因: 因为用的docker 部署nginx, docker 应用与服务之间的端口未开放,导致访问不到服务。...
RealClip正式发布:重新定义轻量化数字内容交互体验
在移动互联网流量红利逐渐见顶的当下,用户对即时性、碎片化娱乐与交互体验的需求持续攀升。轻量化小游戏、VR互动、数字孪生、工业仿真等内容形态迅速崛起,但开发者却面临两大核心矛盾:如何将高性能互动内容轻量化嵌入现有应用中?…...
SQLMesh系列教程-2:SQLMesh入门项目实战(上篇)
假设你已经了解SQLMesh是什么,以及其他应用场景。如果没有,我建议你先阅读《SQLMesh系列教程-1:数据工程师的高效利器-SQLMesh》。 在本文中,我们将完成一个小项目或教程,以帮助你开始使用SQLMesh。你可以选择一步一步…...
把 DeepSeek1.5b 部署在显卡小于4G的电脑上
这里写自定义目录标题 介绍准备安装 Ollama查看CUDA需要版本安装CudaToolkit检查Cuda是否装好设置Ollama环境变量验证是否跑在GPU上ollama如何导入本地下载的模型安装及配置docker安装open-webui启动open-webui开始对话 调整gpu精度 介绍 Deepseek1.5b能够运行在只用cpu和gpu内…...
#渗透测试#批量漏洞挖掘#29网课交单平台 SQL注入
免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停止本文章读。 目录 1. 漏洞原理 2. 漏洞定位 3. 攻击验证示…...
试试DeepSeek写prompt+stable diffusion生成漫画
#deepseek #stable diffusion 模型:dreamshaperXL_v21TurboDPMSDE.safetensors 一、情节拟定 漫画情节由deepseek自编自导,画幅为四张。 Prompt 1: 魔法觉醒 "一个平凡的少年在阁楼发现一本古老的魔法书,书页散发着微弱的蓝光。画…...
java面试题之 int和Integer的区别
int和Integer的区别 1、Integer是int的包装类,int则是java的一种基本数据类型 2、Integer变量必须实例化后才能使用,而int变量不需要 3、Integer实际是对象的引用,当new一个Integer时,实际上是生成一个指针指向此对象;…...
Spring Bean的生命周期
1、对象实例化 2、属性设置 3、初始化 4、使用 5、销毁 示例代码如下: import org.springframework.stereotype.Component;Component public class SpringBeanA {public SpringBeanA() {System.out.println("第一步:实例化(spring对象&#x…...
Vue 发送 PDF 文件链接到 WinForm 程序进行打印
Vue 发送 PDF 文件链接到 WinForm 程序进行打印的完整流程如下: 1. Vue 端 Vue 通过 fetch 或 axios 发送 PDF 文件的 URL 给 WinForms 程序(WinForms 需要开启一个本地 API)。 <template><div><button click"sendPri…...