CN103902294B - 一种浏览器图像显示方法及终端 - Google Patents

Abstract

本发明实施例公开了一种浏览器图像显示方法，以期减少终端中浏览器的页面与插件的数据交互次数，从而提高图像绘制的效率。本发明实施例方法包括：终端接收图像绘制指令，终端根据图像绘制指令在第一画布中绘制图像；终端将终端在第一画布中绘制的图像发送给第二画布，浏览器包括第一画布与第二画布；终端将图像存储在第二画布中，并记录第二画布中存储的图像的数据信息；当满足预置条件时，终端将第二画布存储的图像发送给浏览器中的插件，使得插件根据数据信息完成图像的显示。本发明实施例能够减少浏览器的页面与插件的数据交互次数，提高图像绘制的效率。

Description

一种浏览器图像显示方法及终端

技术领域

本发明涉及图像显示技术领域，尤其涉及种浏览器图像显示方法及终端。

背景技术

随着网络技术的不断发展，网络技术已逐渐应用于社会的各个领域，例如，用户需要了解城市时，可通过浏览器搜索该城市的地图图像，并可对该搜索到的地图图像进行放大或者缩小，从而使得用户即可了解该城市的整体布局，也可了解到具体的街道或建筑。用户在浏览器中输入需要搜索的城市后，浏览器通过搜索引擎获取到该城市的地图图像，并需要对该地图图像进行显示，使得用户可直观的观察该地图图像。

现有技术中，浏览器的程序开发一般包含页面脚本代码，以及页面组件，当有图像需要显示时，浏览器可通过页面脚本来调用组件提供的接口，从而将页面绘制的图像传递给组件，通过组件对该图像进行显示。

但在现有技术中，浏览器的页面每一次绘制都需要与插件进行一次数据交互，例如，每绘制一个点或者一条线就需要调用一次组件接口，将绘制的点或线传递插件，但浏览器中需要显示的图像往往比较复杂，需要页面进行多次绘制，这就使得浏览器页面需要频繁的与插件进行多次数据交互，从而导致图像绘制的效率较低。

发明内容

本发明实施例提供了一种浏览器图像显示方法及终端，以期减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

本发明实施例提供的浏览器图像显示方法可包括：

终端接收图像绘制指令，所述图像绘制指令用于指示所述终端在浏览器中绘制需要显示的图像；

所述终端根据所述图像绘制指令在第一画布中绘制所述图像；

所述终端将所述终端在第一画布中绘制的所述图像发送给第二画布，所述浏览器包括所述第一画布与所述第二画布；

所述终端将所述图像存储在第二画布中，并记录所述第二画布中存储的所述图像的数据信息；

当满足预置条件时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件，使得所述插件根据所述数据信息完成所述图像的显示。

可选地，所述终端接收图像绘制指令之前还包括：

所述终端接收用户发送的画布创建指令；

所述终端根据所述画布创建指令在所述浏览器中创建所述第一画布和所述第二画布，并使得所述第一画布的宽高的比值与所述插件的宽高的比值相同，且所述第二画布的宽高的比值与所述插件的宽高的比值相同，所述第一画布和第二画布的形状为矩形。

可选地，所述终端根据所述图像绘制指令在第一画布中绘制所述图像具体包括：

所述终端根据所述图像绘制指令设置所述图像的颜色和\或面积，并调用所述浏览器的脚本在第一画布中绘制所述图像。

可选地，所述终端将所述图像存储在第二画布中具体包括：

所述终端对发送给所述第二画布的所述图像进行组织，确定所述图像的最小外包矩形，并从所述第二画布中的初始存储区域开始，依次存储所述图像；

所述图像的数据信息具体包括：所述图像的面积大小、存储区域、和存储坐标。

可选地，所述当满足预置条件时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件具体包括：

当所述第二画布存储的图像的数据量超过预置数值时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件；

和\或，

当所述终端获取到来自用户的发送指令时，所述终端根据所述发送指令将所述第二画布存储的图像发送给所述浏览器中的插件。

本发明实施例提供的终端可包括：

第一接收单元，用于接收图像绘制指令，所述图像绘制指令用于指示终端在浏览器中绘制需要显示的图像；

绘制单元，用于根据所述图像绘制指令在第一画布中绘制所述图像；

第一发送单元，用于将所述终端在第一画布中绘制的所述图像发送给第二画布，所述浏览器包括所述第一画布与所述第二画布；

存储记录单元，用于将所述图像存储在第二画布中，并记录所述第二画布中存储的所述图像的数据信息；

第二发送单元，用于当满足预置条件时，将所述第二画布存储的图像发送给所述浏览器中的插件，使得所述插件根据所述数据信息完成所述图像的显示。

可选地，所述终端还包括：

第二接收单元，用于接收用户发送的画布创建指令；

创建单元，用于根据所述画布创建指令在所述浏览器中创建所述第一画布和所述第二画布，并使得所述第一画布的宽高的比值与所述插件的宽高的比值相同，且所述第二画布的宽高的比值与所述插件的宽高的比值相同，所述第一画布和第二画布的形状为矩形。

可选地，所述绘制单元具体包括：

设置单元，用于根据所述图像绘制指令设置所述图像的颜色和\或面积；

绘制子单元，用于调用所述浏览器的脚本在第一画布中绘制所述图像。

可选地，所述存储记录单元具体包括：

