CN109670132A - 一种页面绘制方法、装置、终端设备及存储介质 - Google Patents

Abstract

本发明公开了一种页面绘制方法、装置、终端设备及存储介质。所述方法包括：获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。利用该方法能够在将页面绘制为图片时，显示跨域图片。

Description

一种页面绘制方法、装置、终端设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种页面绘制方法、装置、终端设备及存储介质。

背景技术

html2canvas是一个可以用JavaScript对html页面进行截屏的第三方库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成画布(canvas)图片，从而实现给页面截图的功能。

画布技术是网页标准通用标记语言html5标准中的元素之一，其提供了在客户端主要是网页端进行矢量图形绘制的能力。它可以加载多张位图并绘制到画布本身的屏幕区域，还提供了toDataURL的应用程序接口(Application Programming Interface，API)以供调用，用于将当前画布屏幕区域的绘制内容保存为位图格式文件。

然而，由于canvas的toDataURL API不能解析跨域图片，所以html2canvas不能画出跨域的图片。

发明内容

本发明实施例提供了一种页面绘制方法、装置、终端设备及存储介质，从而显示跨域图片。

第一方面，本发明实施例提供了一种页面绘制方法，包括：

获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；

根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；

根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

可选的，所述获取页面中未显示图片的网络地址信息，包括：

向服务器发送地址请求，所述地址请求包括所述未显示图片的标识；

获取来自服务器的未显示图片的网络地址信息，并将所述网络地址信息写入接口传输函数；

所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息。

可选的，所述将所述网络地址信息写入接口传输函数，包括：

将所述网络地址信息写入postMessage函数；相应的，所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息，包括：

所述页面中的对象监听onmessage函数，并获取所述网络地址信息。

可选的，页面绘制方法，还包括：

在页面中添加iframe对象；

根据所述网络地址信息确定所述未显示图片所在的内容分发网络；

将内容分发网络地址上的页面赋值给所述iframe对象的src属性；

相应的，所述页面中的对象监听onmessage函数，并获取所述网络地址信息，包括：

所述页面中iframe对象监听onmessage函数，并获取所述网络地址信息。

可选的，所述将所述未显示图片转换为字符串，包括：

所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

可选的，所述根据所述字符串将所述页面绘制为图片，包括：

通过所述onmessage函数获取所述base64格式的字符串；

将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。

第二方面，本发明实施例还提供了一种页面绘制装置，包括：

地址信息获取模块，用于获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；

转换模块，用于根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；

绘制模块，用于根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

可选的，所述地址信息获取模块，包括：

请求单元，用于向服务器发送地址请求，所述地址请求包括所述未显示图片的标识；

获取单元，用于获取来自服务器的未显示图片的网络地址信息，并将所述网络地址信息写入接口传输函数；

监听单元，用于所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息。

可选的，所述获取单元，具体用于：

将所述网络写入postMessage函数；相应的，

所述监听单元，具体用于：所述页面中的对象监听onmessage函数，并获取所述网络。

可选的，页面绘制装置，还包括：

添加模块，用于在页面中添加iframe对象；

确定模块，用于根据所述网络确定所述未显示图片所在的内容分发网络；

赋值模块，用于将内容分发网络地址上的页面赋值给所述iframe对象的src属性；相应的，

所述监听单元，具体用于：所述页面中iframe对象监听onmessage函数，并获取所述网络。

可选的，所述转换模块，具体用于：所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

可选的，所述绘制模块，具体用于：

通过所述onmessage函数获取所述base64格式的字符串；

将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。

第三方面，本发明实施例还提供了一种终端设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例提供的页面绘制方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明实施例提供的页面绘制方法。

本发明实施例提供了一种页面绘制方法、装置、终端设备及存储介质，首先获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；然后根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；最后根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。利用上述技术方案，能够将页面中处于与页面网络域名不同网络域名的未显示图片进行处理，从而在最终绘制的图片中显示跨域图片，即页面中不同网络域名的未显示图片。

