CN116911264A

CN116911264A - 一种大型pdf批注方法及装置

Info

Publication number: CN116911264A
Application number: CN202311166666.XA
Authority: CN
Inventors: 谭彬彬; 赵晓冬; 李赛; 赵建新; 乔大伟
Original assignee: China Trade Promotion Information Technology Co ltd
Current assignee: China Trade Promotion Information Technology Co ltd
Priority date: 2023-09-12
Filing date: 2023-09-12
Publication date: 2023-10-20
Anticipated expiration: 2043-09-12
Also published as: CN116911264B

Abstract

本申请公开了一种大型PDF批注方法及装置，涉及计算机技术领域。所述大型PDF批注方法包括：获取待批注PDF文件；使用图形转换器对待批注PDF文件进行处理，获取待批注PDF文件的图片数据；对经过压缩处理的图片数据进行处理，获取缩略图数据；将待批注PDF文件和图片数据存储到数据库；利用CANVAS技术绘制图形对图片数据进行处理，在图片数据中生成批注信息，同时将批注信息序列化存储到数据库；将具有批注信息的图片数据转换为PDF文件。本申请的大型PDF批注方法及装置提供了PDF转换图片的方案，结合现有的CANVAS、SVG技术，为用户提供了一种高效的web前端批注PDF文件的方法，同时采用分页及图片压缩技术，有效提高了web加载速度，批注过程留痕，方便查看批注结果和历史。

Description

一种大型PDF批注方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种大型PDF批注方法以及大型PDF批注装置。

背景技术

在展览项目管理中，需要对企业提交的展会实施方案（PDF格式）进行审核。本方案提供前，通用的解决方案是采用传统PDF阅读器工具审核或纸质审核，这两种方式存在如下问题：

1、PDF设计方案文件大、页码多，无法快速精准的定位到批注位置，用户不能快速查阅批注，修正问题。

2、传统PDF审核只能通过PDF阅读器或纸质版审核，用户无法在web端在线快速加载并审阅批注，工作效率低。

3、审核过程的批注难以保存历史版本，并且历史版本不能跨版本精准定位具体批注位置对比，影响审批环节的工作效率。

4、工具审核方式，对非文本内容的编辑受限，如PDF内容为纯图片，缺乏二维图形批注（箭头、人字形、圆形等），也无法自定义批注图形。

5、纸质审核流程繁琐，效率低，容易出现错误，同时增加了纸质打印的成本。

6、线下交换文件方式不统一，归档不规范，容易丢失，增加归档管理工作的难度。

因此，希望有一种技术方案来解决或至少减轻现有技术的上述不足。

发明内容

本申请的目的在于提供一种大型PDF批注方法及装置来至少解决上述的一个技术问题。

本申请提供了下述方案：

第一方面，本申请提供一种大型PDF批注方法，所述大型PDF批注方法包括如下步骤：

获取待批注PDF文件；

使用图形转换器对所述待批注PDF文件进行处理，从而获取所述待批注PDF文件的图片数据并对所述图片数据进行压缩处理；

对经过压缩处理的所述图片数据进行处理，从而获取缩略图数据；

将待批注PDF文件和图片数据存储到数据库；

利用CANVAS技术绘制图形对图片数据进行处理，从而在所述图片数据中生成批注信息，同时将所述批注信息序列化存储到数据库；

将具有批注信息的图片数据转换为PDF文件。

可选地，所述获取待批注PDF文件包括如下步骤：

获取上传文件；

ajax调用服务器上传文件函数，所述文件函数传入三个参数，第一个参数为fileData（文件对象）、第二个参数为scale（压缩比例）传值、第三个参数quality（文件质量）传值；

根据所述fileData判断所述上传文件是否为PDF文件，若是，则获取所述上传文件作为所述待批注PDF文件。

可选地，所述使用图形转换器对所述待批注PDF文件进行处理，从而获取所述待批注PDF文件的图片数据包括如下步骤：

声明一个名为pdfFile的对象变量，把所述待批注PDF文件存储到磁盘中，然后把文件源名属性、文件路径属性、文件大小属性、存储日期属性存储到pdfFile对象；

使用图形转换器中pdfToImages函数获取到PDF文件转图片的结构数据集合对象，并赋值给pdfFileImages变量，从而获取所述待批注PDF文件的图片数据。

可选地，所述使用图形转换器中pdfToImages函数获取到PDF文件转图片的结构数据集合对象，并赋值给pdfFileImages变量，从而获取所述待批注PDF文件的图片数据包括如下步骤：

声明一个名为datas的List<JSONObject>集合变量，用于存储待批注PDF文件中所有PDF image结构数据；

通过pdfbox工具读取pdfFile对象，将PDF文件渲染到PDFRenderer对象；

循环pdf总的页数，通过索引从PDFRenderer中获取到每一个BufferedImage对象，并且设置缩放比例scale，然后赋值给imageBuff变量；

声明一个imageFile对象，通过imageIO对象把imageBuff写入到imageFile中，将imageFile存入磁盘；