数据组织单元，用于对发送给所述第二画布的所述图像进行组织；

存储记录子单元，用于从所述第二画布中的初始存储区域开始，依次存储所述图像，并记录所述第二画布中存储的所述图像的数据信息；

所述图像的数据信息具体包括：所述图像的面积大小、存储区域、和存储坐标。

可选地，所述第二发送单元包括：

第一发送子单元，用于当所述第二画布存储的图像的数据量超过预置数值时，将所述第二画布存储的图像发送给所述浏览器中的插件；

和\或，

第二发送子单元，用于当所述终端获取到来自用户的发送指令时，根据所述发送指令将所述第二画布存储的图像发送给所述浏览器中的插件。

从以上技术方案可以看出，本发明实施例具有以下优点：终端接收图像绘制指令，所述图像绘制指令用于指示所述终端在浏览器中绘制需要显示的图像；所述终端根据所述图像绘制指令在第一画布中绘制所述图像；所述终端将所述终端在第一画布中绘制的所述图像发送给第二画布，所述浏览器包括所述第一画布与所述第二画布；所述终端将所述图像存储在第二画布中，并记录所述第二画布中存储的所述图像的数据信息；当满足预置条件时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件，使得所述插件根据所述数据信息完成所述图像的显示。这样，当需要在浏览器中进行图像显示时，终端可在浏览器中的第一画布中绘制该图像，并将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，该终端可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

附图说明

图1为本发明实施例提供的浏览器图像显示方法的一种流程示意图；

图2为本发明实施例提供的浏览器图像显示方法的另一种流程示意图；

图3为本发明实施例提供的浏览器图像显示方法的另一种流程示意图；

图4为本发明实施例提供的终端的一种结构意图；

图5为本发明实施例提供的终端的另一种结构意图；

图6为本发明实施例提供的终端的另一种结构意图。

具体实施方式

本发明实施例提供了一种浏览器图像显示方法及终端，以期减少终端中浏览器的页面与插件的数据交互次数，从而提高图像绘制的效率。

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

以下分别进行详细说明。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当的情况下可以互换，以便这里描述的本发明实施例例如能够以除了在这里图示或者描述的那些以外的顺序实施。

此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚的列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品、或设备固有的其他步骤或单元。

请参阅图1，图1为本发明实施例提供的浏览器图像显示方法的一种流程示意图，如图1所示，本发明实施例提供的浏览器图像显示方法的一个实施例可包括如下内容：

101、终端接收图像绘制指令；

当用户需要在终端中的浏览器中显示图像时，用户可向终端发送图像绘制指令，该终端可接收该图像绘制指令。

可以理解的是，当服务器需要在终端中的浏览器中显示图像时，该服务器也可向该终端发送图像绘制指令，上述终端还可接收来着服务器发送的图像绘制指令。

需要说明的是，上述图像绘制指令可用于指示终端在浏览器中绘制需要显示的图像。

102、终端根据图像绘制指令在第一画布中绘制图像；

上述终端接收到上述图像绘制指令后，可确定上述需要显示的图像，该终端调用浏览器页面的脚本，在上述第一画布中绘制该需要显示的图像。

103、终端将终端在第一画布中绘制的图像发送给第二画布；

上述终端在上述第一画布中绘制完成上述图像后，可将该绘制完成的图像发送给第二画布。

需要说明的是，上述浏览器中可包括上述第一画布和第二画布，上述第一画布可只包括一个画布，也可包括多个画布，上述第二画布可只包括一个画布，也可包括多个画布。

104、终端将图像存储在第二画布中，并记录第二画布中存储的图像的数据信息；

上述终端将上述第一画布中的图像发送给上述第二画布后，该终端可将该图像存储在第二画布中，该终端还可记录该第二画布存储的图像的数据信息。

可以理解的是，上述数据信息可用于浏览器中的插件解析该第二画布中存储的图像。

可以理解的是，上述第二画布中可存储多个图像。

105、当满足预置条件时，终端将第二画布存储的图像发送给浏览器中的插件，使得插件根据数据信息完成图像的显示。

当满足预置条件时，上述终端可通过浏览器中的接口，将上述第二画布中存储的图像发送给浏览器中的插件，该插件接收到该第二画布存储的图像后，可根据上述图像的数据信息完成上述需要显示的图像的显示。

本实施例中，终端接收图像绘制指令，该图像绘制指令用于指示该终端在浏览器中绘制需要显示的图像；该终端根据该图像绘制指令在第一画布中绘制该图像；该终端将该终端在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；该终端将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；当满足预置条件时，该终端将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。这样，当需要在浏览器中进行图像显示时，终端可在浏览器中的第一画布中绘制该图像，并将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，该终端可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

上述图1所示实施例中，终端接收到图像绘制指令后，可在第一画布中绘制该图像，将第一画布中绘制的图像发送给第二画布，终端将该图像存储在第二画布中，并在满足预置条件时，将第二画布存储的图像发送给浏览器中的插件，使得该插件完成上述图像的显示。在实际应用中，上述终端接收到图像绘制指令之前，还可先在浏览器的页面中创建上述第一画布和第二画布，下面以一个具体实施例进行详细描述。请参阅图2，图2为本发明实施例提供的浏览器图像显示方法的另一种流程示意图，如图2所示，本发明实施例提供的浏览器图像显示方法另一个实施例可包括如下内容：