附图说明

图1为本发明实施例一提供的一种页面绘制方法的流程示意图；

图2a为本发明实施例二提供的一种页面绘制方法的流程示意图；

图2b示出了本发明实施例二提供的另一种页面绘制方法的流程示意图；

图2c示出了本发明实施例二提供的页面绘制方法的效果示意图；

图3为本发明实施例三提供的一种页面绘制装置的结构示意图；

图4为本发明实施例四提供的一种终端设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一

图1为本发明实施例一提供的一种页面绘制方法的流程示意图，该方法可适用于对包含跨域图片的页面进行绘制的情况，其中，跨域图片可以理解为与当前页面处于不同网络域名下的未显示图片。该方法可以由页面绘制装置来执行，其中，该装置可由软件和/或硬件实现，并一般集成在终端设备上，在本实施例中终端设备包括但不限于：手机、个人数字助理或电脑等设备。

本实施例可以应用于绘制包含跨域图片的页面的情况下。如，需要将该页面以图片的形式分享时，若页面中有分享人的用户头像，该用户头像为跨域图片的情况。

如图1所示，本发明实施例一提供的一种页面绘制方法，包括如下步骤：

S101、获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同。

在本实施例中，页面可以理解为待绘制的页面，该页面中含有未显示图片。未显示图片可以为页面中所包括的跨域图片，其网络域名与页面的网络域名不同。网络地址信息可以理解为未显示图片的统一资源定位符(Uniform Resource Locator，URL)。

为了将页面中未显示图片绘制出来，本步骤可以首先获取该未显示图片的网络地址信息，以对该未显示图片进行处理。

具体地，本步骤可以向服务器请求该未显示图片的网络地址信息，然后通过跨域通信手段获取未显示图片的网络地址信息，以进行处理。此处不对向服务器请求未显示图片的网络地址信息的具体手段进行限定，也不对跨域通信手段进行限定。

示例性的，本实施例可以在页面中添加iframe，用于处理未显示图片，该未显示图片可以为用户头像。添加的iframe的src可以设置为与未显示图片的网络地址信息处于相同网络域名下。页面可以获取服务器发送的未显示图片的网络地址信息，然后通过跨域通信手段发送至iframe。其中，iframe是html标签，作用是文档中的文档，或者浮动的框架。iframe元素会创建包含另外一个文档的内联框架(即行内框架)，在创建的内联框架中可以对未显示图片进行处理。

S102、根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串。

在获取网络地址信息后，本步骤可以基于该网络地址信息加载对应的未显示图片，以可以基于加载出的未显示图片进行格式的转换，使其存储在本地，从而解决跨域的问题。

示例性地，本步骤可以通过页面中添加的iframe根据网络地址信息加载该未显示图片，然后对未显示图片进行格式转换。其中，iframe的src属性可以规定iframe中显示的文档的URL，本实施例中可以将iframe的src赋值为未显示图片，如用户头像，所在内容分发网络(Content Delivery Network，cdn)地址上的一个html页面，以保证iframe的src与未显示图片在同一个网络域名下。

本步骤为了能够将未显示图片绘制出来，可以将其转换为字符串。此处不对转换的手段进行限定，本领域技术人员可以根据实际需求选取对应的手段进行转换。如，将其转换为base64编码格式的字符串。转换后的base64格式的字符串相当于将该未显示图片存在了本地，故，不再存在跨域的问题。

S103、根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

获得未显示图片对应的字符串后，本步骤可以根据获取的字符串完成页面的绘制。如将页面中未显示图片的img标签的src设置为该字符串，然后通过html2canvas将html页面绘制为图片。

其中，html2canvas是一个可以用JavaScript对html页面进行截屏的第三方库。html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。html2canvas脚本将页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。其内部使用canvas，因为canvas的toDataURL API不能解析跨域图片，所以html2canvas不能画出跨域的图片。