通过Thumbnails工具类，调用CreateThumbnail方法，传入imageFile对象和quality参数，将imageFile对象进行等比例压缩；

声明一个JSONObject对象，命名为data，用于存储每张pdf image结构数据，然后写入四个参数，第一个参数为page，为当前图片在pdf中所属页数page，值为索引值+1；第二个参数为width，为当前图片的宽度；第三个参数为height，为当前图片的高度；第四个参数为文件路径（path），为当前图片存储在磁盘中的路径；

把data添加到datas集合中，循环结束，返回datas集合。

可选地，所述对所述图片数据进行压缩处理，从而获取缩略图数据包括如下步骤：

使用图形转换器中CreateThumbnail函数，传入所述datas集合；

循环datas集合，把datas集合中的每个待批注PDF文件的图片数据压缩成300px300px的缩略图，然后把pdf高清图片的文件路径追加后缀_thumb字符，作为缩略图的磁盘存储路径，循环生成缩略图数据。

可选地，所述利用CANVAS技术绘制图形对图片数据进行处理，从而在所述图片数据中生成批注信息包括如下步骤：

利用CANVAS技术生成待使用工具信息；

监控使用者动作，根据使用者动作，利用工具信息对图片数据进行处理，从而在所述图片数据中生成批注信息。

可选地，所述利用CANVAS技术生成待使用工具信息包括如下步骤：

服务端定义获取pdfFileImages的api接口，接口包含三个参数，第一个参数为文件的id，此参数为必传项，第二个参数为获取第几页数图片数据的page，此参数为必传项，第三个参数为一页获取多少张图片数据的size，此参数可以不传，默认值为10，函数返回Pageable分页对象；

Web客户端集成JavaScript SDK包，引用二维几何图形绘制js文件，在HTML的页面中定义一个DIV块状元素，DIV块状元素的ID值定义为pdf-canvas-container，在页面初始化函数中，调用初始化PDF批注器函数，函数传入三个参数，第一个参数传入的pdfFileId，第二个参数传入一个字符串值pdf-canvas-container，第三个参数传入一个object对象；

判断第一个参数pdfFileId和第二个参数pdf-canvas-container否为空，其中，若第一个参数pdfFileId或第二个参数pdf-canvas-container为空，则返回参数缺失，停止初始化，若第一个参数pdfFileId和第二个参数pdf-canvas-container不为空，则进入下一步；

根据函数传入的第一个参数pdfFileId获取DIV块状元素的DOM对象，检查DOM对象是否在HTML页面中定义，判断DOM对象的类型不等于object类型，返回DIV块状元素ID有误，停止转化，判断DOM对象的类型等于object类型，将DOM对象赋值给pdfContainer全局变量，进入下一步。

获取函数第三个参数object，判断参数类型不等于object类型，给options变量赋一个空对象，然后extend defaultOptions值，进入下一步；

声明名为pdfImages的数组，获取第一页10张pdf图片，ajax调用获取pdfFileImages的接口，传入三个参数，第一个参数id为pdfFileId，第二个参数page传入1，第三个参数size传入10，若ajax请求失败，返回加载pdf失败，停止初始化，若ajax请求成功，获取response data赋值给pdfImages数组，进入下一步；

调用DOM处理器，传入pdfContainer参数，生成工具栏元素，创建一个DIV元素，赋值给tools变量，获取二维图形扩展库中所有export的工具数组；

遍历数组创建button，icon元素，并且附加到tools元素中，然后把tools元素附加到pdfContainer DOM中，进入下一步；

调用DOM处理器，传入pdfContainer 参数，生成画布控制器元素，创建一个DIV元素，赋值给content变量，遍历pdfImages数组创建CANVAS元素，元素ID命名为CANVAS_${index}，index为循环的索引值，把content元素附加到pdfContainer DOM中，循环调用画布控制器构造函数，第一个参数传入CANVAS id值，第二个参数传入当前循环的image对象，第三个参数传入主方法的options值，根据CANVAS标签的所在父元素的宽度以及PDF image自然宽度和高度，等比例计算CANVAS画布和背景图片尺寸，循环调用画布控制器构造函数获取到CANVAS模型对象，并且push到CANVAS[${index}]数组中，然后通过监听CANVAS鼠标点击、移动事件，调用绘制图形的方法，实时传入x，y起始坐标和结束坐标，获取返回的路径，添加到画布，进入下一步；

调用DOM处理器，传入pdfContainer参数，生成菜单导航元素，创建一个DIV元素，赋值给menubar变量，创建ul列表，遍历thumbImages数组创建li元素，li元素展示一张pdf缩略图，把li元素添加到ul列表中，把ul列表添加到menubar元素中，把menubar元素添加到pdfContainer DOM中，监听menubar鼠标滚动事件，与content中画布控制器保持联动。

可选地，所述监控使用者动作，根据使用者动作，利用工具信息对图片数据进行处理，从而在所述图片数据中生成批注信息包括如下步骤：

从监听函数中实时获取起点坐标（fromX，fromY）和终点坐标（toX，toY），进入下一步；

