一种截图系统、方法、装置、设备及介质与流程

1.本技术涉及数据处理领域，具体涉及到一种截图系统、方法、装置、设备及介质。


背景技术：

2.对万维网(world wide web，web)页面中的某个区域进行截图时，可能存在跨域问题。例如，一个web页面通过嵌入式框架(iframe)嵌套在另一个web页面中，若iframe内部页面与外部页面不同源，则对iframe内部页面进行截图时，会受到浏览器同源策略限制，出现跨域问题，导致截图失败。
3.现有跨域截图技术中，浏览器将需要截图区域的统一资源定位系统(uniform resource locator，url)发送给无头浏览器或者其它服务器进行渲染，得到截图，无头浏览器或者其它服务器将截图发给浏览器进行展示。但这种方式只能截取到截图区域的初始页面，而无法截取发生变动后的页面(例如页面中的文字、图像等内容发生了变化)，导致截图实时性差。此外，这种方式需要前后端交互，截图耗时长。


技术实现要素：

4.本技术实施例提供一种截图系统、方法、装置、设备及介质，用于解决现有技术中跨域截图实时性差、耗时长的技术问题。
5.第一方面，本技术实施例一种截图系统，所述系统包括第一模块与第二模块，所述第一模块位于第一页面，所述第二模块位于第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；
6.所述第二模块用于：接收输入信息，所述输入信息用于指示对所述第一页面中的指定区域进行截图；基于跨文档通信应用程序编程接口(application programming interface，api)向所述第一模块发送第一指示信息，所述第一指示信息用于指示所述指定区域；
7.所述第一模块用于：基于所述跨文档通信api接收所述第一指示信息；根据所述第一指示信息获取所述第一页面的页面信息，所述页面信息包括超文本标记语言(hyper text markup language，html)和层叠样式表(cascading style sheets，css)；基于所述跨文档通信api向所述第二模块发送所述页面信息；
8.所述第二模块用于：基于所述跨文档通信api接收所述页面信息；基于所述页面信息在所述第二页面中渲染出截图。
9.在本方案中，截图系统包括第一模块与第二模块，二者可以基于跨文档通信api通信，第一模块位于第一页面，第二模块位于第二页面，第一模块获取第一页面的页面信息后，将页面信息发给第二模块，由第二模块根据页面信息渲染出截图。由于第二模块是根据html和css渲染出截图，因此截图的内容总是与第一页面的内容相同，保证了截图的实时性与高精度，并且第一模块与第二模块均位于前端，在前端可以获取截图，减少截图耗时，提高截图效率。
10.可选的，所述第二模块在基于跨文档通信应用程序编程接口api向所述第一模块发送第一指示信息时，具体用于：在确定所述第一模块具有获取页面信息的能力后，基于跨文档通信api向所述第一模块发送第一指示信息。
11.通过本方式，第二模块预先确定第一模块具有获取页面信息的能力，保证第一模块能够获取到页面信息，提高了方案的可靠性。
12.可选的，所述第一模块还用于：基于所述跨文档通信api向所述第二模块发送第二指示信息，所述第二指示信息用于指示所述第一模块具有获取页面信息的能力；所述第二模块还用于：基于所述跨文档通信api接收所述第二指示信息；根据所述第二指示信息确定所述第一模块具有获取页面信息的能力。
13.通过本方式，第一模块预先向第二模块发送第二指示信息能够及时向第二模块反馈第一模块具有获取页面信息的能力，提高了方案的完整性。
14.可选的，所述第二模块还用于：在接收所述输入信息之后，若所述第一模块不具有获取页面信息的能力，在所述第二页面中显示截图失败的信息。
15.通过本方式，第二模块确定第一模块不具有获取页面信息的能力，在第二页面中显示截图失败的信息反馈用户，使得用户可以及时感知截图状态，提高了用户的截图体验。
16.可选的，所述第一模块还用于：在获取到所述页面信息之后，去除所述页面信息中的空格和注释；所述第一模块在基于所述跨文档通信api向所述第二模块发送所述页面信息时，具体用于：基于所述跨文档通信api向所述第二模块发送去除了空格和注释后的页面信息。
17.通过本方式，第一模块去除页面信息中的空格和注释，减少了需要传输的数据，提高了数据的传输效率和安全性，进而提高了截图效率。
18.可选的，所述第一模块在根据所述第一指示信息获取页面信息时，具体用于：若在所述第二模块获取所述输入信息的时刻所述指定区域的内容与在当前时刻所述指定区域的内容相同，获取所述指定区域的页面信息；或者，若在所述第二模块获取所述输入信息的时刻所述指定区域的内容与在当前时刻所述指定区域的内容不同，获取所述第一页面的全部区域的页面信息。
19.通过本方式，若当前指定区域的内容为用户需要的内容时，第一模块获取指定区域的页面信息，否则，第一模块获取第一页面的全部区域的页面信息，为用户提供更大区域的截图，尽可能的满足用户的需求，进而提高用户体验。
20.第一模块可以根据实际情况，选择获取指定区域的页面信息还是第一页面的全部区域的页面信息，提高了方案的完整性，且不能确定指定区域的页面信息时，也能使用户得到第一页面的全部区域的截图，进而提高用户体验。
21.可选的，所述第二模块在基于所述页面信息在所述第二页面中渲染出截图时，具体用于：若收到的页面信息是所述指定区域的页面信息，则在所述第二页面中渲染出所述第一页面中的指定区域的截图；或者，
22.若页面信息是所述第一页面的全部区域的页面信息，则在所述第二页面中渲染出所述第一页面的全部区域的截图。
23.通过本方式，第二模块生成第一页面的指定区域或者全部区域的截图，提高了方案的完整性。
24.第二方面，本技术实施例提供一种截图方法，所述方法应用于截图系统中的第一模块，所述第一模块位于所述第一页面，所述第一页面内嵌于第二页面，所述第一页面与所述第二页面不同源，所述方法包括：基于跨文档通信api接收来自位于所述第二页面的第二模块的第一指示信息，所述第一指示信息用于指示所述第一页面中的指定区域；根据所述第一指示信息获取所述第一页面的页面信息，所述页面信息包括html和css；基于所述跨文档通信api向所述第二模块发送所述页面信息。
25.可选的，所述方法还包括：基于所述跨文档通信api向所述第二模块发送第二指示信息，所述第二指示信息用于指示所述第一模块具有获取页面信息的能力。
26.可选的，所述方法还包括：在获取到所述页面信息之后，去除所述页面信息中的空格和注释；所述基于所述跨文档通信api向所述第二模块发送所述页面信息，包括：基于所述跨文档通信api向所述第二模块发送去除了空格和注释后的页面信息。
27.可选的，所述根据所述第一指示信息获取所述第一页面的页面信息，包括：若在所述第二模块获取所述输入信息的时刻所述指定区域的内容与在当前时刻所述指定区域的内容相同，获取所述指定区域的页面信息；或者，
28.若在所述第二模块获取所述输入信息的时刻所述指定区域的内容与在当前时刻所述指定区域的内容不同，获取所述第一页面的全部区域的页面信息。
29.第三方面，本技术实施例提供一种截图方法，所述方法应用于截图系统中的第二模块，所述第二模块位于第二页面，所述第二页面中内嵌有第一页面，所述第一页面与所述第二页面不同源，所述方法包括：
30.接收输入信息，所述输入信息用于指示对所述第一页面中的指定区域进行截图；基于跨文档通信api向位于所述第一页面的第一模块发送第一指示信息，所述第一指示信息用于指示所述指定区域；
31.基于所述跨文档通信api接收来自所述第一模块的所述第一页面的页面信息；基于所述页面信息在所述第二页面中渲染出截图；所述页面信息包括html和css。
32.可选的，所述基于跨文档通信api向第一模块发送第一指示信息，包括：在确定述第一模块具有获取页面信息的能力后，基于跨文档通信api向所述第一模块发送第一指示信息。
33.可选的，所述方法还包括：基于所述跨文档通信api接收第二指示信息；根据所述第二指示信息确定所述第一模块具有获取页面信息的能力，所述第二指示信息用于指示所述第一模块具有获取页面信息的能力。
34.可选的，所述方法还包括：在接收输入信息之后，若所述第一模块不具有获取页面信息的能力，在所述第二页面中显示截图失败的信息。
35.可选的，所述基于所述页面信息在所述第二页面中渲染出截图，包括：若收到的页面信息是所述指定区域的页面信息，则在所述第二页面中渲染出所述第一页面中的指定区域的截图；或者，若页面信息是所述第一页面的全部区域的页面信息，则在所述第二页面中渲染出所述第一页面的全部区域的截图。
36.第四方面，本技术实施例提供一种截图方法，包括：
37.运行浏览器，在所述浏览器中显示第一页面和第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；
38.在所述浏览器中加载截图工具，所述截图工具包括第一模块和第二模块；
39.将所述第一模块注入到第一页面，将所述第二模块注入到第二页面；所述第一模块与第二模块能够基于跨文档通信api通信；
40.运行所述第一模块，以实现如第二方面所述的方法，以及运行所述第二模块，以实现如第三方面所述的方法。
41.第五方面，本技术实施例一种截图装置，该装置包括用于执行上述第四方面的方法的模块/单元/技术手段。
42.示例性的，该装置可以包括：
43.运行模块，用于运行所述浏览器，显示第一页面和第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；
44.加载模块，用于在所述浏览器中加载截图工具，所述截图工具包括第一模块和第二模块；将所述第一模块注入到第一页面，将所述第二模块注入到第二页面；所述第一模块与第二模块能够基于跨文档通信api通信；
45.所述运行模块还用于运行所述第一模块，以实现如第二方面所述的方法，以及运行所述第二模块，以实现如第三方面所述的方法。
46.第六方面，本技术提供一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器、通信接口；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述至少一个处理器通过执行所述存储器存储的指令，使得所述电子设备通过通信接口执行上述第二方面或第三方面所述的方法。
47.第七方面，提供一种计算机可读存储介质，所述计算机可读存储介质用于存储指令，当所述指令被执行时，使如第二方面或第三方面所述的方法被实现。
48.第八方面，申请提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行上述第二方面或第三方面所述的方法。
49.本技术实施例中第二至第八方面中提供的一个或多个技术方案所具有的技术效果或优点，均可以由第一方面中提供的对应的一个或多个技术方案所具有的技术效果或优点对应解释，此处不再赘述。
附图说明
50.图1为本技术实施例提供一种场景示意图；
51.图2为本技术实施例提供的一种截图系统的示意图；
52.图3为本技术实施例提供的一种截图方法的流程图；
53.图4为本技术实施例提供的另一种流程示意图；
54.图5为本技术实施例提供的一种截图装置的结构图；
55.图6为本技术实施例提供的一种电子设备的结构图。
具体实施方式
56.为使本技术的目的、技术方案和优点更加清楚明白，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅
是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互任意组合。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以按不同于此处的顺序执行所示出或描述的步骤。
57.本技术的说明书和权利要求书及上述附图中的术语“第一”和“第二”是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的保护。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本技术中的“多个”可以表示至少两个，例如可以是两个、三个或者更多个，本技术实施例不做限制。
58.本技术实施例中的术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
59.本技术技术方案中，对数据的采集、传播、使用等，均符合国家相关法律法规要求。
60.下面，对本技术中的部分用于进行通用解释说明，以便于本领域技术人员理解，并不对本技术中的用语进行限定。
61.url：由协议、域名、端口三部分组成。
62.同源：指当前页面与被请求页面的url协议相同，域名相同，端口相同。
63.跨域：指被请求页面的url的协议、域名、端口三者中的任意一个与当前页面的url不同。
64.iframe：是html元素，用于在网页中内嵌另一个网页。
65.html：是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等。
66.css：是一种用来表现html或可扩展标记语言(extensible markup language，xml)等文件样式的计算机语言。
67.参见图1，为本技术实施例提供一种场景示意图。
68.其中，第一页面内嵌于第二页面，且第一页面与第二页面不同源。
69.参见图2，为本技术实施例提供一种截图系统，该系统中包括：第一模块与第二模块。
70.一种可能的实现方式中，图2所示的系统封装在浏览器插件中，运行浏览器，浏览器显示如图1所示的第一页面和第二页面，浏览器加载插件，将第一模块注入到第一页面中，将第二模块注入到第二页面中，第一模块与第二模块能够基于跨文档通信api通信。其中，第一模块用于获取第一页面的页面信息，页面信息包括html和css，第二模块用于渲染截图。
71.当浏览器运行第一模块时，第一模块会实现其功能，浏览器运行第二模块时，第二模块会实现其功能。具体方法将在后文详细介绍。
72.参见图3，为本技术实施例提供的一种截图方法的流程图，该方法以应用于图2所
示的系统为例。该方法具体步骤如下：
73.s301：第二模块接收输入信息。
74.一种可能的实现方式中，浏览器加载插件后，第二模块读取第二页面的基本信息(例如第二页面的html和css)；生成识别对象，即具有接收输入信息与接收第一模块的信息的能力。其中，输入信息用于指示对第一页面中的指定区域进行截图。
75.示例性的，第二模块配置快捷键指令，当用户触发快捷键(ctrl+shift+s)时，第二页面中调出窗口，窗口用于接收用户的输入信息并将输入信息发送至第二模块，输入信息包括指示第一页面中的元素的类名与id。
76.s302：第二模块基于跨文档通信api向第一模块发送第一指示信息；相应的，第一模块基于跨文档通信api接收来自第二模块的第一指示信息。
77.第二模块根据输入信息生成相应的第一指示信息，第一指示信息用于指示指定区域。
78.一种可能的实现方式中，第二模块在确定第一模块具有获取页面信息的能力后，基于跨文档通信api向第一模块发送第一指示信息。
79.可选的，第一模块基于跨文档通信api向第二模块发送第二指示信息，相应的，第二模块基于跨文档通信api接收来自第一模块的第二指示信息。第二模块根据第二指示信息确定第一模块具有获取页面信息的能力。其中，第二指示信息用于指示第一模块具有获取页面信息的能力。
80.可以理解的，第一模块可以在第二模块发送第一指示信息前，向第二模块发送第二指示信息。例如，在第一模块注入到第一页面、第二模块注入到第二页面后，在第二模块接收输入信息前，第一模块向第二模块发送第二指示信息。
81.通过本方式，第一模块预先向第二模块发送第二指示信息，能够及时向第二模块反馈第一模块具有获取页面信息的能力，提高了方案的完整性。
82.另一种可能的实现方式中，第二模块在接收输入信息后，若确定第一模块不具有获取页面信息的能力，则在第二页面中显示截图失败的信息，以提示用户第一模块启动失败。换言之，第二模块未收到来自第一模块的第二指示信息，则在接收输入信息后，在第二页面中显示截图失败的信息。
83.示例性的，第一模块未生成第二指示信息，或者第一模块生成第二指示信息且第二指示信息发送失败，则第二模块不能收到来自第一模块的第二指示信息。
84.通过本方式，第二模块确定第一模块不具有获取页面信息的能力，在第二页面中显示截图失败的信息反馈用户，使得用户可以及时感知截图状态，提高了用户的截图体验。
85.s303：第一模块根据第一指示信息获取第一页面的页面信息。
86.一种可能的实现方式中，若第一指示信息中的指定区域为第一页面的全部区域，则第一模块获取第一页面的全部区域的页面信息。
87.另一种可能的实现方式中，若第一指示信息中的指定区域为第一页面中的部分区域，且在第二模块获取输入信息的时刻指定区域的内容与在当前时刻指定区域的内容相同时，第一模块获取指定区域的页面信息。
88.示例性的，第一指示信息包括指定区域的类名。在第一指示信息生成后，指定区域的内容未发生变化，第一指示信息中的指定区域的类名与当前时刻指定区域的类名相同，
则第一模块可以获取指定区域的页面信息。
89.另一种可能的实现方式中，若第一指示信息中的指定区域为第一页面中的部分区域，且在第二模块获取输入信息的时刻指定区域的内容与在当前时刻指定区域的内容不同时，第一模块获取第一页面的全部区域的页面信息。
90.示例性的，第一指示信息包括指定区域的类名。在第一指示信息生成后，指定区域的内容发生变化，进而导致当前时刻指定区域的类名与第一指示信息中的指定区域的类名不同，则第一模块不能获取指定区域的页面信息，此时第一模块获取第一页面的全部区域的页面信息。
91.通过本方式，若当前指定区域的内容为用户需要的内容时，第一模块获取指定区域的页面信息，否则，第一模块获取第一页面的全部区域的页面信息，为用户提供更大区域的截图，尽可能的满足用户的需求，进而提高用户体验。
92.s304：第一模块基于跨文档通信api向第二模块发送页面信息；相应的，第二模块基于跨文档通信api接收来自第一模块的页面信息。
93.一种可能的实现方式中，第一模块在获取到页面信息之后，去除页面信息中的空格和注释，基于跨文档通信api向第二模块发送去除了空格和注释后的页面信息。
94.示例性的，第一模块基于无损数据压缩算法(deflate)去除页面信息中的空格和注释。
95.通过本方式，第一模块去除页面信息中的空格和注释，减少了需要传输的数据，提高了数据的传输效率和安全性，进而提高了截图效率。
96.s305：第二模块基于页面信息在第二页面中渲染出截图。
97.一种可能的实现方式中，若第二模块收到的页面信息是指定区域的页面信息，则在第二页面中渲染出第一页面中的指定区域的截图。
98.另一种可能的实现方式中，若第二模块收到的页面信息是第一页面的全部区域的页面信息，则在第二页面中渲染出第一页面中的全部区域的截图。
99.具体的，第二模块创建画布(canvas)，将页面信息传入画布进行渲染得到截图，在第二页面中显示截图。
100.在上述方法s301～s305中，第一模块与第二模块可以基于跨文档通信api通信，第一模块位于第一页面，第二模块位于第二页面，第一模块获取第一页面的页面信息后，将页面信息发给第二模块，由第二模块根据页面信息渲染出截图。由于第二模块是根据html和css渲染出截图，因此截图的内容总是与第一页面的内容相同，保证了截图的实时性与高精度，并且第一模块与第二模块均位于前端，在前端可以获取截图，减少截图耗时，提高截图效率。
101.为了更加清楚地理解本技术实施例技术方案，下面举一个较完整的示例。
102.参见图4，当浏览器加载插件后，第二模块读取第二页面的基本信息(例如第二页面的html和css)；第二模块生成识别对象。第一模块向第二模块发送第二指示信息，若第二模块接收到了第二指示信息，则第二模块确定第一模块具有获取第一页面的页面信息的能力，否则，第一模块不具有获取第一页面的页面信息的能力。
103.当第二模块接收到输入指令后，若第二模块确定第一模块不具有获取第一页面的页面信息的能力，则在第二页面中显示截图失败的信息。若第二模块确定第一模块具有获
取第一页面的页面信息的能力，则向第一模块发送第一指示信息，第一模块判断第一指示信息中的指定区域的内容与当前时刻指定区域的内容是否相同，若相同，则获取指定区域的页面信息，若不同，则获取第一页面的全部区域的页面信息。第一模块将去除了空格和注释后的页面信息发送给第二模块。
104.第二模块创建canvas，将页面信息传入canvas，将canvas渲染成的图像转换成图片，在第二页面中显示图片(即截图)。
105.基于相同的技术构思，本技术实施例提供一种数据处理装置500，该装置包括用于执行上述方法实施例中客户端或服务端所执行的方法的模块/单元/手段。该模块/单元/手段可以通过软件实现，或者通过硬件实现，也可以通过硬件执行相应的软件实现。
106.参见图5，本技术实施例提供一种截图装置400，该装置包括用于执行上述方法实施例中由浏览器执行的方法的模块/单元/技术手段。
107.示例性的，该装置500可以包括：
108.运行模块501，用于运行浏览器，显示第一页面和第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；
109.加载模块502，用于在所述浏览器中加载截图工具，所述截图工具包括第一模块和第二模块；将所述第一模块注入到第一页面，将所述第二模块注入到第二页面；所述第一模块与第二模块能够基于跨文档通信api通信；
110.所述运行模块501，还用于运行所述第一模块，以实现如上述第一模块所执行方法，以及运行所述第二模块，以实现如上述第二模块所述执行的方法。
111.应理解，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。
112.作为上述装置一种可能的产品形态，参见图6，本技术实施例还提供一种电子设备600，包括：
113.至少一个处理器601；以及与所述至少一个处理器601通信连接的通信接口603；所述至少一个处理器601通过执行存储器602存储的指令，使得所述电子设备600通过所述通信接口603执行上述方法实施例中任一设备所执行的方法步骤。
114.可选的，所述存储器602位于所述电子设备600之外。
115.可选的，所述电子设备600包括所述存储器602，所述存储器602与所述至少一个处理器601相连，所述存储器602存储有可被所述至少一个处理器601执行的指令。附图6用虚线表示存储器602对于电子设备600是可选的。
116.其中，所述处理器601和所述存储器602可以通过接口电路耦合，也可以集成在一起，这里不做限制。
117.本技术实施例中不限定上述处理器601、存储器602以及通信接口603之间的具体连接介质。本技术实施例在图6中以处理器601、存储器602以及通信接口603之间通过总线604连接，总线在图6中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
118.应理解，本技术实施例中提及的处理器可以通过硬件实现也可以通过软件实现。当通过硬件实现时，该处理器可以是逻辑电路、集成电路等。当通过软件实现时，该处理器
可以是一个通用处理器，通过读取存储器中存储的软件代码来实现。
119.示例性的，处理器可以是中央处理单元(central processing unit，cpu)，还可以是其他通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
120.应理解，本技术实施例中提及的存储器可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(read-only memory，rom)、可编程只读存储器(programmable rom，prom)、可擦除可编程只读存储器(erasable prom，eprom)、电可擦除可编程只读存储器(electrically eprom，eeprom)或闪存。易失性存储器可以是随机存取存储器(random access memory，ram)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的ram可用，例如静态随机存取存储器(static ram，sram)、动态随机存取存储器(dynamic ram，dram)、同步动态随机存取存储器(synchronous dram，sdram)、双倍数据速率同步动态随机存取存储器(double data eate sdram，ddr sdram)、增强型同步动态随机存取存储器(enhanced sdram，esdram)、同步连接动态随机存取存储器(synchlink dram，sldram)和直接内存总线随机存取存储器(direct rambus ram，dr ram)。
121.需要说明的是，当处理器为通用处理器、dsp、asic、fpga或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件时，存储器(存储模块)可以集成在处理器中。
122.应注意，本文描述的存储器旨在包括但不限于这些和任意其它适合类型的存储器。
123.作为另一种可能的产品形态，本技术实施例还提供一种计算机可读存储介质，该计算机可读存储介质用于存储指令，当所述指令被执行时，使得计算机执行上述方法实例中客户端或服务端所执行的方法步骤。
124.作为另一种可能的产品形态，本技术实施例还提供一种包含指令的计算机程序产品，所述计算机程序产品中存储有指令，当其在计算机上运行时，使得计算机执行上述方法实施例中由客户端或服务端所执行的方法步骤。
125.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
126.本技术是参照根据本技术的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流
程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
127.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
128.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。