本步骤在将页面绘制为图片时，未显示图片是以字符串的形式存储在本地的，故本步骤中可以采用html2canvas将页面绘制为图片，绘制得到的图片中能够包括未显示图片对应的内容，从而实现了对该未显示图片的绘制。其中，未显示图片对应的内容能够实现对未显示图片的展示。

示例性地，在将未显示图片转换为字符串后，页面中的iframe可以通过跨域通信手段将转换后的字符串传回页面中，以供页面进行绘图使用。在页面接收到字符串后，本实施例中可以将页面中未显示图片的img标签的src设置为该字符串。

本发明实施例一提供的一种页面绘制方法，首先获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；然后根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；最终根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。利用上述方法能够将页面中处于与页面网络域名不同网络域名的未显示图片进行处理，从而在最终绘制的图片中显示跨域图片，即页面中不同网络域名的未显示图片。

进一步地，获取页面中未显示图片的网络地址信息，包括：

向服务器发送地址请求，所述地址请求包括所述未显示图片的标识；

获取来自服务器的未显示图片的网络地址信息，并将所述网络地址信息写入接口传输函数；

所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息。

其中，标识可以理解为用于表示未显示图片的信息，不同的未显示图片具有不同的标识。此处不对未显示图片的标识进行限定，只要能够用于唯一标识未显示图片即可。地址请求可以理解为获取网络地址信息的请求信息。地址请求中包括未显示图片的标识，以可以基于该标识获取到该未显示图片的网络地址信息。接口传输函数可以理解为页面内部进行跨域通信的传输函数。页面中的对象可以理解为页面中处理该未显示图片的框架标签。

当页面中包含与页面的网络域名处于不同网络域名的未显示图片时，本实施例可以首先获取该未显示图片的网络地址信息。具体地，终端设备可以首先向服务器发送地址请求，从而可以接收服务器返回的该未显示图片的网络地址信息。

获取到该网络地址信息后，为了对该网络地址信息中相应内容进行处理，本步骤可以将该网络地址信息写入接口传输函数，以传入页面内部进行处理。如，写入postMessage函数。postMessage是用来解决跨域页面间通信的一个html5的应用程序编程接口(Application Programming Interface，API)。

示例性地，页面接收到未显示图片的网络地址信息后，可以将网络地址信息写入postMessage函数，从而传入页面中添加的iframe进行处理。

将网络地址信息写入接口传输函数后，页面中的对象，如iframe，可以监听该接口传输函数，以获取网络地址信息。页面中对象的网络域名与未显示图片的网络域名相同，从而可以对该未显示图片进行处理。

其中，页面中的对象的src属性可以基于未显示图片的网络地址信息进行设置，以保证页面中对象的网络域名与未显示图片的网络域名相同。

实施例二

图2a为本发明实施例二提供的一种页面绘制方法的流程示意图，本实施例二在上述各实施例的基础上进行优化。在本实施例中，将所述网络地址信息写入接口传输函数，进一步具体化为：将所述网络地址信息写入postMessage函数；相应的，所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息，包括：所述页面中的对象监听onmessage函数，并获取所述网络地址信息。

进一步地，本实施例还优化包括了：在页面中添加iframe对象；根据所述网络地址信息确定所述未显示图片所在的内容分发网络；将内容分发网络地址上的页面赋值给所述iframe对象的src属性；相应的，所述页面中的对象监听onmessage函数，并获取所述网络地址信息，包括：所述页面中iframe对象监听onmessage函数，并获取所述网络地址信息。

进一步地，本实施例还将所述未显示图片转换为字符串，优化包括：

所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

进一步地，本实施例还将所述根据所述字符串将所述页面绘制为图片，优化包括：

通过所述onmessage函数获取所述base64格式的字符串；

将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。本实施例尚未详尽的内容请参考实施例一。