201、终端接收用户发送的画布创建指令；

当用户需要在浏览器中的页面中创建画布时，用户可向终端发送画布创建指令，上述终端可接收用户发送的画布创建指令，该画布创建指令可指示该终端在浏览器页面中创建上述第一画布和第二画布。

202、终端根据画布创建指令在浏览器中创建第一画布和第二画布；

上述终端接收到上述画布创建指令后，可根据该画布创建指令在浏览器的页面中创建上述第一画布和第二画布，并使得该第二画布可通过接口与浏览器中的插件建立连接。

需要说明的是，上述第一画布和第二画布的形状为矩形，该第一画布的宽高的比值与上述插件的宽高的比值相同，该第二画布的宽高的比值与上述插件的宽高的比值相同。

203、终端接收图像绘制指令；

当用户需要在终端中的浏览器中显示图像时，用户可向终端发送图像绘制指令，该终端可接收该图像绘制指令。

可以理解的是，当服务器需要在终端中的浏览器中显示图像时，该服务器也可向该终端发送图像绘制指令，上述终端还可接收来着服务器发送的图像绘制指令。

需要说明的是，上述图像绘制指令可用于指示终端在浏览器中绘制需要显示的图像。

204、终端根据图像绘制指令设置图像的颜色和\或面积，并调用浏览器的脚本在第一画布中绘制图像；

上述终端接收到上述图像绘制指令后，可确定上述需要显示的图像，该终端调用浏览器页面的脚本，在上述第一画布中绘制该需要显示的图像。

可以理解的是，上述终端确定上述需要显示的图像后，可设置该图像的颜色和\或面积大小，并将设置后的该图像的颜色和\或面积大小进行记录。

205、终端将终端在第一画布中绘制的图像发送给第二画布；

上述终端在上述第一画布中绘制完成上述图像后，可将该绘制完成的图像发送给第二画布。

需要说明的是，上述浏览器中可包括上述第一画布和第二画布，上述第一画布可只包括一个画布，也可包括多个画布，上述第二画布可只包括一个画布，也可包括多个画布。

206、终端对发送给第二画布的图像进行组织，确定图像的最小外包矩形，并从第二画布中的初始存储区域开始，依次存储该图像，并记录第二画布中存储的图像的数据信息；

上述终端将上述第一画布中的图像发送给上述第二画布后，该终端可对根据上述第一画布发送的图像进行组织，确定该图像的最小外包矩形，当有多个图像时，该终端可从该第二画布中的初始存储区域开始，依次存储该图像，并将第二画布存储后的图像的数据信息进行记录。

需要说明的是，上述数据信息可包括：上述图像的面积大小、存储区域、和存储坐标。

可以理解的是，上述终端从上述第二画布中的初始存储区域开始，依次存储该图像的存储方式意在使得上述第二画布尽可能多的存储上述图像，充分利用上述第二画布的存储面积，在实际应用中，以充分利用上述第二画布的存储面积为准则，该终端还可通过多种方式将上述图像存储在第二画布中，具体此处不作限定。

可以理解的是，上述数据信息可用于浏览器中的插件解析该第二画布中存储的图像。

207、当满足预置条件时，终端将第二画布存储的图像发送给浏览器中的插件，使得插件根据数据信息完成图像的显示。

当满足预置条件时，上述终端可通过浏览器中的接口，将上述第二画布中存储的图像发送给浏览器中的插件，该插件接收到该第二画布存储的图像后，可根据上述图像的数据信息确定上述第二画布存储的图像的面积大小、在第二画布中的存储区域、以及存储坐标，上述插件可根据上述图像的数据信息对该第二画布存储的图像进行解析，并将该第二画布存储的图像转化为纹理，该插件将转化后的该图像的纹理显示在插件中对应的位置，完成上述需要显示的图像的显示。

本实施例中，终端接收到用户的画布创建指令后，在浏览器的页面中创建上述第一画布和第二画布，当终端接收图像绘制指令后，该图像绘制指令用于指示该终端在浏览器中绘制需要显示的图像；该终端根据该图像绘制指令在第一画布中绘制该图像；该终端将该终端在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；该终端将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；当满足预置条件时，该终端将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。这样，当需要在浏览器中进行图像显示时，终端可在浏览器中的第一画布中绘制该图像，并将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，该终端可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

上述图2所示实施例描述了终端接收到画布创建指令后，在上述浏览器的页面中创建第一画布和第二画布，终端接收到图像绘制指令后，可在第一画布中绘制该图像，将第一画布中绘制的图像发送给第二画布，终端将该图像存储在第二画布中，并在满足预置条件时，将第二画布存储的图像发送给浏览器中的插件，使得该插件完成上述图像的显示。在实际应用中，上述预置条件可根据用户的需要而设定，下面以一具体实施例进行详细描述。请参阅图3，图3为本发明实施例提供的浏览器图像显示方法的另一种流程示意图，如图3所示，本发明实施例提供的浏览器图像显示方法另一个实施例可包括如下内容：

301、终端接收用户发送的画布创建指令；

当用户需要在浏览器中的页面中创建画布时，用户可向终端发送画布创建指令，上述终端可接收用户发送的画布创建指令，该画布创建指令可指示该终端在浏览器页面中创建上述第一画布和第二画布。