根据用户选择的绘制工具，调用绘制二维几何图形函数，传入fromX，fromY，toX，toY四个参数，进入下一步；

获取到绘制图形函数的文件路径返回值，赋值给drawObject变量，并且把drawObject对象push到CANVAS的objects数组中，进入下一步；

调用CANVAS对象中的requestRenderAll函数，实施渲染二维几何图形；其中，画布控制面板CANVAS对象可以序列化为JSON对象与SVG对象，通过调用toJSON函数，可以把CANVAS对象序列化JSON对象，通过调用toSVG对象，可以把CANVAS的路径转换为SVG的路径，调用服务端存储批注信息api接口，将所述序列化对象存储到数据库；同时支持loadFromJSON、loadFromSVG两个函数将从服务器获取的批注信息解析为CANVAS对象并渲染到DOM元素中。

可选地，所述将具有批注信息的图片数据转换为PDF文件包括如下步骤：

根据documentId获取到所有的documentImages对象；

调用imagesToPdf函数，传入documentImages对象的参数；

循环documentImages对象，判断是否包含批注信息，如果包含批注信息，通过svgToImage函数获取到image对象，不包含批注信息的直接通过原图磁盘路径path获取到image对象；

声明一个pdf document对象，根据image宽度和高度，计算缩放比例，设置document尺寸，并将image对象写入到document中；

根据原图比例生成PDF document对象，将document对象写入到response输出流中。

第二方面，本申请还提供了一种大型PDF批注装置，所述大型PDF批注装置包括：

待批注PDF文件模块，所述待批注PDF文件模块用于获取待批注PDF文件；

图形转换处理模块，所述图形转换处理模块用于使用图形转换器对所述待批注PDF文件进行处理，从而获取待批注PDF文件的图片数据并对所述图片数据进行压缩处理；

缩略图获取模块，所述缩略图获取模块用于对经过压缩处理的所述图片数据进行处理，从而获取缩略图数据；

存储模块，所述存储模块用于存储待批注PDF文件和图片数据；

批注信息生成模块，所述批注信息生成模块用于利用CANVAS技术绘制图形对图片数据进行处理，从而在所述图片数据中生成批注信息，同时将所述批注信息序列化存储到数据库；

转换模块，所述转换模块用于将具有批注信息的图片数据转换为PDF文件。

本申请的大型PDF批注方法及装置具有如下优点：

1）本申请的大型PDF批注方法及装置提供了PDF转换图片的方案，结合现有的CANVAS、SVG技术，为用户提供了一种高效的web前端批注PDF文件的方法，同时采用分页及图片压缩技术，有效提高了web加载速度，另外，Web端在序列化和反序列化过程中，调用服务端存储批注信息和获取批注信息的api接口，实现批注过程留痕，方便查看批注结果和历史信息；

2）本申请的大型PDF批注方法及装置提供后端图形转换库、数据库初始化SQL文件、文件存储交互接口、前端内置基础库、二维图形扩展库，可以减少开发者的不必要配置工作，提高开发者协作效率；

3）本申请的大型PDF批注方法及装置中，在后端提供了核心的core包，方便集成到自己的业务系统，也提供了一键部署的jar包，安装数据库，初始化sql文件，可以直接启动后端程序，优化前后端交互功能；

4）本申请的大型PDF批注方法及装置中，后端图形转换器提供了高效的PDF转图片、压缩图片、生成缩略图及图片合成PDF等方法，并且有效的存储的数据库，提供了分页获取pdf图片api接口，解决大型PDF在web网页加载较慢的问题；同时基于本申请的策略，只需引入openOffice或者libraryOffice，增加一步将其他类型文件转换为pdf便可以解决其他类型文件在web网页进行快速加载、查看及批注等工作；

5）本申请的大型PDF批注方法及装置中，在web前端引用基础库和二维几何图形扩展库，调用初始化函数，实现快速加载工具栏组件、pdf批注面板组件、快捷菜单组件，组件提供了丰富的工具栏操作以及导航操作，给用户带来了极佳的前端批注PDF体验；

6）本申请的大型PDF批注方法及装置中，二维几何图形扩展库包含了多种内置绘制对象，也支持开发者进行自定义扩展绘制对象，灵活满足开发中基础绘制对象不足问题；

7）本申请的大型PDF批注方法及装置提供了CANVAS绘制的路径和SVG路径互相转换函数，提高了代码的可以移植性，能适应更多的应用场景，无论是发挥CANVAS的高性能特点，还是发挥SVG的高控制性，都能轻松适应；

8）本申请的大型PDF批注方法及装置提供了缩略图导航菜单，滚动鼠标与画布控制面板实时联动，精准定位到对应的画布控制面板，当画布进行过批注后，也会精确的反应给导航菜单，通过导航菜单就能一目了然知道哪些PDF image进行过批注；

9）本申请的大型PDF批注方法及装置中，画布控制面板可以随时进行批注，采用异步处理方式渲染画布，避免短时间内重复绘制画布，从而提升程序性能。提供了丰富的前后端交互接口，可以满足大部分业务需求。

