CN112288635A - 一种处理应用程序页面的方法、装置和电子设备 - Google Patents

一种处理应用程序页面的方法、装置和电子设备 Download PDF

Info

Publication number
CN112288635A
CN112288635A CN202011186007.9A CN202011186007A CN112288635A CN 112288635 A CN112288635 A CN 112288635A CN 202011186007 A CN202011186007 A CN 202011186007A CN 112288635 A CN112288635 A CN 112288635A
Authority
CN
China
Prior art keywords
picture
page
information
area
generate
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
Application number
CN202011186007.9A
Other languages
English (en)
Inventor
招钧允
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Qiyue Information Technology Co Ltd
Original Assignee
Shanghai Qiyue Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shanghai Qiyue Information Technology Co Ltd filed Critical Shanghai Qiyue Information Technology Co Ltd
Priority to CN202011186007.9A priority Critical patent/CN112288635A/zh
Publication of CN112288635A publication Critical patent/CN112288635A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/58—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
    • G06F16/5866—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually using information manually generated, e.g. tags, keywords, comments, manually generated location and time information
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Library & Information Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本说明书实施例提供一种处理应用程序页面的方法,向客户端提供长图页面信息，客户端展示第一页面，第一页面中具有固定区域和滚动区域，固定区域中具有固定元素，截取第一页面中显示的图片生成第一图片信息，配置位置信息，在发生页面滚动事件显示第二页面后，获取固定元素的滚动距离并截取第二页面中显示的图片生成第二图片信息，基于滚动距离为第二图片配置位置信息，根据图片对应的位置信息和固定元素到滚动区域边界的距离对第一、第二图片进行拼接生成待预览长图。通过自动截取页面显示的图片，利用固定区域中固定元素的滚动距离为图片配置位置信息，从而在拼接时可以计算各图片在长图中的位置，进而拼接，实现了自动处理，提高了效率。

Description