随着H5的逐渐普及，浏览器本身就可以截图。html2canvas是一款前端插件，它的原理是将Dom节点在Canvas里边画出来。但html2canvas有以下限制：不支持跨域图片，即html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。这就会导致html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

本实施例中通过在页面中添加iframe，并采用跨域页面间通信的手段，将跨域图片进行处理转换为本地存储的内容，然后再使用html2canvas对页面进行截屏绘制。具体地，如图2a所示，本发明实施例二提供的一种页面绘制方法，包括如下步骤：

S201、向服务器发送地址请求，所述地址请求包括所述未显示图片的标识。

本实施例在绘制包括跨域图片的页面时，首先通过本步骤向服务器发送地址请求，以得到该跨域图片的网络地址信息。此外，地址请求中也可以包括终端设备的设备标识，以便于服务器确定网络地址信息发送的对象。

S202、获取来自服务器的未显示图片的网络地址信息。

发送地址请求后，本步骤可以接收服务器反馈的网络地址信息，以基于该网络地址信息对未显示图片进行处理。

本实施例中不限定终端设备与服务器的通信手段，可以采用无线通信方式，也可以采用有线通信方式。

S203、在页面中添加iframe对象。

获取到未显示图片的网络地址信息后，为了便于对该跨域图片进行处理，本步骤可以在页面中添加iframe对象，以在iframe对象内部对未显示图片进行处理。创建的iframe对象可以认为是在页面中添加了一个iframe子页面，通过对iframe的src属性进行设定，能够保证iframe的src属性和未显示图片的网络地址信息处于同一网络域名下，从而能够在iframe对象内部对未显示图片进行处理。

S204、根据所述网络地址信息确定所述未显示图片所在的内容分发网络。

内容分发网络(Content Delivery Network，CDN)是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

在构建iframe对象后，为了保证iframe对象的src属性和未显示图片的网络地址处于同一网络域名下，本步骤可以解析未显示图片的网络地址信息，以确定未显示图片所在的内容分发网络。此处不对确定内容分发网络的具体手段进行限定，只要能够提取出该网络地址信息的内容分发网络即可。

S205、将内容分发网络地址上的页面赋值给所述iframe对象的src属性。

确定出未显示图片的内容分发网络后，本步骤可以将内容分发网络上的页面赋值给对象的src属性，从而保证了iframe对象的src属性与未显示图片的网络地址信息处于同一域名下。

在将内容分发网络上的页面赋值给iframe对象的src属性时，不对页面进行限定，只要是内容分发网络下的html页面即可。

S206、将所述网络地址信息写入postMessage函数。

构建完iframe对象后，本步骤可以通过postMessage函数将网络地址信息从页面中传入iframe对象内。其中，postMessage函数可以理解为用于解决跨域页面间通信的一个html5的API。

相应的，所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息，可以优化包括：

所述页面中的对象监听onmessage函数，并获取所述网络地址信息。

示例性地，本步骤可以监听onmessage事件以获取postMessage函数传输的网络地址信息。

S207、所述页面中iframe对象监听onmessage函数，并获取所述网络地址信息。

将网络地址信息写入postMessage函数后，页面中iframe对象可以通过监听onmessage函数，以得到页面传输的网络地址信息。本实施例中通过postMessage函数和onmessage函数能够实现页面与iframe对象间网络地址信息的传输。postMessage函数中可以携带网络地址信息，iframe对象通过onmessage函数读取postmessage函数中的网络地址信息。通过iframe嵌套的不同页面的通信中，postMessage为发送方，onmessage为接收方。

S208、根据所述网络地址信息加载所述未显示图片。

由于页面中iframe对象的src属性和未显示图片的网络地址信息在同一网络域名下，故，页面中iframe对象获取到网络地址信息后，可以直接根据该网络地址信息加载未显示图片。得到未显示图片后，可以对该未显示图片进行格式转换以存储在终端设备中。