附图说明

图1是本申请一实施例中的大型PDF批注方法的流程示意图。

图2是本申请一实施例中提供的大型PDF批注方法的电子设备结构框图。

图3是本申请一实施例中的大型PDF批注方法的详细流程示意图。

具体实施方式

下面将结合附图对本申请的技术方案进行清楚、完整的描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1是本申请一实施例中的大型PDF批注方法的流程示意图。

如图1所示的大型PDF批注方法包括如下步骤：

S1、获取待批注PDF文件；

S2、使用图形转换器对待批注PDF文件进行处理，从而获取待批注PDF文件的图片数据并对图片数据进行压缩处理；

S3、对经过压缩处理的图片数据进行处理，从而获取缩略图数据；

S4、将待批注PDF文件和图片数据存储到数据库；

S5、利用CANVAS技术绘制图形对图片数据进行处理，从而在所述图片数据中生成批注信息，同时将所述批注信息序列化存储到数据库；

S6、将具有批注信息的图片数据转换为PDF文件。

在本实施例中，上述获取待批注PDF文件的步骤S1具体可包括如下子步骤：

S11、获取上传文件；

S12、ajax调用服务器上传文件函数，该文件函数传入三个参数，第一个参数为fileData（文件对象）、第二个参数为scale（压缩比例）传值、第三个参数quality（文件质量）传值；

S13、根据fileData判断上传文件是否为PDF文件，若是，则获取该上传文件作为待批注PDF文件。

在本实施例中，上述步骤S2中的使用图形转换器对待批注PDF文件进行处理，从而获取待批注PDF文件的图片数据的步骤可包括如下子步骤：

S21、声明一个名为pdfFile的对象变量，把待批注PDF文件存储到磁盘中，然后把文件源名属性、文件大小属性、存储日期属性、文件路径（path）属性存储到pdfFile对象；

S22、使用图形转换器中pdfToImages函数获取到PDF文件转图片的结构数据集合对象，并赋值给pdfFileImages变量，从而获取待批注PDF文件的图片数据。

在本实施例中，上述使用图形转换器中pdfToImages函数获取到pdf文件转图片的结构数据集合对象，并赋值给pdfFileImages变量，从而获取待批注PDF文件的图片数据的步骤S22具体看包括如下子步骤：

S221、声明一个名为datas的List<JSONObject>集合变量，用于存储待批注PDF文件中所有PDF image结构数据；

S222、通过pdfbox工具读取pdfFile对象，将PDF文件渲染到PDFRenderer对象；

S223、循环pdf总的页数，通过索引从PDFRenderer中获取到每一个BufferedImage对象，并且设置缩放比例scale，然后赋值给imageBuff变量；

S224、声明一个imageFile对象，通过imageIO对象把imageBuff写入到imageFile中将imageFile存入磁盘；

S225、通过Thumbnails工具类，调用CreateThumbnail方法，传入imageFile对象和quality参数，将imageFile对象进行等比例压缩；

S226、声明一个JSONObject对象，命名为data，用于存储每张pdf image结构数据，然后写入四个参数，第一个参数为page，为当前图片在pdf中所属页数page，值为索引值+1；第二个参数width，为当前图片的宽度，第三个参数为height，为当前图片的高度，第四个参数为文件路径（path），为当前图片存储在磁盘中的路径；

S227、把data添加到datas集合中，循环结束，返回datas集合。

在本实施例中，上述对图片数据进行压缩处理，从而获取缩略图数据的步骤S3具体可包括如下子步骤：

S31、使用图形转换器中CreateThumbnail函数，传入datas集合；

S32、循环datas集合，把datas集合中的每个待批注PDF文件的图片数据压缩成300px 300px的缩略图，然后把pdf高清图片的文件路径追加后缀_thumb字符，作为缩略图的磁盘存储路径，循环生成缩略图数据。

在本实施例中，上述利用CANVAS技术绘制图形对图片数据进行处理，从而在图片数据中生成批注信息的步骤S5具体可包括如下子步骤：

S51、利用CANVAS技术生成待使用工具信息；

S52、监控使用者动作，根据使用者动作，利用工具信息对图片数据进行处理，从而在图片数据中生成批注信息。

在本实施例中，上述利用CANVAS技术生成待使用工具信息的步骤S51又可包括如下子步骤：

S511、服务端定义获取pdfFileImages的api接口，接口包含三个参数，第一个参数为文件的id，此参数为必传项，第二个参数为获取第几页数图片数据的page，此参数为必传项，第三个参数一页获取多少张图片数据的size，此参数可以不传，默认值为10，函数返回Pageable分页对象；

S512、Web客户端集成JavaScript SDK包，引用二维几何图形绘制js文件，在HTML的页面中定义一个DIV块状元素，DIV块状元素的ID值定义为pdf-canvas-container，在页面初始化函数中，调用初始化PDF批注器函数，函数传入三个参数，第一个参数传入的pdfFileId，第二个参数传入一个字符串值pdf-canvas-container，第三个参数传入一个object对象；