技术特征：
1.一种截图系统，其特征在于，所述系统包括第一模块与第二模块，所述第一模块位于第一页面，所述第二模块位于第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；所述第二模块用于：接收输入信息，所述输入信息用于指示对所述第一页面中的指定区域进行截图；基于跨文档通信应用程序编程接口api向所述第一模块发送第一指示信息，所述第一指示信息用于指示所述指定区域；所述第一模块用于：基于所述跨文档通信api接收所述第一指示信息；根据所述第一指示信息获取所述第一页面的页面信息，所述页面信息包括超文本标记语言html和层叠样式表css；基于所述跨文档通信api向所述第二模块发送所述页面信息；所述第二模块用于：基于所述跨文档通信api接收所述页面信息；基于所述页面信息在所述第二页面中渲染出截图。2.如权利要求1所述的系统，其特征在于，所述第二模块在基于跨文档通信应用程序编程接口api向所述第一模块发送第一指示信息时，具体用于：在确定所述第一模块具有获取页面信息的能力后，基于跨文档通信api向所述第一模块发送第一指示信息。3.如权利要求2所述的系统，其特征在于，所述第一模块还用于：基于所述跨文档通信api向所述第二模块发送第二指示信息，所述第二指示信息用于指示所述第一模块具有获取页面信息的能力；所述第二模块还用于：基于所述跨文档通信api接收所述第二指示信息；根据所述第二指示信息确定所述第一模块具有获取页面信息的能力。4.如权利要求1所述的系统，其特征在于，所述第二模块还用于：在接收所述输入信息之后，若所述第一模块不具有获取页面信息的能力，在所述第二页面中显示截图失败的信息。5.如权利要求1-4任一项所述的系统，其特征在于，所述第一模块还用于：在获取到所述页面信息之后，去除所述页面信息中的空格和注释；所述第一模块在基于所述跨文档通信api向所述第二模块发送所述页面信息时，具体用于：基于所述跨文档通信api向所述第二模块发送去除了空格和注释后的页面信息。6.如权利要求1-4任一项所述的系统，其特征在于，所述第一模块在根据所述第一指示信息获取页面信息时，具体用于：若在所述第二模块获取所述输入信息的时刻所述指定区域的内容与在当前时刻所述指定区域的内容相同，获取所述指定区域的页面信息；或者，若在所述第二模块获取所述输入信息的时刻所述指定区域的内容与在当前时刻所述指定区域的内容不同，获取所述第一页面的全部区域的页面信息。7.如权利要求1-4任一项所述的系统，其特征在于，所述第二模块在基于所述页面信息在所述第二页面中渲染出截图时，具体用于：若收到的页面信息是所述指定区域的页面信息，则在所述第二页面中渲染出所述第一页面中的指定区域的截图；或者，若页面信息是所述第一页面的全部区域的页面信息，则在所述第二页面中渲染出所述第一页面的全部区域的截图。
8.一种截图方法，其特征在于，所述方法应用于截图系统中的第一模块，所述第一模块位于第一页面，所述第一页面内嵌于第二页面，所述第一页面与所述第二页面不同源，所述方法包括：基于跨文档通信api接收来自位于所述第二页面的第二模块的第一指示信息，所述第一指示信息用于指示所述第一页面中的指定区域；根据所述第一指示信息获取所述第一页面的页面信息，所述页面信息包括html和css；基于所述跨文档通信api向所述第二模块发送所述页面信息。9.一种截图方法，其特征在于，所述方法应用于截图系统中的第二模块，所述第二模块位于第二页面，所述第二页面中内嵌有第一页面，所述第一页面与所述第二页面不同源，所述方法包括：接收输入信息，所述输入信息用于指示对所述第一页面中的指定区域进行截图；基于跨文档通信api向位于所述第一页面的第一模块发送第一指示信息，所述第一指示信息用于指示所述指定区域；基于所述跨文档通信api接收来自所述第一模块的所述第一页面的页面信息；基于所述页面信息在所述第二页面中渲染出截图；所述页面信息包括html和css。10.一种截图方法，其特征在于，包括：运行浏览器，在所述浏览器中显示第一页面和第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；在所述浏览器中加载截图工具，所述截图工具包括第一模块和第二模块；将所述第一模块注入到所述第一页面，将所述第二模块注入到所述第二页面；所述第一模块与所述第二模块能够基于跨文档通信api通信；运行所述第一模块，以实现如权利要求8所述的方法，以及运行所述第二模块，以实现如权利要求9所述的方法。11.一种截图装置，其特征在于，包括：运行模块，用于运行浏览器，显示第一页面和第二页面，所述第一页面内嵌于所述第二页面，所述第一页面与所述第二页面不同源；加载模块，用于在所述浏览器中加载截图工具，所述截图工具包括第一模块和第二模块；将所述第一模块注入到第一页面，将所述第二模块注入到第二页面；所述第一模块与第二模块能够基于跨文档通信api通信；所述运行模块，还用于运行所述第一模块，以实现如权利要求8所述的方法，以及运行所述第二模块，以实现如权利要求9所述的方法。12.一种电子设备，其特征在于，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器、通信接口；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述至少一个处理器通过执行所述存储器存储的指令，使得所述电子设备通过所述通信接口执行如权利要求8或9所述的方法。13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，当所述计算机指令在计算机上运行时，使得计算机执行权利要求8或9所述的方法。14.一种计算机程序产品，其特征在于，所述计算机程序产品包括：计算机程序代码，当
所述计算机程序代码在计算机上运行时，使得计算机执行上述如权利要求8或9所述的方法。

技术总结
本申请涉及数据处理领域，具体涉及到一种截图系统、方法、装置、设备及介质。所述系统包括第一模块与第二模块，第一模块位于第一页面，第二模块位于第二页面，第一页面内嵌于第二页面，第一页面与第二页面不同源；第二模块用于：接收输入信息，输入信息用于指示对第一页面中的指定区域进行截图；基于跨文档通信API向第一模块发送第一指示信息，第一指示信息用于指示所述指定区域；第一模块用于：基于跨文档通信API接收第一指示信息；根据第一指示信息获取所述第一页面的页面信息；基于跨文档通信API向第二模块发送页面信息；第二模块用于：基于跨文档通信API接收页面信息；基于页面信息在第二页面中渲染出截图。面信息在第二页面中渲染出截图。面信息在第二页面中渲染出截图。


技术研发人员：吴曦 唐攀 李聪 刘祎莹 杨羽琛 周骥
受保护的技术使用者：建信金融科技有限责任公司
技术研发日：2023.05.25
技术公布日：2023/8/24