一种处理应用程序页面的方法、装置和电子设备
技术领域
本申请涉及计算机领域，尤其涉及一种处理应用程序页面的方法、装置和电子设备。
背景技术
在应用程序的开发阶段，需要进行页面设计，开发时尽量还原页面设计样稿，而由于安装该应用程序的终端机型兼容性等问题，使得最终实际显示的页面样式可能会与开发预期有偏差，因此，往往需要对开发后的真实页面进行预览，以确定兼容效果。
然而，业内目前的处理方式多是手动截图生成可供预览的应用程序页面，这种方式效率较低，尤其在遇到长图时，操作过程繁琐，因此，有必要提供一种新的应用程序页面处理方法，提高对应用程序页面的处理效率。
发明内容
本说明书实施例提供一种处理应用程序页面的方法、装置和电子设备，用以提高对应用程序页面的处理效率。
本说明书实施例提供一种处理应用程序页面的方法，包括：
向客户端提供长图页面信息，使所述客户端基于所述长图页面信息生成并展示第一页面，所述第一页面中具有固定区域和滚动区域，所述固定区域中具有固定元素；
截取所述第一页面中显示的图片生成第一图片信息，并为所述第一图片配置位置信息；
在发生页面滚动事件显示第二页面后，获取所述固定元素的滚动距离并截取所述第二页面中显示的图片生成第二图片信息，基于所述滚动距离为所述第二图片配置位置信息；
根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图。
可选地，还包括：
获取长图的长度，根据长图的长度和图片的位置信息判断是否完成图片截取任务。
可选地，还包括：
将所述第一图片、第二图片对应的位置信息上报至预览系统；
所述根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图，包括：
所述预览系统根据上报的图片的位置信息和所述固定元素到所述滚动区域边界的距离计算各图片的有效区域；
利用各的有效区域进行拼接生成待预览长图。
可选地，还包括：
若未完成图片截取任务，则根据长图的长度、所述第一图片信息、第二图片信息对应的位置信息和所述固定元素到所述滚动区域边界的距离计算待预览长图缺失区域的位置信息；
基于所述缺失区域的位置信息计算目标距离，在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息。
可选地，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，包括：
将所述目标距离输入到页面滚动事件模型，所述页面滚动事件模型控制客户端中的页面进行滚动直至所述固定元素滚动目标距离；
页面滚动事件后截取页面图片生成用于拼接的第三图片信息。
可选地，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，还包括：
若计算得到多个目标距离，则在依次截取页面图片生成多个用于拼接的第三图片信息。
可选地，所述截取所述第一页面中显示的图片生成第一图片信息，包括：
若所述第一页面中滚动区域中的可移动元素到所述固定区域中固定元素的距离为预设范围中的最大值，则截取所述滚动区域和包括所述固定元素的固定区域生成第一图片信息。
可选地，还包括：
在预览系统中创建记录器，所述记录器用于存储已上报图片的位置信息；
所述根据长图的长度和图片的位置信息判断是否完成图片截取任务，包括：
遍历所述记录器中的位置信息。
可选地，所述固定元素到所述滚动区域边界的距离包括：所述固定元素到所述滚动区域上、下边界的距离。
可选地，还包括：
根据客户端终端的机型、操作系统、页面入口和用户状态确定预览类别；
所述向客户端提供长图页面信息，包括：
向当前属于所述预览类别的客户端提供长图页面信息。
本说明书实施例还提供一种处理应用程序页面的模块，包括：
页面信息模块，向客户端提供长图页面信息，使所述客户端基于所述长图页面信息生成并展示第一页面，所述第一页面中具有固定区域和滚动区域，所述固定区域中具有固定元素；
页面处理模块，截取所述第一页面中显示的图片生成第一图片信息，并为所述第一图片配置位置信息；
在发生页面滚动事件显示第二页面后，获取所述固定元素的滚动距离并截取所述第二页面中显示的图片生成第二图片信息，基于所述滚动距离为所述第二图片配置位置信息；
拼接模块，根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图。
可选地，所述拼接模块，还用于：
获取长图的长度，根据长图的长度和图片的位置信息判断是否完成图片截取任务。
可选地，所述页面处理模块，还用于：
将所述第一图片、第二图片对应的位置信息上报至预览系统；
所述根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图，包括：
所述预览系统根据上报的图片的位置信息和所述固定元素到所述滚动区域边界的距离计算各图片的有效区域；
利用各的有效区域进行拼接生成待预览长图。
可选地，所述拼接模块，还用于：
若未完成图片截取任务，则根据长图的长度、所述第一图片信息、第二图片信息对应的位置信息和所述固定元素到所述滚动区域边界的距离计算待预览长图缺失区域的位置信息；
基于所述缺失区域的位置信息计算目标距离，在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息。
可选地，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，包括：
将所述目标距离输入到页面滚动事件模型，所述页面滚动事件模型控制客户端中的页面进行滚动直至所述固定元素滚动目标距离；
页面滚动事件后截取页面图片生成用于拼接的第三图片信息。
可选地，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，还包括：
若计算得到多个目标距离，则在依次截取页面图片生成多个用于拼接的第三图片信息。
可选地，所述截取所述第一页面中显示的图片生成第一图片信息，包括：
若所述第一页面中滚动区域中的可移动元素到所述固定区域中固定元素的距离为预设范围中的最大值，则截取所述滚动区域和包括所述固定元素的固定区域生成第一图片信息。
可选地，所述拼接模块还用于：
在预览系统中创建记录器，所述记录器用于存储已上报图片的位置信息；
所述根据长图的长度和图片的位置信息判断是否完成图片截取任务，包括：
遍历所述记录器中的位置信息。
可选地，所述固定元素到所述滚动区域边界的距离包括：所述固定元素到所述滚动区域上、下边界的距离。
可选地，所述页面信息模块，还用于：
根据客户端终端的机型、操作系统、页面入口和用户状态确定预览类别；
所述向客户端提供长图页面信息，包括：
向当前属于所述预览类别的客户端提供长图页面信息。
本说明书实施例还提供一种电子设备，其中，该电子设备包括：
处理器；以及，
存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行上述任一项方法。
本说明书实施例还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现上述任一项方法。
本说明书实施例提供的各种技术方案通过向客户端提供长图页面信息，客户端展示第一页面，第一页面中具有固定区域和滚动区域，固定区域中具有固定元素，截取第一页面中显示的图片生成第一图片信息，配置位置信息，在发生页面滚动事件显示第二页面后，获取固定元素的滚动距离并截取第二页面中显示的图片生成第二图片信息，基于滚动距离为第二图片配置位置信息，根据图片对应的位置信息和固定元素到滚动区域边界的距离对第一、第二图片进行拼接生成待预览长图。通过自动截取页面显示的图片，利用固定区域中固定元素的滚动距离为图片配置位置信息，从而在拼接时可以计算各图片在长图中的位置，进而拼接，实现了自动处理，提高了效率。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为本说明书实施例提供的一种处理应用程序页面的方法的原理示意图；
图2为本说明书实施例提供的一种处理应用程序页面的装置的结构示意图；
图3为本说明书实施例提供的一种电子设备的结构示意图；
图4为本说明书实施例提供的一种计算机可读介质的原理示意图。
具体实施方式
现在将参考附图更全面地描述本发明的示例性实施例。然而，示例性实施例能够以多种形式实施，且不应被理解为本发明仅限于在此阐述的实施例。相反，提供这些示例性实施例能够使得本发明更加全面和完整，更加便于将发明构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的元件、组件或部分，因而将省略对它们的重复描述。
在符合本发明的技术构思的前提下，在某个特定的实施例中描述的特征、结构、特性或其他细节不排除可以以合适的方式结合在一个或更多其他的实施例中。
在对于具体实施例的描述中，本发明描述的特征、结构、特性或其他细节是为了使本领域的技术人员对实施例进行充分理解。但是，并不排除本领域技术人员可以实践本发明的技术方案而没有特定特征、结构、特性或其他细节的一个或更多。
附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
术语“和/或”或者“及/或”包括相关联的列出项目中的任一个或多者的所有组合。
图1为本说明书实施例提供的一种处理应用程序页面的方法的原理示意图，该方法可以包括：
S101：向客户端提供长图页面信息，使所述客户端基于所述长图页面信息生成并展示第一页面，所述第一页面中具有固定区域和滚动区域，所述固定区域中具有固定元素。
设计阶段制作的长图是提供给开发人员使用，不会存在兼容性问题。开发阶段会高度还原设计稿的样式，由于发布上线后用户量较大会出现不同机型兼容性问题，甚至在极端情况下个别用户请求接口返回数据不同导致页面展示内容不全的问题。
因此，需要得到实际的显示页面，浏览并识别是否存在问题，这样也能识别一些无脚本报错的问题。
为了兼顾各种情况，可以预先根据各种影响要素确定预览类别，影响要素有很多，比如，客户端终端的机型、操作系统、页面入口和用户状态等，在此不做体阐述和限制。
因此，在本说明书实施例中，该方法可以包括：
根据客户端终端的机型、操作系统、页面入口和用户状态确定预览类别；
这样，所述向客户端提供长图页面信息，可以包括：
向当前属于所述预览类别的客户端提供长图页面信息。
其中，向客户端提供长图页面信息，可以包括：
响应于目标客户端的页面访问请求，向所述客户端提供长图页面信息及截图规则，使所述客户端在生成并展示页面后基于所述截图规则截取页面中显示的图片生成图片信息为图片配置位置信息。
具体应用时，不是所有用户都需要截图上报，一类预览类别的用户只需要一个用户的客户端进行上报即可，当然，如果为了统计，也可以一个类别上报多个，在此不做限定。
考虑到一次截图无法完成预览，而多次截图得到的图片又无法计算位置关系，很难确定拼接的边界，因此，我们利用页面中的固定区域作为参考，再结合JAVAscript的指令便可为拼接图片做准备工作。
其中，固定区域是指在页面滚动时，显示内容不变的区域，通常是遮挡区域，比如页面中的header(标题区域)、footer(页脚区域)等。
固定区域中往往显示有页面元素，在页面滚动时，固定区域中的页面元素固定，因此可称作固定元素。
在本说明书实施例中，还可以维护预览系统，用于对上报的图片进行处理和供用户预览拼接后的长图。
S102：截取所述第一页面中显示的图片生成第一图片信息，并为所述第一图片配置位置信息。
截图时，可以调用本地的截屏接口进行截图，截图后可以直接使用图形容器(比如Canvas)裁剪出有效区域的图片，也可以在拼接时再裁剪。
在本说明书实施例中，JAVAscript脚本通过固定区域中的固定元素可以获取其位置，JAVAscript脚本也能获取到固定元素滚动的距离(scrollTop)和长图的高度(scrollHeight)，屏幕视图的高度(height)。
因此，可以获取固定元素在视图中的位置，基于此为截取生成的图片配置位置信息。
考虑到实际场景中，在页面滑动到最底部时，可以连同顶部的固定区域一同截取，为了描述这个规则，可以为滚动区域中的可移动元素到所述固定区域中固定元素的距离设置预设范围，这样，当滚动区域中的可移动元素到所述固定区域中固定元素的距离为预设范围中的最大值时，代表可以页面已滚动到尽头。
因此，在本说明书实施例中，所述截取所述第一页面中显示的图片生成第一图片信息，可以包括：
若所述第一页面中滚动区域中的可移动元素到所述固定区域中固定元素的距离为预设范围中的最大值，则截取所述滚动区域和包括所述固定元素的固定区域生成第一图片信息。
而在页面未滚动到尽头时，则只对页面中的滚动区域进行截取。
当然，也可以在每次都截取全屏，在拼接时根据固定区域的高度裁去固定区域的局部图片，继而拼接。
其中，位置信息可以是截取生成的图片的上边界在视图中的高度至下边界在试图中的高度。
具体实施时，可以用：top，bottom来表示上、下边界在视图中的高度。
S103：在发生页面滚动事件显示第二页面后，获取所述固定元素的滚动距离并截取所述第二页面中显示的图片生成第二图片信息，基于所述滚动距离为所述第二图片配置位置信息。
其中，页面滚动事件可以时用户操作产生的事件，也可以是根据预设的滚动规则自动控制发生的事件，在此不做限定。
在本说明书实施例中，还可以包括：
将所述第一图片、第二图片对应的位置信息上报至预览系统。
考虑到拼接成长图往往需要多个图片，但是如何确定截取的图片是否足够用于拼成长图，因此，在本说明书实施例中，该方法还可以包括：
获取长图的长度，根据长图的长度和图片的位置信息判断是否完成图片截取任务。
如果一个实施例中只在页面滑动到尽头时才截取固定区域，那么，只要上报的各图片的位置信息不中断，就表明已完成图片截取任务。
如果实施例是每次都截取全屏，则需要裁剪出有效区域之后，位置信息不中断，才表明已完成图片截取任务。
在本说明书实施例中，还可以包括：
在预览系统中创建记录器，所述记录器用于存储已上报图片的位置信息；
所述根据长图的长度和图片的位置信息判断是否完成图片截取任务，可以包括：
遍历所述记录器中的位置信息。
具体的，记录器可以是数组。
在本说明书实施例中，该方法还可以包括：
若未完成图片截取任务，则根据长图的长度、所述第一图片信息、第二图片信息对应的位置信息和所述固定元素到所述滚动区域边界的距离计算待预览长图缺失区域的位置信息；
基于所述缺失区域的位置信息计算目标距离，在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息。
其中，目标距离为用于监测页面滚动的距离，如果页面滚动了目标距离，就说明当前可以进行截图。
为了实现自动截图，我们可以借助已有的事件模型来进行处理。
具体的，在本说明书实施例中，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，可以包括：
将所述目标距离输入到页面滚动事件模型，所述页面滚动事件模型控制客户端中的页面进行滚动直至所述固定元素滚动目标距离；
页面滚动事件后截取页面图片生成用于拼接的第三图片信息。
考虑到一种场景中，长图的长度比屏幕的高度高太多，就需要多次截取，因此，计算得到的目标距离可能是多个。
因此，在本说明书实施例中，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，还可以包括：
若计算得到多个目标距离，则在依次截取页面图片生成多个用于拼接的第三图片信息。
S104：根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图。
通过向客户端提供长图页面信息，客户端展示第一页面，第一页面中具有固定区域和滚动区域，固定区域中具有固定元素，截取第一页面中显示的图片生成第一图片信息，配置位置信息，在发生页面滚动事件显示第二页面后，获取固定元素的滚动距离并截取第二页面中显示的图片生成第二图片信息，基于滚动距离为第二图片配置位置信息，根据图片对应的位置信息和固定元素到滚动区域边界的距离对第一、第二图片进行拼接生成待预览长图。通过自动截取页面显示的图片，利用固定区域中固定元素的滚动距离为图片配置位置信息，从而在拼接时可以计算各图片在长图中的位置，进而拼接，实现了自动处理，提高了效率。
在本说明书实施例中，如果该方法包括：
将所述第一图片、第二图片对应的位置信息上报至预览系统；
那么，所述根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图，可以包括：
所述预览系统根据上报的图片的位置信息和所述固定元素到所述滚动区域边界的距离计算各图片的有效区域；
利用各的有效区域进行拼接生成待预览长图。
其中，在本说明书实施例中，所述固定元素到所述滚动区域边界的距离包括：所述固定元素到所述滚动区域上、下边界的距离。
其中，对于一种特例，固定元素为固定区域与滚动区域的边界线，那么，所述固定元素到所述滚动区域上边界的距离为零和滚动区域高度中的一个，所述固定元素到所述滚动区域上边界的距离为零和滚动区域高度中的另一个。
在一种应用场景中，预览者不需要进行截图操作，只需要确定预览类别，便可以得到拼接后的长图，由于该图片是通过对页面进行截图生成的，因而可以真实的反映实际的显示样式，故能够判断开发时是否有未兼顾到的问题。
本说明书实施例为具体实施时的一种方法，可以包括：
客户端向服务器发送页面请求，所述请求携带客户端的用户当前状态信息、页面入口、客户端程序版本信息和终端系统信息；
服务器检索判断是否需要对当前请求的页面进行截屏，如果需要，则将截屏规则返回给客户端；
客户端在展示该页面后，或者发生滚动并且滚动事件停止后(可以将300ms作为判断滚动停止的标准)，进行截图；
客户端多次进行截图，并根据各图片的位置信息判断是否完成任务，如果未完成，则各图片的位置信息计算待预览长图缺失区域的位置信息，在滚动一定距离后进行截图；
客户端将客户端的用户当前状态信息、页面入口、客户端程序版本信息和手机系统信息连同截取生成的图片及对应的位置信息发送给服务器；
服务器将客户端上报的信息进行存储；
在需要进行预览时，可以输入当前状态信息、页面入口、客户端程序版本信息和手机系统信息等信息，预览系统便请求服务器查询对应的图片，进行拼接生成待预览长图。
图2为本说明书实施例提供的一种处理应用程序页面的装置的结构示意图，该装置可以包括：
页面信息模块201，向客户端提供长图页面信息，使所述客户端基于所述长图页面信息生成并展示第一页面，所述第一页面中具有固定区域和滚动区域，所述固定区域中具有固定元素；
页面处理模块202，截取所述第一页面中显示的图片生成第一图片信息，并为所述第一图片配置位置信息；
在发生页面滚动事件显示第二页面后，获取所述固定元素的滚动距离并截取所述第二页面中显示的图片生成第二图片信息，基于所述滚动距离为所述第二图片配置位置信息；
拼接模块203，根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图。
在本说明书实施例中，所述拼接模块，还可以用于：
获取长图的长度，根据长图的长度和图片的位置信息判断是否完成图片截取任务。
在本说明书实施例中，所述页面处理模块，还可以用于：
将所述第一图片、第二图片对应的位置信息上报至预览系统；
所述根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图，可以包括：
所述预览系统根据上报的图片的位置信息和所述固定元素到所述滚动区域边界的距离计算各图片的有效区域；
利用各的有效区域进行拼接生成待预览长图。
在本说明书实施例中，所述拼接模块，还可以用于：
若未完成图片截取任务，则根据长图的长度、所述第一图片信息、第二图片信息对应的位置信息和所述固定元素到所述滚动区域边界的距离计算待预览长图缺失区域的位置信息；
基于所述缺失区域的位置信息计算目标距离，在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息。
在本说明书实施例中，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，可以包括：
将所述目标距离输入到页面滚动事件模型，所述页面滚动事件模型控制客户端中的页面进行滚动直至所述固定元素滚动目标距离；
页面滚动事件后截取页面图片生成用于拼接的第三图片信息。
在本说明书实施例中，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，还可以包括：
若计算得到多个目标距离，则在依次截取页面图片生成多个用于拼接的第三图片信息。
在本说明书实施例中，所述截取所述第一页面中显示的图片生成第一图片信息，可以包括：
若所述第一页面中滚动区域中的可移动元素到所述固定区域中固定元素的距离为预设范围中的最大值，则截取所述滚动区域和包括所述固定元素的固定区域生成第一图片信息。
在本说明书实施例中，所述拼接模块还可以用于：
在预览系统中创建记录器，所述记录器用于存储已上报图片的位置信息；
所述根据长图的长度和图片的位置信息判断是否完成图片截取任务，可以包括：
遍历所述记录器中的位置信息。
在本说明书实施例中，所述固定元素到所述滚动区域边界的距离包括：所述固定元素到所述滚动区域上、下边界的距离。
在本说明书实施例中，所述页面信息模块，还可以用于：
根据客户端终端的机型、操作系统、页面入口和用户状态确定预览类别；
所述向客户端提供长图页面信息，可以包括：
向当前属于所述预览类别的客户端提供长图页面信息。
该装置向客户端提供长图页面信息，客户端展示第一页面，第一页面中具有固定区域和滚动区域，固定区域中具有固定元素，截取第一页面中显示的图片生成第一图片信息，配置位置信息，在发生页面滚动事件显示第二页面后，获取固定元素的滚动距离并截取第二页面中显示的图片生成第二图片信息，基于滚动距离为第二图片配置位置信息，根据图片对应的位置信息和固定元素到滚动区域边界的距离对第一、第二图片进行拼接生成待预览长图。通过自动截取页面显示的图片，利用固定区域中固定元素的滚动距离为图片配置位置信息，从而在拼接时可以计算各图片在长图中的位置，进而拼接，实现了自动处理，提高了效率。
基于同一发明构思，本说明书实施例还提供一种电子设备。
下面描述本发明的电子设备实施例，该电子设备可以视为对于上述本发明的方法和装置实施例的具体实体实施方式。对于本发明电子设备实施例中描述的细节，应视为对于上述方法或装置实施例的补充；对于在本发明电子设备实施例中未披露的细节，可以参照上述方法或装置实施例来实现。
图3为本说明书实施例提供的一种电子设备的结构示意图。下面参照图3来描述根据本发明该实施例的电子设备300。图3显示的电子设备300仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图3所示，电子设备300以通用计算设备的形式表现。电子设备300的组件可以包括但不限于：至少一个处理单元310、至少一个存储单元320、连接不同系统组件(包括存储单元320和处理单元310)的总线330、显示单元340等。
其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元310执行，使得所述处理单元310执行本说明书上述处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元310可以执行如图1所示的步骤。
所述存储单元320可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)3201和/或高速缓存存储单元3202，还可以进一步包括只读存储单元(ROM)3203。
所述存储单元320还可以包括具有一组(至少一个)程序模块3205的程序/实用工具3204，这样的程序模块3205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线330可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备300也可以与一个或多个外部设备400(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备300交互的设备通信，和/或与使得该电子设备300能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口350进行。并且，电子设备300还可以通过网络适配器360与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器360可以通过总线330与电子设备300的其它模块通信。应当明白，尽管图3中未示出，可以结合电子设备300使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述，本领域的技术人员易于理解，本发明描述的示例性实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个计算机可读的存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本发明的上述方法。当所述计算机程序被一个数据处理设备执行时，使得该计算机可读介质能够实现本发明的上述方法，即：如图1所示的方法。
图4为本说明书实施例提供的一种计算机可读介质的原理示意图。
实现图1所示方法的计算机程序可以存储于一个或多个计算机可读介质上。计算机可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
综上所述，本发明可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)等通用数据处理设备来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，本发明不与任何特定计算机、虚拟装置或者电子设备固有相关，各种通用装置也可以实现本发明。以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。
以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种处理应用程序页面的方法，其特征在于，包括：
向客户端提供长图页面信息，使所述客户端基于所述长图页面信息生成并展示第一页面，所述第一页面中具有固定区域和滚动区域，所述固定区域中具有固定元素；
截取所述第一页面中显示的图片生成第一图片信息，并为所述第一图片配置位置信息；
在发生页面滚动事件显示第二页面后，获取所述固定元素的滚动距离并截取所述第二页面中显示的图片生成第二图片信息，基于所述滚动距离为所述第二图片配置位置信息；
根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图。
2.根据权利要求1所述的方法，其特征在于，还包括：
获取长图的长度，根据长图的长度和图片的位置信息判断是否完成图片截取任务。
3.根据权利要求1-2中任一项所述的方法，其特征在于，还包括：
将所述第一图片、第二图片对应的位置信息上报至预览系统；
所述根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图，包括：
所述预览系统根据上报的图片的位置信息和所述固定元素到所述滚动区域边界的距离计算各图片的有效区域；
利用各的有效区域进行拼接生成待预览长图。
4.根据权利要求1-3中任一项所述的方法，其特征在于，还包括：
若未完成图片截取任务，则根据长图的长度、所述第一图片信息、第二图片信息对应的位置信息和所述固定元素到所述滚动区域边界的距离计算待预览长图缺失区域的位置信息；
基于所述缺失区域的位置信息计算目标距离，在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息。
5.根据权利要求1-4中任一项所述的方法，其特征在于，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，包括：
将所述目标距离输入到页面滚动事件模型，所述页面滚动事件模型控制客户端中的页面进行滚动直至所述固定元素滚动目标距离；
页面滚动事件后截取页面图片生成用于拼接的第三图片信息。
6.根据权利要求1-5中任一项所述的方法，其特征在于，所述在监测到所述固定元素滚动目标距离截取页面图片生成用于拼接的第三图片信息，还包括：
若计算得到多个目标距离，则在依次截取页面图片生成多个用于拼接的第三图片信息。
7.根据权利要求1-6中任一项所述的方法，其特征在于，所述截取所述第一页面中显示的图片生成第一图片信息，包括：
若所述第一页面中滚动区域中的可移动元素到所述固定区域中固定元素的距离为预设范围中的最大值，则截取所述滚动区域和包括所述固定元素的固定区域生成第一图片信息。
8.一种处理应用程序页面的模块，其特征在于，包括：
页面信息模块，向客户端提供长图页面信息，使所述客户端基于所述长图页面信息生成并展示第一页面，所述第一页面中具有固定区域和滚动区域，所述固定区域中具有固定元素；
页面处理模块，截取所述第一页面中显示的图片生成第一图片信息，并为所述第一图片配置位置信息；
在发生页面滚动事件显示第二页面后，获取所述固定元素的滚动距离并截取所述第二页面中显示的图片生成第二图片信息，基于所述滚动距离为所述第二图片配置位置信息；
拼接模块，根据所述第一图片、第二图片对应的位置信息和所述固定元素到所述滚动区域边界的距离对所述第一图片、第二图片进行拼接生成待预览长图。
9.一种电子设备，其中，该电子设备包括：
处理器；以及，
存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行根据权利要求1-7中任一项所述的方法。
10.一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现权利要求1-7中任一项所述的方法。
CN202011186007.9A 2020-10-30 2020-10-30 一种处理应用程序页面的方法、装置和电子设备 Pending CN112288635A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011186007.9A CN112288635A (zh) 2020-10-30 2020-10-30 一种处理应用程序页面的方法、装置和电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011186007.9A CN112288635A (zh) 2020-10-30 2020-10-30 一种处理应用程序页面的方法、装置和电子设备