S513、判断第一个参数pdfFileId和第二个参数pdf-canvas-container是否为空，其中，若第一个参数或第二个参数为空，则返回参数缺失，停止初始化，若第一个参数和第二个参数不为空，则进入下一步；

S514、根据函数传入的第一个参数pdfFileId获取DIV块状元素的DOM对象，检查DOM对象是否在HTML页面中定义，判断DOM对象的类型不等于object类型，返回DIV块状元素ID有误，停止转化，判断DOM对象的类型等于object类型，将DOM对象赋值给pdfContainer全局变量，进入下一步；

S515、获取函数第三个参数object，判断参数类型不等于object类型，给options变量赋一个空对象，然后extend defaultOptions值，进入下一步；

S516、声明名为pdfImages的数组，获取第一页10张pdf图片，ajax调用获取pdfFileImages的接口，传入三个参数，第一个参数id为pdfFileId，第二个参数page传入1，第三个参数size传入10，若ajax请求失败，返回加载pdf失败，停止初始化，若ajax请求成功，获取response data赋值给pdfImages数组，进入下一步；

S517、调用DOM处理器，传入pdfContainer 参数，生成工具栏元素；创建一个DIV元素，赋值给tools变量；获取二维图形扩展库中所有export的工具数组；

S518、遍历数组创建button，icon等元素，并且append到tools元素中；然后把tools元素append到pdfContainer DOM中，进入下一步；

S519、调用DOM处理器，传入pdfContainer 参数，生成画布控制器元素。创建一个DIV元素，赋值给content变量；遍历pdfImages数组创建CANVAS元素，元素ID命名为CANVAS_${index}，index为循环的索引值；把content元素append到pdfContainer DOM中；循环调用画布控制器构造函数，第一个参数传入CANVAS id值，第二个参数传入当前循环的image对象，第三个参数传入主方法的options值；根据CANVAS标签的所在父元素的宽度以及PDFimage自然宽度和高度；等比例计算CANVAS画布和背景图片尺寸；循环调用画布控制器构造函数获取到CANVAS模型对象，并且push到CANVAS[${index}]数组中；然后通过监听CANVAS鼠标点击、移动事件，调用绘制图形的方法，实时传入x，y起始坐标和结束坐标，获取返回的路径，添加到画布，进入下一步；

S520、调用DOM处理器，传入pdfContainer参数，生成菜单导航元素。创建一个DIV元素，赋值给menubar变量；创建ul列表，遍历thumbImages数组创建li元素，li元素展示一张pdf 缩略图；把li元素添加到ul列表中；把ul列表添加到menubar元素中；把menubar元素添加到pdfContainer DOM中；监听menubar鼠标滚动事件，与content中画布控制器保持联动。

在本实施例中，上述监控使用者动作，根据使用者动作，利用工具信息对图片数据进行处理，从而在所述图片数据中生成批注信息的步骤S52具体可包括如下子步骤：

S521、从监听函数中实时获取起点坐标（fromX，fromY）和终点坐标（toX，toY），进入下一步；

S522、根据用户选择的绘制工具，调用绘制二维几何图形函数，传入fromX，fromY，toX，toY四个参数，进入下一步；

S523、获取到绘制图形函数的文件路径（Path）返回值，赋值给drawObject变量，并且把drawObject对象push到CANVAS的objects数组中，进入下一步；

S524、调用CANVAS对象中的requestRenderAll函数，实施渲染二维几何图形；其中，画布控制面板CANVAS对象可以序列化为JSON对象与SVG对象，通过调用toJSON函数，可以把CANVAS对象序列化JSON对象，通过调用toSVG对象，可以把CANVAS的路径转换为SVG的路径，调用服务端存储批注信息api接口，将所述序列化对象存储到数据库。同时支持loadFromJSON、loadFromSVG两个函数将从服务器获取的批注信息解析为CANVAS对象并渲染到DOM元素中。

在本实施例中，上述将具有批注信息的图片数据转换为PDF文件步骤S6具体可包括如下子步骤：

S61、根据documentId获取到所有的documentImages对象；

S62、调用imagesToPdf函数，传入documentImages对象的参数；

S63、循环documentImages对象，判断是否包含批注信息，如果包含批注信息，通过svgToImage函数获取到image对象，不包含批注信息的直接通过原图磁盘路径path获取到image对象；

S64、声明一个pdf document对象，根据image宽度和高度，计算缩放比例，设置document尺寸，并将image对象写入到document中；

S65、根据原图比例生成PDF document对象，将document对象写入到response输出流中。

下面以举例的方式对本申请进行进一步详细阐述，可以理解的是，该举例并不构成对本申请的任何限制。

一、技术组件介绍：

本申请提供了Java-jar包，sql初始化文件，JavaScript SDK包、扩展二维图形绘制js等文件。

其中，Java-jar包含图形转换处理器、数据库存储、PDF合成；JavaScript SDK包是一个独立的开发工具包，JavaScript SDK包内部包含画布控制器、二维图形扩展库、事件监听器、DOM处理器、SVG到CANVAS的解析器。

