前端实现在PDF上添加标注(1)
前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。
期初在互联网上一通搜索，对这个需求来讲发现了两个问题。
第一：有些同行给的方案不符合预期。大多数是在PDF的上面加一层透明层，然后再在这个透明层上面添加文字。这样做批注不能随PDF滚动或放大缩小而跟随，回显也是一个麻烦事，可以说没办法回显。
第二：有些很强，功能很全面的给PDF添加批注的插件，完全符合需求，但是需要支付几百上千的费用。
因此只能硬着头皮开发了。
主要用 pdfjs + pdfjs-dist + jspdf + fabric实现，最终完美完成用户需求
效果展示：
1、添加自由线：
2、添加文字标注（可以对文字标注进行拖动位置，放大缩小）
3、添加矩形和箭头（添加后可调整位置，大小）
4、删除已经添加过的批注，以及将添加批注的PDF导出，带批注的PDF。
另外还能有很多其他的批注都能实现，比如添加图片，修改颜色，修改画笔粗细等等。
提供源码
相关文章：
前端实现在PDF上添加标注(1)
前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。 期初在互联网上一通搜索，对这个需求来讲发现了两个问…...
螺旋矩阵 II
螺旋矩阵 II 一、题目描述 给定一个正整数 n，请你生成一个包含 1 到 n^2 所有元素的 n x n 正方形矩阵，元素顺序按顺时针的方式进行螺旋排列。 示例 1：输入：n 3 输出：[[1,2,3],[8,9,4],[7,6,5]]示例 2：…...
【愚公系列】《Python网络爬虫从入门到精通》001-初识网络爬虫
标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主&…...
【linux学习指南】模拟线程封装与智能指针shared_ptr
文章目录 📝线程封装🌉 Thread.hpp🌉 Makefile 🌠线程封装第一版🌉 Makefile:🌉Main.cc🌉 Thread.hpp: 🌠线程封装第二版🌉 Thread.hpp:🌉 Main.cc …...
10、Python面试题解析：解释reduce函数的工作原理
reduce 是 Python 中的一个高阶函数，位于 functools 模块中。它的作用是将一个可迭代对象（如列表、元组等）中的元素依次通过一个二元函数（即接受两个参数的函数）进行累积计算，最终返回一个单一的结果。 1.…...
【含开题报告+文档+PPT+源码】学术研究合作与科研项目管理应用的J2EE实施
开题报告 本研究构建了一套集注册登录、信息获取与科研项目管理于一体的综合型学术研究合作平台。系统用户通过注册登录后，能够便捷地接收到最新的系统公告和科研动态新闻，并能进一步点击查看详尽的新闻内容。在科研项目管理方面，系统提供强…...
MySQL主从复制过程，延迟高，解决应对策略
MySQL主从复制延迟高是常见的性能问题，通常由主库写入压力大、从库处理能力不足或配置不当导致。以下从原因定位、优化策略和高级解决方案三个维度提供系统性解决方法： 一、快速定位延迟原因 1. 查看主从同步状态 SHOW SLAVE STATUS\G关键字段…...
Deepseek模拟阿里面试——数据库
在模拟阿里面试时，数据库部分需要涵盖广泛的知识点，包括基础概念、事务管理、索引优化、数据库设计、高并发处理、分布式数据库等。以下是对这些问题的详细分析和解答： 事务的ACID特性是什么，如何保证？ ACID特性&…...
大数据学习之SparkStreaming、PB级百战出行网约车项目一
一.SparkStreaming 163.SparkStreaming概述 Spark Streaming is an extension of the core Spark API that enables scalable, high-throughput, fault-tolerant stream processing of live data streams. Spark Streaming 是核心 Spark API 的扩展，支持实时数据…...
Java 高频面试闯关秘籍
目录 Java基础篇：涵盖OOP、多线程、集合等基础知识。Java高级篇：深入探讨HashMap、JVM、线程池等高级特性。Java框架篇：介绍Spring、SpringMVC、MyBatis等常用框架。Mysql数据库篇：包含SQL语句、事务、索引等数据库知识。分布式技…...
边缘计算网关驱动智慧煤矿智能升级——实时预警、低延时决策与数字孪生护航矿山安全高效运营
迈向智能化煤矿管理新时代 工业物联网和边缘计算技术的迅猛发展，煤矿安全生产与高效运营正迎来全新变革。传统煤矿监控模式由于现场环境复杂、数据采集和传输延时较高，已难以满足当下高标准的安全管理要求。为此，借助边缘计算网关的实时数据…...
Oracle认证大师（OCM）学习计划书
Oracle认证大师（OCM）学习计划书 一、学习目标 Oracle Certified Master（OCM）是Oracle官方认证体系中的最高级别认证，要求考生具备扎实的数据库管理技能、丰富的实战经验以及解决复杂问题的能力。本计划旨在通过系统化的…...
力扣 单词拆分
动态规划，字符串截取，可重复用，集合类。 题目 单词可以重复使用，一个单词可用多次，应该是比较灵活的组合形式了，可以想到用dp，遍历完单词后的状态的返回值。而这里的wordDict给出的是list&…...
如何在Linux中设置定时任务（cron）
在Linux系统中，定时任务是自动执行任务的一种非常方便的方式，常常用于定期备份数据、更新系统或清理日志文件等操作。cron是Linux下最常用的定时任务管理工具，它允许用户根据设定的时间间隔自动执行脚本和命令。在本文中，我们将详…...
C# ASP.NET核心特性介绍
.NET学习资料 .NET学习资料 .NET学习资料 在当今的软件开发领域中，C# ASP.NET凭借其强大的功能和丰富的特性，成为构建 Web 应用程序的重要技术之一。以下将详细介绍 C# ASP.NET的核心特性。 多语言支持 ASP.NET 支持多种语言进行开发，这使…...
Response 和 Request 介绍
怀旧网个人博客网站地址：怀旧网，博客详情：Response 和 Request 介绍 1、HttpServletResponse 1、简单分类 2、文件下载 通过Response下载文件数据 放一个文件到resources目录 编写下载文件Servlet文件 public class FileDownServlet exten…...
Spring常用注解和组件
引言 了解Spring常用注解的使用方式可以帮助我们更快速理解这个框架和其中的深度 注解 Configuration：表示该类是一个配置类，用于定义 Spring Bean。 EnableAutoConfiguration：启用 Spring Boot 的自动配置功能，让 Spring Boo…...
Spring中都应用了哪些设计模式？
好的！以下是您提到的八种设计模式在 Spring 中的简单示例： 1. 简单工厂模式 简单工厂模式通过传入参数来决定实例化哪个类。Spring 中的 BeanFactory 就是简单工厂模式的应用。 示例代码： // 1. 创建接口和具体实现类 public interface A…...
VSCode的安裝以及使用
c配置: 【MinGw-w64编译器套件】 https://blog.csdn.net/weixin_60915103/article/details/131617196?fromshareblogdetail&sharetypeblogdetail&sharerId131617196&sharereferPC&sharesourcem0_51662391&sharefromfrom_link Python配置: 【簡單ÿ…...
Datawhale 组队学习 Ollama教程 task1
一、Ollama 简介 比喻：Ollama 就像是一个“魔法箱子”，里面装满了各种大型语言模型（LLM）。你不需要懂复杂的魔法咒语（配置），只需要轻轻一按（一条命令），就能让…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 ：主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 ：确保数据的完整性，便于数据的查询和管理。 示例 ：在学生信息表中，学号可以作为主键ÿ…...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...