302、终端根据画布创建指令在浏览器中创建第一画布和第二画布；

上述终端接收到上述画布创建指令后，可根据该画布创建指令在浏览器的页面中创建上述第一画布和第二画布，并使得该第二画布可通过接口与浏览器中的插件建立连接。

需要说明的是，上述第一画布和第二画布的形状为矩形，该第一画布的宽高的比值与上述插件的宽高的比值相同，该第二画布的宽高的比值与上述插件的宽高的比值相同。

303、终端接收图像绘制指令；

当用户需要在终端中的浏览器中显示图像时，用户可向终端发送图像绘制指令，该终端可接收该图像绘制指令。

可以理解的是，当服务器需要在终端中的浏览器中显示图像时，该服务器也可向该终端发送图像绘制指令，上述终端还可接收来着服务器发送的图像绘制指令。

需要说明的是，上述图像绘制指令可用于指示终端在浏览器中绘制需要显示的图像。

304、终端根据图像绘制指令设置图像的颜色和\或面积，并调用浏览器的脚本在第一画布中绘制图像；

上述终端接收到上述图像绘制指令后，可确定上述需要显示的图像，该终端调用浏览器页面的脚本，在上述第一画布中绘制该需要显示的图像。

可以理解的是，上述终端确定上述需要显示的图像后，可设置该图像的颜色和\或面积大小，并将设置后的该图像的颜色和\或面积大小进行记录。

305、终端将终端在第一画布中绘制的图像发送给第二画布；

上述终端在上述第一画布中绘制完成上述图像后，可将该绘制完成的图像发送给第二画布。

需要说明的是，上述浏览器中可包括上述第一画布和第二画布，上述第一画布可只包括一个画布，也可包括多个画布，上述第二画布可只包括一个画布，也可包括多个画布。

306、终端对发送给第二画布的图像进行组织，确定图像的最小外包矩形，并从第二画布中的初始存储区域开始，依次存储该图像，并记录第二画布中存储的图像的数据信息；

上述终端将上述第一画布中的图像发送给上述第二画布后，该终端可对根据上述第一画布发送的图像进行组织，确定该图像的最小外包矩形，当有多个图像时，该终端可从该第二画布中的初始存储区域开始，依次存储该图像，并将第二画布存储后的图像的数据信息进行记录。

需要说明的是，上述数据信息可包括：上述图像的面积大小、存储区域、和存储坐标。

可以理解的是，上述终端从上述第二画布中的初始存储区域开始，依次存储该图像的存储方式意在使得上述第二画布尽可能多的存储上述图像，充分利用上述第二画布的存储面积，在实际应用中，以充分利用上述第二画布的存储面积为准则，该终端还可通过多种方式将上述图像存储在第二画布中，具体此处不作限定。

可以理解的是，上述数据信息可用于浏览器中的插件解析该第二画布中存储的图像。

307、当终端获取到来自用户的发送指令时，终端根据发送指令将第二画布存储的图像发送给浏览器中的插件。

上述终端将上述图像存储在上述第二画布中后，终端可获取来自用户的发送指令，该发送指令用于指示终端将该第二画布存储的图像发送给上述插件，当上述终端获取到上述发送指令后，上述终端可通过浏览器中的接口，将上述第二画布中存储的图像发送给浏览器中的插件，该插件接收到该第二画布存储的图像后，可根据上述图像的数据信息确定上述第二画布存储的图像的面积大小、在第二画布中的存储区域、以及存储坐标，上述插件可根据上述图像的数据信息对该第二画布存储的图像进行解析，并将该第二画布存储的图像转化为纹理，该插件将转化后的该图像的纹理显示在插件中对应的位置，完成上述需要显示的图像的显示。

本实施例中的步骤307是通过用户的发送指令触发终端将第二画布存储的图像发送给浏览器中的插件之后，可以理解的是，还可以有其他的方式触发，具体可以包括：

一、根据第二画布中存储的图像的数据量来触发：

本方式中，终端还可判断上述第二画布中存储的图像的数据量是否超过了预置数值，若是，则上述终端可通过浏览器中的接口，将上述第二画布中存储的图像发送给浏览器中的插件，该插件接收到该第二画布存储的图像后，可根据上述图像的数据信息确定上述第二画布存储的图像的面积大小、在第二画布中的存储区域、以及存储坐标，上述插件可根据上述图像的数据信息对该第二画布存储的图像进行解析，并将该第二画布存储的图像转化为纹理，该插件将转化后的该图像的纹理显示在插件中对应的位置，完成上述需要显示的图像的显示。

二、根据第二画布中存储的图像的数据量以及用户的发送指令共同触发：

本方式中，终端可获取来自用户的发送指令，该发送指令用于指示终端将该第二画布存储的图像发送给上述插件，当上述终端获取到上述发送指令后，并且终端判断上述第二画布中存储的图像的数据量超过了预置数值，则上述终端可通过浏览器中的接口，将上述第二画布中存储的图像发送给浏览器中的插件，该插件接收到该第二画布存储的图像后，可根据上述图像的数据信息确定上述第二画布存储的图像的面积大小、在第二画布中的存储区域、以及存储坐标，上述插件可根据上述图像的数据信息对该第二画布存储的图像进行解析，并将该第二画布存储的图像转化为纹理，该插件将转化后的该图像的纹理显示在插件中对应的位置，完成上述需要显示的图像的显示。