具体的，图形转换处理器包含两个核心函数，第一个为PDF转image函数PdfToImages，第二个为生成压缩图片函数CreateThumbnail。

其中，PdfToImages函数包含三个参数，第一个参数为pdfData，该参数数据类型File对象，可以通过浏览器上传文件事件读取File对象（event.target.files[0]），或者通过磁盘路径读取本地文件，此参数为必传项。第二个参数为scale，此参数为float类型，用来表示图片的缩放比例，参数非必传，默认值是1.0f（72 DPI），参数值越大，分辨率越大，图片越清晰。第三个参数为quality，此参数为float类型，用来表示图片的质量，参数非必传，默认值1.0f，越接近于1质量越好，越接近于0质量越差。函数返回一个List<JSONObject>集合。

CreateThumbnail函数包含三个参数，其中第一个参数为image对象，第二个参数为width，第三个参数为是height，width和height分别定义缩略图的宽度和高度，默认情况下宽度和高度均为300px，函数返回缩略图片对象。

数据库存储包含document、document_image两个数据库模型，其中document模型表示PDF文件对象，记录了PDF文件的名称、磁盘路径、大小、版本等信息。document_image模型表示PDF转换的images文件对象，记录每张image文件的document_id、页码、宽度、高度、磁盘路径、批注信息（canvas json对象和svg对象）等信息。目前，一个document模型对象对应多个document_image模型对象，一个批注信息存储了两种格式序列化信息，可以灵活适用多种应用场景，json对象适合前后端批注交互操作，svg对象适用于浏览和合成PDF。

PDF合成技术主要包含ImageToPdf方法，该方法包含一个参数documentImages集合参数和HttpServletResponse对象，根据原图比例生成PDF document对象，将document对象写入到response输出流中。

画布控制器包含一个构造函数，该函数包含三个参数，第一个参数为canvasId，参数类型为字符串，来自于CANVAS标签的ID，表示在HTML结构中的唯一编码，此参数为必传项；第二个参数为backgroundImage，此参数为image对象，表示设置画布的背景图片，此参数为必传项；函数的第三个参数为options，该参数为object类型，包含width、height等一些初始化配置项，此参数可以不传，配置项均有默认值，如：width默认值为300px， height默认值为150px等，函数返回CANVAS模型对象。

二维图形扩展库的js文件是以函数的方式定义的，内置9种二维几何图形绘制方法（圆形、椭圆、矩形、三角形、箭头、人字形、文本、线条、虚线），同时还可以通过路径（Path）扩展几何图形。开发者根据具体业务需求引用和扩展二维图形。

事件监听器主要包含两类监听函数，第一个为获取当前绘制对象数据结构的函数，监听点击事件，当鼠标点击CANVAS画布中的绘制图形元素时，返回该元素的数据结构对象，此时就可以对对象进行移动、删除等各种操作。第二个为监听鼠标CANVAS上的移动事件，实时获取当前鼠标在画布中移动的起点和终点的x，y坐标，通过调用二维图形扩展库传入坐标绘制图形。

DOM处理器主要包含三类元素的处理，第一个为工具栏的初始化，提供默认工具样式和布局，第二个为CANVAS画布的初始化，对画布进行初始化，采用异步处理方式渲染画布，避免短时间内重复绘制画布，从而提升程序性能。第三个为辅助菜单的初始化，提供PDFimage 缩略图目录导航菜单。

SVG到CANVAS的解析器提供了CANVAS绘制的路径和SVG路径互相转换函数，提高了代码的可以移植性，能适应更多的应用场景，无论是发挥CANVAS的高性能特点，还是发挥SVG的高控制性，都能轻松适应。

二、技术组件之间的核心过程介绍：

服务器集成Java-jar包，在HTML页面中定义input元素，type为file类型，点击上传PDF文件，ajax调用服务器上传文件函数，函数传入三个参数，第一个参数为fileData为MultipartFile对象，第二个参数scale传值2.5f，第三个参数quality传值0.3f，第二个参数和第三个参数根据实际需求配置，本次传值为推荐值。

获取待批注PDF文件具体包括如下步骤：

第一步：检查第一个参数file对象是为空，判断参数为空，返回参数缺失，停止上传，判参数不为空，然后再检查类型是否为PDF，判断文件类型不是PDF，返回文件类型错误，停止上传，判断文件类型是PDF，进入第二步。

第二步：检查第二个参数scale是否为空，判断为空，赋予默认值1.0f。

第三步：检查第三个参数quality是否空，判断为空，赋予默认值1.0f，判断小于0.0f或者大于1.0f，返回参数必须为0-1之间，停止上传，判断在大于等于0.0f且小于等于1.0f，进入第四步。

第四步：声明一个名为pdfFile的对象变量，把上传的文件存储到磁盘中，然后把文件源名，路径等属性存储到pdfFile对象中。

第五步：使用图形转换器中pdfToImages函数，传入三个参数，获取到pdf文件转图片的结构数据集合对象，赋值给pdfFileImages变量。

