CN111857937A - 一种全平台兼容的图文题目显示方法 - Google Patents
一种全平台兼容的图文题目显示方法 Download PDFInfo
- Publication number
- CN111857937A CN111857937A CN202010772467.3A CN202010772467A CN111857937A CN 111857937 A CN111857937 A CN 111857937A CN 202010772467 A CN202010772467 A CN 202010772467A CN 111857937 A CN111857937 A CN 111857937A
- Authority
- CN
- China
- Prior art keywords
- screenshot
- text
- full
- html template
- platform
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 238000009877 rendering Methods 0.000 claims abstract description 12
- 239000004816 latex Substances 0.000 claims description 7
- 238000010586 diagram Methods 0.000 claims description 4
- 238000007781 pre-processing Methods 0.000 claims description 3
- 238000012544 monitoring process Methods 0.000 claims description 2
- 230000000694 effects Effects 0.000 description 8
- 238000005516 engineering process Methods 0.000 description 3
- 201000001432 Coffin-Siris syndrome Diseases 0.000 description 2
- 238000010794 Cyclic Steam Stimulation Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 210000004556 brain Anatomy 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000010606 normalization Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本发明公开了一种全平台兼容的图文题目显示方法，包括以下步骤：(1)、将目标题目数据转换；(2)、对转换后的数据进行解析生成图形化的描述数据；(3)、将描述数据插入至HTML模板中；(4)、调整HTML模板的分辨率参数；(5)、采用无头浏览器加载HTML模板并进行渲染；(6)、利用无头浏览器获取content类元素的位置信息；(7)、根据content类元素的位置信息对content类元素进行精确截图；(8)、截图保存为适用于对象终端的文件格式，即可用于对象终端显示。本发明突破了平台对HTML、XML和浏览器的依赖，能够保证在任何分辨率下结构的一致性，并可批量快速渲染出合适的图片。
Description
技术领域
本发明涉及网页数据处理方法领域，具体是一种全平台兼容的图文题目显示方法。
背景技术
在教育软件相关产品中，题目信息是学生学习和练习最重要的组成部分。而题目信息的显示效果直接影响学生的阅读效率和理解程度。其中题目信息的显示效果包括但不限于：字体格式及大小，每行的文本长度及分段，数学公式的规范性，图片的位置、大小及清晰度等。尤其在数学公式等字符难以描述的内容显示上，需要渲染成易于人脑理解的图形化信息。
传统的显示方案是通过HTML技术进行图文混排，目前主要使用HTML5技术方案。HTML5的canvas元素可以实现画布功能，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理。但HTML5技术需要HTML协议的支持，无法直接应用于IOS和Android等移动端原生平台。并且图文混排方案在跨平台显示时，面对不同的分辨率需要重新适配和调优，否则难以达到良好的显示效果。
针对这种局限性，很多产品试图通过SVG技术来解决。SVG(Scalable VectorGraphics)通过创建可缩放矢量图形，达到任意改变大小也不会变形的效果。这是一种和图像分辨率无关的矢量图形格式，较多地应用于分辨率差异化较大的终端，例如手机。然而，SVG方案需要XML框架和浏览器的支持，在一些平台和终端上无法使用。并且图文矢量需要有针对性的设计和创建，在实际使用中的效率较低。
当前，教育产品正朝着跨平台，多终端的趋势方向发展，因此亟需一种能够实现全平台兼容的图文题目显示方案。
发明内容
本发明的目的是提供一种全平台兼容的图文题目显示方法，以解决现有技术网页题目图文数据用于其他终端显示时依赖HTML、XML框架以及浏览器支持的问题。
为了达到上述目的，本发明所采用的技术方案为：
一种全平台兼容的图文题目显示方法，其特征在于：包括以下步骤：
(1)、对目标题目中的图文数据进行预处理，使其转换为符合LaTeX语言语法规范的数据格式；
(2)、利用解析程序对步骤(1)预处理后的图文数据进行解析，生成图形化的描述数据；
(3)、建立HTML模板，并将步骤(2)生成的描述数据插入至HTML模板中；
(4)、调整步骤(3)插入描述数据后的HTML模板的分辨率参数，使之符合对象终端的分辨率要求；
(5)、采用无头浏览器加载步骤(4)调整分辨率后的HTML模板，并利用无头浏览器对加载的HTML模板进行渲染，从而在无头浏览器中生成对应的页面；
(6)、利用无头浏览器的元素选择器选择页面中content类对应的元素，获取页面中content类元素的位置信息；
(7)、采用截图工具并根据步骤(6)得到的content类元素的位置信息，对content类元素进行精确截图，获得渲染后目标题目的图文内容的截图；
(8)、将步骤(7)获得的目标题目图文内容的截图保存为适用于对象终端的文件格式，即可用于对象终端显示。
所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(2)中，解析程序生成的图形化描述数据形式为HTML标签、或者为画布、或者为SVG矢量图。
所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(3)中，将步骤(2)生成的描述数据插入至HTML模板的Class属性content标签中，从而生成目标题目HTML模板。
所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(5)中，利用无头浏览器对加载的HTML模板进行渲染时，实时监控渲染情况和图文加载情况。
所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(6)中还同时获取页面中content类元素的大小信息，步骤(7)中进行截图时确保截图的大小与获取的content类元素大小一致，从而实现精确截图。
所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(8)中，将截图进行灰度化或二值化处理，然后再进行压缩并保存后传输至对象终端进行显示。
本发明将基于HTML和XML的图文本内容，通过后台无头浏览器框架进行加载和渲染，然后截图并存储为图片，从而突破平台对HTML、XML框架和浏览器的依赖，达到全平台支持并能保证优秀的显示效果。
与现有技术相比，本发明优点为：
本发明通过将图文内容渲染成PNG等图片格式，突破了平台对HTML、XML和浏览器的依赖，能够保证在任何分辨率下结构的一致性，并且只需调整分辨率参数即可批量快速渲染出合适的图片，从而提高对象终端适配的效率，同时可以防止网络爬虫，保护知识产权。
附图说明
图1是本发明方法流程框图。
具体实施方式
下面结合附图和实施例对本发明进一步说明。
如图1所示，一种全平台兼容的图文题目显示方法，包括以下步骤：
(1)、对目标题目中的图文数据进行预处理，使其转换为符合LaTeX语言语法规范的数据格式。
目标题目中的文本数据至少包含文字、数字、字母等，目标题目中的图片数据至少包含符号、公式等，因此分别对文本数据和图片数据进行转换，得到符合LaTeX语言语法规范格式的文本和图片数据。
(2)、利用解析程序对步骤(1)预处理后的图文数据进行解析，生成图形化的描述数据。
本实施例中，预处理后的文本和图片数据，采用MathJax库作为解析程序进行解析，从而生成图形化的描述数据。生成的图形化描述数据形式常用的有HTML标签、或者画布、或者SVG矢量图，其他形式本实施例不一一列举，但都应落入本发明的保护范围内。
(3)、建立HTML模板，并将步骤(2)生成的描述数据插入至HTML模板中。
本实施例中，将步骤(2)生成的描述数据插入至HTML模板的Class属性content标签中，从而生成目标题目HTML模板。通常content标签所在的区域，就是题目内容的显示区域，该标签以外的部分是空白区域。通过后续步骤针对该content标签所在区域进行精确截图，可以提高题目内容在图片中的占比。
(4)、调整步骤(3)插入描述数据后的HTML模板的分辨率参数，如DPI参数等，使之符合对象终端的分辨率要求。本实施例中，若对象终端为手机和Pad，则分辨率可设置为320px、420px、700px等。
(5)、采用无头浏览器加载步骤(4)调整分辨率后的HTML模板，并利用无头浏览器对加载的HTML模板进行渲染，从而在无头浏览器中生成对应的页面。
本实施例中，无头浏览器可采用Puppeteer，其自带截图工具，可用于后续步骤的截图。
通常无头浏览器Puppeteer需要加载包含文本、LaTeX格式的公式、图片、CSS，字体等在内的数据，因此通过步骤(1)将目标题目中的图文数据预先转换为符合LaTeX语言语法规范的数据格式。无头浏览器Puppeteer渲染后目标题目内容全部显示在content所在的区域中。
本实施例中，利用无头浏览器对加载的HTML模板进行渲染时，实时监控渲染情况和图文加载情况，确保数据加载并渲染完成，并检查并确认版面的格式和效果。本实施例中利用MathJax库中的回调函数监控LaTeX的渲染情况，利用无头浏览器的API监控图片、CSS和字体的加载情况。
(6)、利用无头浏览器的元素选择器选择页面中content类对应的元素，获取页面中content类元素的大小和位置信息；
(7)、采用无头浏览器Puppeteer自带的截图工具或者其他的截图程序，并根据步骤(6)得到的content类元素的位置信息，对content类元素进行精确截图，获得渲染后目标题目的图文内容的截图；进行截图时确保截图的大小与获取的content类元素大小一致，从而实现精确截图。
(8)、将步骤(7)获得的目标题目图文内容的截图保存为适用于对象终端的文件格式，即可用于对象终端显示。本实施例中保持的文件格式常用的有PNG格式、PDF格式，其他格式在此不一一列举，但都应落入本发明的保护范围内。
本实施例中，可先将截图进行灰度化或二值化处理，然后再进行压缩并保存后传输至对象终端进行显示。这样在不降低显示效果的前提下，题目中的图片的容量通常可以减小80％以上，便于数据的传输。
最终，由对象终端如手机、Pad等加载题目内容文件，即可达到预期的显示效果。
本发明所述的实施例仅仅是对本发明的优选实施方式进行的描述，并非对本发明构思和范围进行限定，在不脱离本发明设计思想的前提下，本领域中工程技术人员对本发明的技术方案作出的各种变型和改进，均应落入本发明的保护范围，本发明请求保护的技术内容，已经全部记载在权利要求书中。
Claims (6)
1.一种全平台兼容的图文题目显示方法，其特征在于：包括以下步骤：
(1)、对目标题目中的图文数据进行预处理，使其转换为符合LaTeX语言语法规范的数据格式；
(2)、利用解析程序对步骤(1)预处理后的图文数据进行解析，生成图形化的描述数据；
(3)、建立HTML模板，并将步骤(2)生成的描述数据插入至HTML模板中；
(4)、调整步骤(3)插入描述数据后的HTML模板的分辨率参数，使之符合对象终端的分辨率要求；
(5)、采用无头浏览器加载步骤(4)调整分辨率后的HTML模板，并利用无头浏览器对加载的HTML模板进行渲染，从而在无头浏览器中生成对应的页面；
(6)、利用无头浏览器的元素选择器选择页面中content类对应的元素，获取页面中content类元素的位置信息；
(7)、采用截图工具并根据步骤(6)得到的content类元素的位置信息，对content类元素进行精确截图，获得渲染后目标题目的图文内容的截图；
(8)、将步骤(7)获得的目标题目图文内容的截图保存为适用于对象终端的文件格式，即可用于对象终端显示。
2.根据权利要求1所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(2)中，解析程序生成的图形化描述数据形式为HTML标签、或者为画布、或者为SVG矢量图。
3.根据权利要求1所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(3)中，将步骤(2)生成的描述数据插入至HTML模板的Class属性content标签中，从而生成目标题目HTML模板。
4.根据权利要求1所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(5)中，利用无头浏览器对加载的HTML模板进行渲染时，实时监控渲染情况和图文加载情况。
5.根据权利要求1所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(6)中还同时获取页面中content类元素的大小信息，步骤(7)中进行截图时确保截图的大小与获取的content类元素大小一致，从而实现精确截图。
6.根据权利要求1所述的一种全平台兼容的图文题目显示方法，其特征在于：步骤(8)中，将截图进行灰度化或二值化处理，然后再进行压缩并保存后传输至对象终端进行显示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010772467.3A CN111857937A (zh) | 2020-08-04 | 2020-08-04 | 一种全平台兼容的图文题目显示方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010772467.3A CN111857937A (zh) | 2020-08-04 | 2020-08-04 | 一种全平台兼容的图文题目显示方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111857937A true CN111857937A (zh) | 2020-10-30 |
Family
ID=72953239
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010772467.3A Pending CN111857937A (zh) | 2020-08-04 | 2020-08-04 | 一种全平台兼容的图文题目显示方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111857937A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115797507A (zh) * | 2023-01-29 | 2023-03-14 | 北京金茂教育科技有限公司 | 文件批注展示方法及系统 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104239284A (zh) * | 2014-09-15 | 2014-12-24 | 广州市西美信息科技有限公司 | 一种图文自动排版的方法和装置 |
| CN106933862A (zh) * | 2015-12-30 | 2017-07-07 | 北京神州泰岳软件股份有限公司 | 一种生成邮件报告的方法和装置 |
| US20180032490A1 (en) * | 2016-07-28 | 2018-02-01 | Crimson Corporation | Systems and methods for presentation of a terminal application screen |
| CN108228777A (zh) * | 2017-12-28 | 2018-06-29 | 北京洪泰同创信息技术有限公司 | HTML文本导出到word文档的方法及装置 |
| CN109491743A (zh) * | 2018-11-05 | 2019-03-19 | 上海鋆创信息技术有限公司 | 可视化报表生成方法、装置、电子设备和存储介质 |
| CN110765743A (zh) * | 2019-09-25 | 2020-02-07 | 青岛励图高科信息技术有限公司 | 用于数学公式在HTML中编辑显示和导出到Word文档中的系统 |
| CN111462281A (zh) * | 2020-03-31 | 2020-07-28 | 北京创鑫旅程网络技术有限公司 | 海报生成方法、装置、设备及存储介质 |
-
2020
- 2020-08-04 CN CN202010772467.3A patent/CN111857937A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104239284A (zh) * | 2014-09-15 | 2014-12-24 | 广州市西美信息科技有限公司 | 一种图文自动排版的方法和装置 |
| CN106933862A (zh) * | 2015-12-30 | 2017-07-07 | 北京神州泰岳软件股份有限公司 | 一种生成邮件报告的方法和装置 |
| US20180032490A1 (en) * | 2016-07-28 | 2018-02-01 | Crimson Corporation | Systems and methods for presentation of a terminal application screen |
| CN108228777A (zh) * | 2017-12-28 | 2018-06-29 | 北京洪泰同创信息技术有限公司 | HTML文本导出到word文档的方法及装置 |
| CN109491743A (zh) * | 2018-11-05 | 2019-03-19 | 上海鋆创信息技术有限公司 | 可视化报表生成方法、装置、电子设备和存储介质 |
| CN110765743A (zh) * | 2019-09-25 | 2020-02-07 | 青岛励图高科信息技术有限公司 | 用于数学公式在HTML中编辑显示和导出到Word文档中的系统 |
| CN111462281A (zh) * | 2020-03-31 | 2020-07-28 | 北京创鑫旅程网络技术有限公司 | 海报生成方法、装置、设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| DENNISMVARGO: "Google Chrome Puppeteer-Using the Trace Feature", Retrieved from the Internet <URL:https://testinproduction.wordpress.com/2017/10/10/puppeteer-using-the-trace-feature/> * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115797507A (zh) * | 2023-01-29 | 2023-03-14 | 北京金茂教育科技有限公司 | 文件批注展示方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (zh) | 基于web技术的网页截屏方法 | |
| US8923651B2 (en) | Data system and method | |
| CN111061526B (zh) | 自动化测试方法、装置、计算机设备及存储介质 | |
| US9898548B1 (en) | Image conversion of text-based images | |
| US8782617B2 (en) | Apparatus and method for translating open vector graphic application program interface | |
| JP2005527057A (ja) | 小画面端末表示部へのｈｔｍｌコンテンツ提示 | |
| CN103176986A (zh) | Flash动画数据转换为HTML5数据的方法 | |
| CN102779167A (zh) | 在移动终端中显示网页的方法及系统 | |
| CN110879937A (zh) | 文档生成网页的方法、装置、计算机设备和存储介质 | |
| CN107301046B (zh) | 图标的处理方法和装置、计算机设备和存储介质 | |
| US8656055B2 (en) | Protocol wrapper and serializer/deserializer for facilitating data exchanges | |
| CN104156207A (zh) | 一种文档显示方法以及装置 | |
| CN111708535A (zh) | 图文显示控制方法、装置及电子设备 | |
| CN111857937A (zh) | 一种全平台兼容的图文题目显示方法 | |
| CN105956133B (zh) | 智能终端上显示文件的方法及装置 | |
| CN114791988A (zh) | 一种基于浏览器的pdf文件解析方法、系统、存储介质 | |
| CN116954450A (zh) | 针对前端网页的截图方法以及装置、存储介质、终端 | |
| CN111223155A (zh) | 图像数据处理方法、装置、计算机设备和存储介质 | |
| CN113762235A (zh) | 检测页面叠加区域的方法和装置 | |
| CN111915705A (zh) | 图片可视化编辑方法、装置、设备和介质 | |
| CN111914198A (zh) | 一种实现浏览器兼容的方法、系统及电子设备 | |
| CN116579296A (zh) | B/s架构电子文档预览处理方法、装置、介质及设备 | |
| CN116663496A (zh) | 基于svg技术的浏览器小字体显示组件、显示方法、创建方法 | |
| US20150269131A1 (en) | Content conversion apparatus and method, and communication system | |
| CN112800373A (zh) | 网页资源数据生成方法、装置、计算机设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20240409 Address after: 310000, Building 10, 301-1, No. 1218 Wenyi West Road, Cangqian Street, Yuhang District, Hangzhou City, Zhejiang Province (self declared) Applicant after: Hangzhou Knowledge Jumping Technology Co.,Ltd. Country or region after: China Address before: 310000 room 702, building 1, No. 1818-2, Wenyi West Road, Yuhang street, Yuhang District, Hangzhou City, Zhejiang Province Applicant before: HANGZHOU ZHIHUIXUE TECHNOLOGY Co.,Ltd. Country or region before: China |
|
| TA01 | Transfer of patent application right |