本实施例中，终端接收到用户的画布创建指令后，在浏览器的页面中创建上述第一画布和第二画布，当终端接收图像绘制指令后，该图像绘制指令用于指示该终端在浏览器中绘制需要显示的图像；该终端根据该图像绘制指令在第一画布中绘制该图像；该终端将该终端在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；该终端将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；当终端获取到发送指令后或者第二画布存储的图像的数据量超过预置数值时，该终端将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。这样，当需要在浏览器中进行图像显示时，终端可在浏览器中的第一画布中绘制该图像，并将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，该终端可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

为了便于理解，下面以一具体应用场景对本发明实施例提供的浏览器图像显示方法进行详细描述。

用户需要在浏览器页面中创建画布时，用户可向终端发送画布创建指令，终端可接收该用户发送的画布创建指令，终端可根据该画布创建指令在终端中浏览器页面创建第一画布和第二画布，该第二画布可通过接口与浏览器中的插件进行连接，终端可通过浏览器的脚本在上述第一画布和第二画布中绘制需要绘制的图像，上述第一画布可包括多个画布，第二画布也可包括多个画布，上述第一画布和第二画布的形状为矩形，该第一画布的宽高的比值与上述插件的宽高的比值相同，该第二画布的宽高的比值与上述插件的宽高的比值相同。例如，上述第一画布与第二画布的宽高相同，上述第一画布与上述插件的宽高相同。上述第一画布包括：画布1、画布2；上述第二画布包括：画布3、画布4。当用户需要在浏览器中显示图像时，用户可向终端发送图像绘制指令，该终端可接收该图像绘制指令，当服务器需要在终端中的浏览器中显示图像时，该服务器也可向该终端发送图像绘制指令，上述终端还可接收来着服务器发送的图像绘制指令，该图像绘制指令可用于指示终端在浏览器中绘制需要显示的图像。例如，用户需要在浏览器显示5个图像，分别为图像1、图像2、图像3、图像4、和图像5，该5个图像可组合为一幅地图。终端可在第一画布中依次绘制上述图像1、图像2、图像3、图像4、和图像5，例如，终端可调用浏览器页面的脚本在画布1中先绘制图像1，并设置该图像1的颜色和面积大小，例如，图像1的颜色为红色，面积为3，并将设置后的该图像1的颜色和面积大小进行记录，例如，终端可通过id1记录图像1及图像1的颜色和面积大小，终端在画布1中完成图像1的绘制后，将图像1发送给第二画布，例如，终端将画布1中的图像1发送给画布3，终端可对图像1进行组织，例如，终端可通过上述id1确定图像1的面积大小以及图像1的形状，确定图像1的最小外包矩形，并在画布3中的初始存储区域存储图像1，例如，该画布3的初始存储区域为画布3的右上角，终端记录画布3中的图像1的数据信息，该数据信息可包括：上述图像3的面积大小、存储区域、和存储坐标。例如，图像1的最小外包矩形的宽高为w1和h1，该图像1的存储区域为画布3的右上角，该图像1的外包矩形的起始点坐标为<x1，y1>，则图像1的数据信息可以是<id1，画布3，x1，y1，w1，h1>，当有多个图像时，例如，终端再在画布1中绘制图像2，并将图像2发送给画布3，终端可从画布3的右上角开始依次存储图像1和图像2，以使得画布3的存储面积充分利用，例如图像2的数据信息可以是<id2，画布3，x2，y2，w2，h2>，终端可判断画布3中存储的数据量是否超过预置数值，例如，图像1的数据量为5k，图像2的数据量为6k，预置数值为10k，则终端将画布3中的图像1和图像2一次性通过接口发送给浏览器中的插件，或者，当终端获取到来自用户的发送指令时，终端也可根据发送指令将画布3存储的图像发送给浏览器中的插件，例如，该发送指令表示：当第二画布存储了图像1、图像2、图像3、图像4、和图像5后，将图像1、图像2、图像3、图像4、和图像5发送给插件，则终端在画布1中依次绘制图像1、图像2、图像3、图像4、和图像5，并将图像1、图像2、图像3、图像4、和图像5依次发送给画布3，若画布3的存储面积不够，例如画布3的存储图像1、图像2、图像3后，剩余存储面积小于图像4的面积，则终端将图像4和图像5存储在画布4中，当第二画布中的画布3和画布4存储了图像1、图像2、图像3、图像4、和图像5后，即可将图像1、图像2、图像3、图像4、和图像5发送给上述浏览器中的插件，使得插件接收到图像1、图像2、图像3、图像4、和图像5后，可对该图像1、图像2、图像3、图像4、和图像5的数据信息进行解析，从而获取到图像1、图像2、图像3、图像4、和图像5，并将图像1、图像2、图像3、图像4、和图像5转化为纹理，从而完成上述地图的显示。

上面对本发明实施例提供的浏览器图像显示方法进行了描述，下面对本发明实施例提供的终端进行描述，请参阅图4，图4为本发明实施例提供的终端的一种结构意图，如图4所示，本发明实施例提供的终端400的一个实施例可包括：

第一接收单元401，用于接收图像绘制指令，该图像绘制指令用于指示终端400在浏览器中绘制需要显示的图像；

绘制单元402，用于根据该图像绘制指令在第一画布中绘制该图像；

第一发送单元403，用于将该终端400在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；