在本实施例中，使用图形转换器中pdfToImages函数获取到pdf文件转图片的结构数据集合对象，并赋值给pdfFileImages变量，从而获取待批注PDF文件的图片数据的具体步骤参见上述S221-S227步骤，此处不再重复赘述。

第六步：使用图形转换器中CreateThumbnail函数，传入pdf文件图片结构数据集合对象datas。循环datas，把pdf高清图片压缩成300px 300px的缩略图，然后把pdf高清图片path路径追加后缀_thumb字符。作为缩略图的磁盘存储路径，循环生成缩略图后，进入下一步。

第七步：把pdfFile文件数据结构和pdfFileImages图片数据结构存储到数据库中，进入到下一步。

第八步：利用CANVAS技术生成待使用工具信息。

同样，该步骤可参考上述S511-S520，此处不再重复赘述。

第九步：监控使用者动作，根据使用者动作，利用工具信息对图片数据进行处理，从而在图片数据中生成批注信息。

需要说明的是，画布控制面板是可以编辑的，在画布控制面板中自由拖动和绘制二维几何图形，DOM发生了改变，CANVAS对象的监听函数被触发，同样，该函数执行过程（步骤）可参考上述S521-S524，此处不再重复赘述。

第十步：批注信息支持导出PDF文件，通过执行imagesToPdf函数，合成并输出PDF文件，该函数执行过程（步骤）可参考上述S61-S65，此处不再重复赘述。

三、具体功能和操控方法介绍：

（例如：Java-jar包名为spring-cloth-core.jar，数据库初始化文件为init.sql，JavaScript SDK包名为cloth.min.js，扩展图库模板名称为drawgraph.js。

创建画布控制器，并设置背景图片，例如：

const canvas = new cloth.Canvas(canvasDomId，{width: 800px， heght:autoHeight，isDrawingMode: true});

canvas.setBackgroundImage(image.src，{

scaleX: image.width / image.naturalWidth，

scaleY: image.height / image.naturalHeight

})

添加扩展二维几何图形在drawgraph.js中，例如：