Publications (1)

Publication Number Publication Date
CN112288635A true CN112288635A (zh) 2021-01-29

Family

ID=74352432

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011186007.9A Pending CN112288635A (zh) 2020-10-30 2020-10-30 一种处理应用程序页面的方法、装置和电子设备

Country Status (1)

Country Link
CN (1) CN112288635A (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105549845A (zh) * 2015-12-09 2016-05-04 惠州Tcl移动通信有限公司 一种基于移动终端的页面连续截图方法、系统及移动终端
WO2016106997A1 (zh) * 2014-12-31 2016-07-07 中兴通讯股份有限公司 屏幕截图方法及装置、移动终端
CN106775301A (zh) * 2016-11-29 2017-05-31 珠海市魅族科技有限公司 一种终端的截图方法和终端设备
CN109164966A (zh) * 2018-08-23 2019-01-08 珠海格力电器股份有限公司 一种屏幕截图的方法及装置
CN109976859A (zh) * 2019-03-28 2019-07-05 努比亚技术有限公司 截图方法、终端及计算机可读存储介质
CN110647273A (zh) * 2019-06-18 2020-01-03 北京无限光场科技有限公司 应用内自定义排版合成长图的方法、装置、设备、介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016106997A1 (zh) * 2014-12-31 2016-07-07 中兴通讯股份有限公司 屏幕截图方法及装置、移动终端
CN105549845A (zh) * 2015-12-09 2016-05-04 惠州Tcl移动通信有限公司 一种基于移动终端的页面连续截图方法、系统及移动终端
CN106775301A (zh) * 2016-11-29 2017-05-31 珠海市魅族科技有限公司 一种终端的截图方法和终端设备
CN109164966A (zh) * 2018-08-23 2019-01-08 珠海格力电器股份有限公司 一种屏幕截图的方法及装置
CN109976859A (zh) * 2019-03-28 2019-07-05 努比亚技术有限公司 截图方法、终端及计算机可读存储介质
CN110647273A (zh) * 2019-06-18 2020-01-03 北京无限光场科技有限公司 应用内自定义排版合成长图的方法、装置、设备、介质

Similar Documents

Publication Publication Date Title
CN109862064B (zh) 一种用于设备远程监控的组态方法及装置
US9110765B2 (en) Displaying different hierarchy levels of computer program source code
CN111045653B (zh) 系统生成方法、装置、计算机可读介质及电子设备
EP2538324A2 (en) Rendering approximate webspace screenshot client-side
CN110875858B (zh) 应用测试数据抓取方法、系统、设备及存储介质
WO2021248337A1 (zh) 一种应用安装方法、装置、设备及计算机可读存储介质
CN109582317B (zh) 用于调试寄宿应用的方法和装置
CN112100079A (zh) 基于模拟数据调用的测试方法、系统和电子设备
CN113505302A (zh) 支持动态获取埋点数据的方法、装置、系统及电子设备
US9164746B2 (en) Automatic topology extraction and plotting with correlation to real time analytic data
JP2016085523A (ja) ノードを表示する方法、並びに、ノードを表示するためのコンピュータ及びそのコンピュータ・プログラム
US10719206B1 (en) Measuring unresponsive interactions
CN112817817A (zh) 埋点信息查询方法、装置、计算机设备和存储介质
CN114756228A (zh) 页面处理方法、装置、设备及存储介质
CN112288635A (zh) 一种处理应用程序页面的方法、装置和电子设备
CN113220381A (zh) 一种点击数据展示方法和装置
CN110717134A (zh) 产品说明发布方法、装置、存储介质及电子设备
CN113467867B (zh) 信息处理方法、装置、电子设备及存储介质
CN115033634A (zh) 数据采集方法、装置、电子设备和介质
CN112925521A (zh) 一种界面生成方法和装置
CN114692055A (zh) 表单处理方法、装置、存储介质与电子设备
CN109756393B (zh) 信息处理方法、系统、介质和计算设备
CN111143526B (zh) 一种咨询服务控件配置信息的生成、控制方法及装置
CN113535037A (zh) 命令行终端交互展示方法、装置、计算机可读介质及设备
CN109190097B (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