存储记录单元404，用于将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；

第二发送单元405，用于当满足预置条件时，将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。

本实施例中，第一接收单元401接收图像绘制指令，该图像绘制指令用于指示该终端400在浏览器中绘制需要显示的图像；绘制单元402根据该图像绘制指令在第一画布中绘制该图像；第一发送单元403将该终端在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；存储记录单元404将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；当满足预置条件时，第二发送单元405将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。这样，当需要在浏览器中进行图像显示时，绘制单元402可在浏览器中的第一画布中绘制该图像，第一发送单元403将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，第二发送单元405可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

上述图1所示实施例中，第一接收单元401接收到图像绘制指令后，绘制单元402可在第一画布中绘制该图像，第一发送单元403将第一画布中绘制的图像发送给第二画布，存储记录单元404将该图像存储在第二画布中，并在满足预置条件时，第二发送单元405将第二画布存储的图像发送给浏览器中的插件，使得该插件完成上述图像的显示。在实际应用中，上述终端400还可包括其他单元，用于在上述第一接收单元401接收到图像绘制指令之前，还可先在浏览器的页面中创建上述第一画布和第二画布，下面以一个具体实施例进行详细描述。请参阅图5，图5为本发明实施例提供的终端的另一种结构意图，如图5所示，本发明实施例提供的终端500的一个实施例可包括：

第一接收单元501，用于接收图像绘制指令，该图像绘制指令用于指示终端500在浏览器中绘制需要显示的图像；

绘制单元502，用于根据该图像绘制指令在第一画布中绘制该图像；

第一发送单元503，用于将该终端500在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；

存储记录单元504，用于将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；

第二发送单元505，用于当满足预置条件时，将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。

本发明实施例提供的终端500还可进一步包括：

第二接收单元506，用于接收用户发送的画布创建指令；

创建单元507，用于根据该画布创建指令在该浏览器中创建该第一画布和该第二画布，并使得该第一画布的宽高的比值与该插件的宽高的比值相同，且该第二画布的宽高的比值与该插件的宽高的比值相同，该第一画布和第二画布的形状为矩形。

本发明实施例提供的绘制单元502具体包括：

设置单元5021，用于根据该图像绘制指令设置该图像的颜色和\或面积；

绘制子单元5022，用于调用该浏览器的脚本在第一画布中绘制该图像。

本发明实施例提供的存储记录单元504具体包括：

数据组织单元5041，用于对发送给该第二画布的该图像进行组织；

存储记录子单元5042，用于从该第二画布中的初始存储区域开始，依次存储该图像，并记录该第二画布中存储的该图像的数据信息；

该图像的数据信息具体包括：该图像的面积大小、存储区域、和存储坐标。

本实施例中，第二接收单元506接收到用户的画布创建指令后，创建单元507在浏览器的页面中创建上述第一画布和第二画布，当第一接收单元501接收图像绘制指令，该图像绘制指令用于指示该终端500在浏览器中绘制需要显示的图像；绘制单元502根据该图像绘制指令在第一画布中绘制该图像；第一发送单元503将该终端在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；存储记录单元504将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；当满足预置条件时，第二发送单元505将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。这样，当需要在浏览器中进行图像显示时，绘制单元502可在浏览器中的第一画布中绘制该图像，第一发送单元503将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，第二发送单元505可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

上述图5所示实施例描述了第二接收单元506接收到画布创建指令后，创建单元507在上述浏览器的页面中创建第一画布和第二画布，第一接收单元501接收到图像绘制指令后，绘制单元502可在第一画布中绘制该图像，第一发送单元503将第一画布中绘制的图像发送给第二画布，存储记录单元504将该图像存储在第二画布中，并在满足预置条件时，第二发送单元505将第二画布存储的图像发送给浏览器中的插件，使得该插件完成上述图像的显示。在实际应用中，上述第二发送单元505还可包括多个单元，用于在不同预置条件下，将第二画布存储的图像发送给浏览器中的插件，下面以一具体实施例进行详细描述。请参阅图6，图6为本发明实施例提供的终端的另一种结构意图，如图6所示，本发明实施例提供的终端600的另一个实施例可包括：

第一接收单元601，用于接收图像绘制指令，该图像绘制指令用于指示终端600在浏览器中绘制需要显示的图像；

绘制单元602，用于根据该图像绘制指令在第一画布中绘制该图像；

第一发送单元603，用于将该终端600在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；

存储记录单元604，用于将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；

第二发送单元605，用于当满足预置条件时，将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。

本发明实施例提供的终端600还可进一步包括：

第二接收单元606，用于接收用户发送的画布创建指令；

创建单元607，用于根据该画布创建指令在该浏览器中创建该第一画布和该第二画布，并使得该第一画布的宽高的比值与该插件的宽高的比值相同，且该第二画布的宽高的比值与该插件的宽高的比值相同，该第一画布和第二画布的形状为矩形。

本发明实施例提供的绘制单元602具体包括：

设置单元6021，用于根据该图像绘制指令设置该图像的颜色和\或面积；

绘制子单元6022，用于调用该浏览器的脚本在第一画布中绘制该图像。

本发明实施例提供的存储记录单元604具体包括：

数据组织单元6041，用于对发送给该第二画布的该图像进行组织；