const extendDrawGraphs = {

herringbone: {

name: '人字形'，

stroke: window.color，

fill: 'rgba(255，255，255，0)'，

strokeWidth: 2，

icon: 'assets/icons/herringbone.svg'，

drawFn: (fromX， fromY， toX， toY) =>{

let path = ''

// ....

// 省略实现

return path

}

开发人员在Java SpringBoot项目中src/main/resoureces/lib目录下放入spring-cloth-core.jar，在src/main/java下定义api上传pdf、获取pdf图片集合、保存canvas/svg批注信息等接口。

在web端项目views/rsf目录中放入cloth.min.js、drawgraph.js用import clothfrom cloth.min.js'的方式引入，在HTML的页面中定义一个DIV块状元素，DIV块状元素的ID值定义为pdf-canvas-container，在页面初始化函数中调用

let canvas = new cloth.init(pdf-canvas-container，pdfFileId， {width：‘800px’});

开发人员可以通过cloth.init的函数返回的canvas数组对象，调用canvas[index] .toJSON()，toSVG函数返回当前canvas结构数据的函数返回一个JSON对象或者SVG对象。

自此整个操作过程完成。

图2是本申请一个或多个实施例提供的一种电子设备结构框图。

如图2所示，本申请还公开了一种电子设备，包括：处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；存储器中存储有计算机程序，当计算机程序被处理器执行时，使得处理器执行大型PDF批注方法的步骤。

本申请还提供了一种计算机可读存储介质，其存储有可由电子设备执行的计算机程序，当计算机程序在电子设备上运行时，能够实现大型PDF批注方法的步骤。

上述电子设备提到的通信总线可以是外设部件互连标准（Peripheral ComponentInterconnect，PCI）总线或扩展工业标准结构（Extended Industry StandardArchitecture，EISA）总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

电子设备包括硬件层，运行在硬件层之上的操作系统层，以及运行在操作系统上的应用层。该硬件层包括中央处理器（CPU，Central Processing Unit）、内存管理单元（MMU，Memory Management Unit）和内存等硬件。该操作系统可以是任意一种或多种通过进程（Process）实现电子设备控制的计算机操作系统，例如，Linux操作系统、Unix操作系统、Android操作系统、iOS操作系统或windows操作系统等。并且在本申请实施例中该电子设备可以是智能手机、平板电脑等手持设备，也可以是桌面计算机、便携式计算机等电子设备，本申请实施例中并未特别限定。

本申请实施例中的电子设备控制的执行主体可以是电子设备，或者是电子设备中能够调用程序并执行程序的功能模块。电子设备可以获取到存储介质对应的固件，存储介质对应的固件由供应商提供，不同存储介质对应的固件可以相同可以不同，在此不做限定。电子设备获取到存储介质对应的固件后，可以将该存储介质对应的固件写入存储介质中，具体地是往该存储介质中烧入该存储介质对应固件。将固件烧入存储介质的过程可以采用现有技术实现，在本申请实施例中不做赘述。

电子设备还可以获取到存储介质对应的重置命令，存储介质对应的重置命令由供应商提供，不同存储介质对应的重置命令可以相同可以不同，在此不做限定。

此时电子设备的存储介质为写入了对应的固件的存储介质，电子设备可以在写入了对应的固件的存储介质中响应该存储介质对应的重置命令，从而电子设备根据存储介质对应的重置命令，对该写入对应的固件的存储介质进行重置。根据重置命令对存储介质进行重置的过程可以现有技术实现，在本申请实施例中不做赘述。

为了描述的方便，描述以上装置时以功能分为各种单元、模块分别描述。当然在实施本申请时可以把各单元、模块的功能在同一个或多个软件和/或硬件中实现。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语（包括技术术语和科学术语），具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非被特定定义，否则不会用理想化或过于正式的含义来解释。

对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器或者网络设备等）执行本申请各个实施方式或者实施方式的某些部分所述的方法。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims

1.一种大型PDF批注方法，其特征在于，所述大型PDF批注方法包括如下步骤：

获取待批注PDF文件；

将待批注PDF文件和图片数据存储到数据库；

将具有批注信息的图片数据转换为PDF文件。

2.根据权利要求1所述的大型PDF批注方法，其特征在于，所述获取待批注PDF文件包括如下步骤：

获取上传文件；

ajax调用服务器上传文件函数，所述文件函数传入三个参数，第一个参数为fileData、第二个参数为scale传值、第三个参数quality传值；

3.根据权利要求2所述的大型PDF批注方法，其特征在于，所述使用图形转换器对待批注PDF文件进行处理，从而获取待批注PDF文件的图片数据包括如下步骤：

声明一个名为pdfFile的对象变量，把待批注PDF文件存储到磁盘中，然后把文件源名属性、文件路径属性、文件大小属性、存储日期属性存储到pdfFile对象；

4.如权利要求3所述的大型PDF批注方法，其特征在于，所述使用图形转换器中pdfToImages函数获取到PDF文件转图片的结构数据集合对象，并赋值给pdfFileImages变量，从而获取所述待批注PDF文件的图片数据包括如下步骤：

声明一个JSONObject对象，命名为data，用于存储每张pdf image结构数据，然后写入四个参数，第一个参数为page，为当前图片在pdf中所属页数page，值为索引值+1；第二个参数为width，为当前图片的宽度；第三个参数为height，为当前图片的高度；第四个参数为文件路径，为当前图片存储在磁盘中的路径；

把data添加到datas集合中，循环结束，返回datas集合。

5.如权利要求4所述的大型PDF批注方法，其特征在于，所述对所述图片数据进行压缩处理，从而获取缩略图数据包括如下步骤：

使用图形转换器中CreateThumbnail函数，传入所述datas集合；

6.如权利要求5所述的大型PDF批注方法，其特征在于，所述利用CANVAS技术绘制图形对图片数据进行处理，从而在所述图片数据中生成批注信息包括如下步骤：

利用CANVAS技术生成待使用工具信息；

7.如权利要求6所述的大型PDF批注方法，其特征在于，所述利用CANVAS技术生成待使用工具信息包括如下步骤：

根据函数传入的第一个参数pdfFileId获取DIV块状元素的DOM对象，检查DOM对象是否在HTML页面中定义，判断DOM对象的类型不等于object类型，返回DIV块状元素ID有误，停止转化，判断DOM对象的类型等于object类型，将DOM对象赋值给pdfContainer全局变量，进入下一步；

声明名为pdfImages的数组，获取第一页10张pdf图片，ajax调用获取pdfFileImages的接口，传入三个参数，第一个参数id为pdfFileId，第二个参数page传入1，第三个参数size传入10，若ajax请求失败，返回加载pdf失败，停止初始化，若ajax请求成功，获取responsedata赋值给pdfImages数组，进入下一步；

调用DOM处理器，传入pdfContainer参数，生成菜单导航元素，创建一个DIV元素，赋值给menubar变量，创建ul列表，遍历thumbImages数组创建li元素，li元素展示一张pdf 缩略图，把li元素添加到ul列表中，把ul列表添加到menubar元素中，把menubar元素添加到pdfContainer DOM中，监听menubar鼠标滚动事件，与content中画布控制器保持联动。

8.如权利要求7所述的大型PDF批注方法，其特征在于，所述监控使用者动作，根据使用者动作，利用工具信息对图片数据进行处理，从而在所述图片数据中生成批注信息包括如下步骤：

根据用户选择的绘制工具，调用绘制二维几何图形函数，传入fromX， fromY，toX，toY四个参数，进入下一步；

9.如权利要求8所述的大型PDF批注方法，其特征在于，所述将具有批注信息的图片数据转换为PDF文件包括如下步骤：

根据documentId获取到所有的documentImages对象；

调用imagesToPdf函数，传入documentImages对象的参数；

10.一种大型PDF批注装置，其特征在于，所述大型PDF批注装置包括：