S209、所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

在获取到未显示图片后，页面中iframe对象可以通过canvas的toDataURL API将未显示图片转换为base64格式的字符串。该base64格式的字符串能够代表未显示图片。

S210、通过所述onmessage函数获取所述base64格式的字符串。

页面中iframe对象得到base64格式的字符串后，可以通过postmessage函数将该字符串传出至页面，以供页面进行绘图使用。

相应地，页面可以通过onmessage函数获取页面中iframe对象通过postmessage函数传出的base64格式的字符串，以基于该base64格式的字符串完成页面的绘制。

S211、将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。

在得到base64格式的字符串后，本步骤可以将未显示图片的img标签的src属性设置为该base64格式的字符串，此时页面中未显示图片不存在跨域的问题，故本步骤可以使用html2canvas对页面进行绘制，以得到对应的图片，该图片中能够将未显示图片进行显示。

以下对本发明实施例进行示例性的描述：

本实施例提供的页面绘制方法可以为基于postMessage解决无法通过html2canvas绘制跨域图片的问题，即基于postMessage解决跨域iframe之间的通信。实现了将跨域的图片通过html2canvas绘制出来。为解决跨域图片的绘制的技术问题，可以在页面中添加一个iframe，将iframe的src设置为跨域图片所在cdn地址上的一个html页面。

主要流程可以分为：首先通过iframe将跨域头像转成的base64格式；其次再通过postMessage传递给页面；然后页面通过监听onmessage事件获取base64格式的图片；最后页面使用html2canvas绘制图片。

图2b示出了本发明实施例二提供的另一种页面绘制方法的流程示意图；如图2b所示，在进行页面绘制时，具体包括如下步骤：

1、请求数据，获取用户头像URL。

首先页面向服务器发起请求，获取跨域的用户头像的URL信息。

2、通过postMessage将头像URL传入iframe。

本步骤通过postMessage将URL信息传入iframe。

3、监听onmessage事件获取URL。

iframe监听onmessage事件获取URL信息。

4、加载图片并通过canvas的toDataURL API转化图片为base64格式。

iframe基于URL信息加载图片，并通过canvas的toDataURL API转化图片为base64格式。

5、用postMessage将base64格式图片传出。

Iframe格式转换后用postMessage将base64格式图片传回页面。

6、监听onmessage事件获取base64格式图片。

页面监听onmessage事件获取base64格式图片。

7、使用html2canvas将html绘制为图片。

页面使用html2canvas将html页面绘制为图片，从而可以将绘制完成的图片分享出去。页面获取base64格式图片后可以将页面中头像img标签的src设置为获取到的base64格式图片。

图2c示出了本发明实施例二提供的页面绘制方法的效果示意图。如图2c所示，第一终端设备21和第二终端设备22示出了同一终端设备处于不同阶段的显示情况。第一终端设备21的页面211中包括了跨域图片212，若通过html2canvas对页面211进行绘制，则跨域图片无法进行显示。本实施例中，第一终端设备21通过向服务器23发送地址请求，然后接收服务器23返回的未显示图片的网络地址信息，通过对网络地址信息进行处理，将跨域图片转换为本地存储。处理之后第二终端设备22可以通过html2canvas将页面221绘制为图片，绘制后的图片中包含了未显示图片对应的内容222。

本发明实施例二提供的一种页面绘制方法，具体化了获取页面未显示图片的网络地址信息的操作、写入网络地址信息的操作、监听接口传输函数的操作、格式转换操作和绘制图片操作，此外还优化包括了添加iframe对象的操作。利用该方法能够在接收到服务器的未显示图片的网络地址信息后，在页面中添加iframe对象，并基于网络地址信息完成iframe对象的src属性的设置。通过postMessage函数和onmessage函数完成网络地址信息从页面到iframe对象的传输，iframe对象将未显示图片进行格式转换后，通过postMessage函数将base64格式的字符串传出，页面通过onmessage函数监听到base64格式字符串后将其赋值给未显示图片的img标签，最后通过html2canvas完成页面的绘制，绘制后的图片中包括了跨域图片，即页面中不同网络域名的未显示图片。