存储记录子单元6042，用于从该第二画布中的初始存储区域开始，依次存储该图像，并记录该第二画布中存储的该图像的数据信息；

该图像的数据信息具体包括：该图像的面积大小、存储区域、和存储坐标。

本发明实施例提供的第二发送单元605具体包括：

第一发送子单元6051，用于当该第二画布存储的图像的数据量超过预置数值时，将该第二画布存储的图像发送给该浏览器中的插件；

和\或，

第二发送子单元6052，用于当该终端600获取到来自用户的发送指令时，根据该发送指令将该第二画布存储的图像发送给该浏览器中的插件。

本实施例中，第二接收单元606接收到用户的画布创建指令后，创建单元607在浏览器的页面中创建上述第一画布和第二画布，当第一接收单元601接收图像绘制指令后，该图像绘制指令用于指示该终端600在浏览器中绘制需要显示的图像；绘制单元602根据该图像绘制指令在第一画布中绘制该图像；第一发送单元603将该终端在第一画布中绘制的该图像发送给第二画布，该浏览器包括该第一画布与该第二画布；存储记录单元604将该图像存储在第二画布中，并记录该第二画布中存储的该图像的数据信息；当终端获600取到发送指令后或者第二画布存储的图像的数据量超过预置数值时，第二发送单元605将该第二画布存储的图像发送给该浏览器中的插件，使得该插件根据该数据信息完成该图像的显示。这样，当需要在浏览器中进行图像显示时，绘制单元602可在浏览器中的第一画布中绘制该图像，第一发送单元603并将绘制的图像发送给上述第二画布，当上述第二画布中存储有多个图像时，第二发送单元605可一次性将第二画布存储的多个图像发送给插件，使得插件对该图像进行显示，这样可极大的减少终端中浏览器的页面与插件的数据交互次数，从而可提高图像绘制的效率。

为了便于理解，下面以一具体应用场景对本发明实施例提供的终端中各单元的交互进行详细描述。

用户需要在浏览器页面中创建画布时，用户可向第二接收单元606发送画布创建指令，第二接收单元606可接收该用户发送的画布创建指令，创建单元607可根据该画布创建指令在终端600中浏览器页面创建第一画布和第二画布，该第二画布可通过接口与浏览器中的插件进行连接，终端600可通过浏览器的脚本在上述第一画布和第二画布中绘制需要绘制的图像，上述第一画布可包括多个画布，第二画布也可包括多个画布，上述第一画布和第二画布的形状为矩形，该第一画布的宽高的比值与上述插件的宽高的比值相同，该第二画布的宽高的比值与上述插件的宽高的比值相同。例如，上述第一画布与第二画布的宽高相同，上述第一画布与上述插件的宽高相同。上述第一画布包括：画布1、画布2；上述第二画布包括：画布3、画布4。当用户需要在浏览器中显示图像时，用户可向第一接收单元601发送图像绘制指令，该第一接收单元601可接收该图像绘制指令，当服务器需要在终端中的浏览器中显示图像时，该服务器也可向该第一接收单元601发送图像绘制指令，上述第一接收单元601还可接收来着服务器发送的图像绘制指令，该图像绘制指令可用于指示终端600在浏览器中绘制需要显示的图像。例如，用户需要在浏览器显示5个图像，分别为图像1、图像2、图像3、图像4、和图像5，该5个图像可组合为一幅地图。绘制单元602可在第一画布中依次绘制上述图像1、图像2、图像3、图像4、和图像5，例如，绘制子单元6022可调用浏览器页面的脚本在画布1中先绘制图像1，设置单元6021设置该图像1的颜色和面积大小，例如，图像1的颜色为红色，面积为3，并将设置后的该图像1的颜色和面积大小进行记录，例如，终端600可通过id1记录图像1及图像1的颜色和面积大小，绘制单元602在画布1中完成图像1的绘制后，第一发送单元603将图像1发送给第二画布，例如，第一发送单元603将画布1中的图像1发送给画布3，数据组织单元6041可对图像1进行组织，例如，数据组织单元6041可通过上述id1确定图像1的面积大小以及图像1的形状，确定图像1的最小外包矩形，并在画布3中的初始存储区域存储图像1，例如，该画布3的初始存储区域为画布3的右上角，存储记录子单元6042记录画布3中的图像1的数据信息，该数据信息可包括：上述图像3的面积大小、存储区域、和存储坐标。例如，图像1的最小外包矩形的宽高为w1和h1，该图像1的存储区域为画布3的右上角，该图像1的外包矩形的起始点坐标为<x1，y1>，则图像1的数据信息可以是<id1，画布3，x1，y1，w1，h1>，当有多个图像时，例如，终端600再在画布1中绘制图像2，并将图像2发送给画布3，终端可从画布3的右上角开始依次存储图像1和图像2，以使得画布3的存储面积充分利用，例如图像2的数据信息可以是<id2，画布3，x2，y2，w2，h2>，终端600可判断画布3中存储的数据量是否超过预置数值，例如，图像1的数据量为5k，图像2的数据量为6k，预置数值为10k，则第一发送子单元6051将画布3中的图像1和图像2一次性通过接口发送给浏览器中的插件，或者，当终端获600取到来自用户的发送指令时，第二发送子单元6052也可根据发送指令将画布3存储的图像发送给浏览器中的插件，例如，该发送指令表示：当第二画布存储了图像1、图像2、图像3、图像4、和图像5后，将图像1、图像2、图像3、图像4、和图像5发送给插件，则绘制单元602在画布1中依次绘制图像1、图像2、图像3、图像4、和图像5，第一发送单元603将图像1、图像2、图像3、图像4、和图像5依次发送给画布3，若画布3的存储面积不够，例如画布3的存储图像1、图像2、图像3后，剩余存储面积小于图像4的面积，则存储记录单元604将图像4和图像5存储在画布4中，当第二画布中的画布3和画布4存储了图像1、图像2、图像3、图像4、和图像5后，第二发送单元605即可将图像1、图像2、图像3、图像4、和图像5发送给上述浏览器中的插件，使得插件接收到图像1、图像2、图像3、图像4、和图像5后，可对该图像1、图像2、图像3、图像4、和图像5的数据信息进行解析，从而获取到图像1、图像2、图像3、图像4、和图像5，并将图像1、图像2、图像3、图像4、和图像5转化为纹理，从而完成上述地图的显示。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims (8)

1.一种浏览器图像显示方法，其特征在于，包括：

终端接收图像绘制指令，所述图像绘制指令用于指示所述终端在浏览器中绘制需要显示的图像；

所述终端根据所述图像绘制指令在第一画布中绘制所述图像；

所述终端将所述终端在第一画布中绘制的所述图像发送给第二画布，所述浏览器包括所述第一画布与所述第二画布；

所述终端将所述图像存储在第二画布中，并记录所述第二画布中存储的所述图像的数据信息，所述数据信息用于浏览器中的插件解析所述第二画布中存储的图像；

当满足预置条件时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件，使得所述插件根据所述数据信息完成所述图像的显示；

所述终端将所述图像存储在第二画布中具体包括：

所述终端对发送给所述第二画布的所述图像进行组织，确定所述图像的最小外包矩形，并从所述第二画布中的初始存储区域开始，依次存储所述图像；

所述图像的数据信息具体包括：所述图像的面积大小、存储区域、和存储坐标。

2.根据权利要求1所述的方法，其特征在于，所述终端接收图像绘制指令之前还包括：

所述终端接收用户发送的画布创建指令；

所述终端根据所述画布创建指令在所述浏览器中创建所述第一画布和所述第二画布，并使得所述第一画布的宽高的比值与所述插件的宽高的比值相同，且所述第二画布的宽高的比值与所述插件的宽高的比值相同，所述第一画布和第二画布的形状为矩形。

3.根据权利要求1所述的方法，其特征在于，所述终端根据所述图像绘制指令在第一画布中绘制所述图像具体包括：

所述终端根据所述图像绘制指令设置所述图像的颜色和\或面积，并调用所述浏览器的脚本在第一画布中绘制所述图像。

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述当满足预置条件时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件具体包括：

当所述第二画布存储的图像的数据量超过预置数值时，所述终端将所述第二画布存储的图像发送给所述浏览器中的插件；

和\或，

当所述终端获取到来自用户的发送指令时，所述终端根据所述发送指令将所述第二画布存储的图像发送给所述浏览器中的插件。

5.一种终端，其特征在于，包括：

第一接收单元，用于接收图像绘制指令，所述图像绘制指令用于指示终端在浏览器中绘制需要显示的图像；

绘制单元，用于根据所述图像绘制指令在第一画布中绘制所述图像；

第一发送单元，用于将所述终端在第一画布中绘制的所述图像发送给第二画布，所述浏览器包括所述第一画布与所述第二画布；

存储记录单元，用于将所述图像存储在第二画布中，并记录所述第二画布中存储的所述图像的数据信息，所述数据信息用于浏览器中的插件解析所述第二画布中存储的图像；

第二发送单元，用于当满足预置条件时，将所述第二画布存储的图像发送给所述浏览器中的插件，使得所述插件根据所述数据信息完成所述图像的显示；

所述存储记录单元具体包括：

数据组织单元，用于对发送给所述第二画布的所述图像进行组织；

存储记录子单元，用于从所述第二画布中的初始存储区域开始，依次存储所述图像，并记录所述第二画布中存储的所述图像的数据信息；

所述图像的数据信息具体包括：所述图像的面积大小、存储区域、和存储坐标。

6.根据权利要求5所述的终端，其特征在于，所述终端还包括：

第二接收单元，用于接收用户发送的画布创建指令；

创建单元，用于根据所述画布创建指令在所述浏览器中创建所述第一画布和所述第二画布，并使得所述第一画布的宽高的比值与所述插件的宽高的比值相同，且所述第二画布的宽高的比值与所述插件的宽高的比值相同，所述第一画布和第二画布的形状为矩形。

7.根据权利要求5所述的终端，其特征在于，所述绘制单元具体包括：

设置单元，用于根据所述图像绘制指令设置所述图像的颜色和\或面积；

绘制子单元，用于调用所述浏览器的脚本在第一画布中绘制所述图像。

8.根据权利要求5至7中任一项所述的终端，其特征在于，所述第二发送单元包括：

第一发送子单元，用于当所述第二画布存储的图像的数据量超过预置数值时，将所述第二画布存储的图像发送给所述浏览器中的插件；

和\或，

第二发送子单元，用于当所述终端获取到来自用户的发送指令时，根据所述发送指令将所述第二画布存储的图像发送给所述浏览器中的插件。