实施例三

图3为本发明实施例三提供的一种页面绘制装置的结构示意图，该装置可适用于对包含跨域图片的页面进行绘制的情况，其中，跨域图片可以理解为与当前页面处于不同网络域名下的未显示图片。其中该装置可由软件和/或硬件实现，并一般集成在终端设备上。

如图3所示，该装置包括：地址信息获取模块31、转换模块32和绘制模块33；

其中，地址信息获取模块31，用于获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；

转换模块32，用于根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；

绘制模块33，用于根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

在本实施例中，该装置首先通过地址信息获取模块31获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；其次通过转换模块32根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；最后通过绘制模块33根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

本实施例提供了一种页面绘制装置，该装置能够将页面中处于与页面网络域名不同网络域名的未显示图片进行处理，从而在最终绘制的图片中显示跨域图片，即页面中不同网络域名的未显示图片。

进一步地，所述地址信息获取模块，包括：

请求单元，用于向服务器发送地址请求，所述地址请求包括所述未显示图片的标识；

获取单元，用于获取来自服务器的未显示图片的网络地址信息，并将所述网络地址信息写入接口传输函数；

监听单元，用于所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息。

在上述方案的基础上，所述获取单元，具体用于：

将所述网络写入postMessage函数；相应的，

所述监听单元，具体用于：所述页面中的对象监听onmessage函数，并获取所述网络。

进一步地，页面绘制装置还包括：

添加模块，用于在页面中添加iframe对象；

确定模块，用于根据所述网络确定所述未显示图片所在的内容分发网络；

赋值模块，用于将内容分发网络地址上的页面赋值给所述iframe对象的src属性；相应的，

所述监听单元，具体用于：所述页面中iframe对象监听onmessage函数，并获取所述网络。

进一步地，所述转换模块，具体用于：所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

在上述方案的基础上，所述绘制模块，具体用于：

通过所述onmessage函数获取所述base64格式的字符串；

将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。

上述页面绘制装置可执行本发明任意实施例所提供的页面绘制方法，具备执行方法相应的功能模块和有益效果。

实施例四

图4为本发明实施例四提供的一种终端设备的结构示意图。如图4所示，本发明实施例四提供的终端设备包括：一个或多个处理器41和存储装置42；该终端设备中的处理器41可以是一个或多个，图4中以一个处理器41为例；存储装置42用于存储一个或多个程序；所述一个或多个程序被所述一个或多个处理器41执行，使得所述一个或多个处理器41实现如本发明实施例中任一项所述的页面绘制方法。

所述终端设备还可以包括：输入装置43和输出装置44。

终端设备中的处理器41、存储装置42、输入装置43和输出装置44可以通过总线或其他方式连接，图4中以通过总线连接为例。

该终端设备中的存储装置42作为一种计算机可读存储介质，可用于存储一个或多个程序，所述程序可以是软件程序、计算机可执行程序以及模块，如本发明实施例一或二所提供页面绘制方法对应的程序指令/模块(例如，附图3所示的页面绘制装置中的模块，包括：地址信息获取模块31、转换模块32和绘制模块33)。处理器41通过运行存储在存储装置42中的软件程序、指令以及模块，从而执行终端设备的各种功能应用以及数据处理，即实现上述方法实施例中页面绘制方法。

存储装置42可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储装置42可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置42可进一步包括相对于处理器41远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置43可用于接收输入的数字或字符信息，以及产生与终端设备的用户设置以及功能控制有关的键信号输入。输出装置44可包括显示屏等显示设备。

并且，当上述终端设备所包括一个或者多个程序被所述一个或者多个处理器41执行时，程序进行如下操作：

获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

实施例五

本发明实施例五提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时用于执行页面绘制方法，该方法包括：

获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

可选的，该程序被处理器执行时还可以用于执行本发明任意实施例所提供的页面绘制方法。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(Random AccessMemory，RAM)、只读存储器(Read Only Memory，ROM)、可擦式可编程只读存储器(ErasableProgrammable Read Only Memory，EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于：电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、无线电频率(Radio Frequency，RF)等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (14)

1.一种页面绘制方法，其特征在于，包括：

获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；

根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；

根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

2.根据权利要求1所述的方法，其特征在于，所述获取页面中未显示图片的网络地址信息，包括：

向服务器发送地址请求，所述地址请求包括所述未显示图片的标识；

获取来自服务器的未显示图片的网络地址信息，并将所述网络地址信息写入接口传输函数；

所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息。

3.根据权利要求2所述的方法，其特征在于，所述将所述网络地址信息写入接口传输函数，包括：

将所述网络地址信息写入postMessage函数；相应的，所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息，包括：

所述页面中的对象监听onmessage函数，并获取所述网络地址信息。

4.根据权利要求3所述的方法，其特征在于，还包括：

在页面中添加iframe对象；

根据所述网络地址信息确定所述未显示图片所在的内容分发网络；

将内容分发网络地址上的页面赋值给所述iframe对象的src属性；

相应的，所述页面中的对象监听onmessage函数，并获取所述网络地址信息，包括：

所述页面中iframe对象监听onmessage函数，并获取所述网络地址信息。

5.根据权利要求4所述的方法，其特征在于，所述将所述未显示图片转换为字符串，包括：

所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

6.根据权利要求5所述的方法，其特征在于，所述根据所述字符串将所述页面绘制为图片，包括：

通过所述onmessage函数获取所述base64格式的字符串；

将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。

7.一种页面绘制装置，其特征在于，包括：

地址信息获取模块，用于获取页面中未显示图片的网络地址信息，所述未显示图片的网络域名与页面的网络域名不同；

转换模块，用于根据所述网络地址信息加载所述未显示图片，并将所述未显示图片转换为字符串；

绘制模块，用于根据所述字符串将所述页面绘制为图片，绘制得到的图片中包括所述未显示图片对应的内容。

8.根据权利要求7所述的装置，其特征在于，所述地址信息获取模块，包括：

请求单元，用于向服务器发送地址请求，所述地址请求包括所述未显示图片的标识；

获取单元，用于获取来自服务器的未显示图片的网络地址信息，并将所述网络地址信息写入接口传输函数；

监听单元，用于所述页面中的对象监听所述接口传输函数，并获取所述网络地址信息。

9.根据权利要求8所述的装置，其特征在于，所述获取单元，具体用于：

将所述网络写入postMessage函数；相应的，

所述监听单元，具体用于：所述页面中的对象监听onmessage函数，并获取所述网络。

10.根据权利要求9所述的装置，其特征在于，还包括：

添加模块，用于在页面中添加iframe对象；

确定模块，用于根据所述网络确定所述未显示图片所在的内容分发网络；

赋值模块，用于将内容分发网络地址上的页面赋值给所述iframe对象的src属性；相应的，

所述监听单元，具体用于：所述页面中iframe对象监听onmessage函数，并获取所述网络。

11.根据权利要求10所述的装置，其特征在于，所述转换模块，具体用于：所述页面中iframe对象通过canvas标签将所述未显示图片进行格式转换，得到base64格式的字符串。

12.根据权利要求11所述的装置，其特征在于，所述绘制模块，具体用于：

通过所述onmessage函数获取所述base64格式的字符串；

将所述未显示图片的img标签的src属性设置为所述base64格式的字符串并使用html2canvas将所述页面绘制为图片。

13.一种终端设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的页面绘制方法。

14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-6中任一所述的页面绘制方法。