图形的生成方法、装置和计算机可读存储介质与流程

本公开涉及计算机图形学技术领域，特别涉及一种图形的生成方法、图形的生成装置和计算机可读存储介质。

背景技术：

当下网络越来越快，页面效果也越来越复杂。例如，可以在网站中添加立体效果，以提高页面的表现力。

在相关技术中，在生成页面之前，在固定位置预先设置容纳立体图形的容器，并根据预先设置的图片生成具有立体效果的页面。

技术实现要素：

本公开的发明人发现上述相关技术中存在如下问题：页面一旦生成无法改变立体图形的位置和内容，如果需要改变则需要重新开发页面，导致开发成本高、效率低。

鉴于此，本公开提出了一种图形的生成技术方案，能够降低开发成本、提高开发效率。

根据本公开的一些实施例，提供了一种图形的生成方法，包括：在页面中的目标区域内截取所述待处理图像；根据待生成的立体模型，在所述目标区域上生成相应大小的画布容器；在所述画布容器中生成所述立体模型；将所述待处理图像设置在所述立体模型的各个面上，以生成立体图形。

在一些实施例中，获取所述目标区域的位置信息和所述页面的url(uniformresourcelocator，统一资源定位符)；根据所述位置信息和url，利用node.js截取所述待处理图像。

在一些实施例中，向浏览器发送所述目标区域的位置信息，以便所述浏览器生成相应大小的不透明背景，并将所述不透明背景覆盖在所述目标区域上。

在一些实施例中，所述画布容器的大小大于所述目标区域的大小；所述画布容器为透明画布容器。

在一些实施例中，根据所述目标区域的位置信息，利用webgl网络图形库生成所述立体模型。

根据本公开的另一些实施例，提供一种图形的生成装置，包括：截取单元，用于在页面中的目标区域内截取所述待处理图像；生成单元，用于根据待生成的立体模型，在所述目标区域上生成相应大小的画布容器，在所述画布容器中生成所述立体模型，将所述待处理图像设置在所述立体模型的各个面上，以生成立体图形。

在一些实施例中，所述截取单元获取所述目标区域的位置信息和所述页面的url，根据所述位置信息和url，利用node.js截取所述待处理图像。

在一些实施例中，所述生成装，还包括：发送单元，用于向浏览器发送所述目标区域的位置信息，以便所述浏览器生成相应大小的不透明背景，并将所述不透明背景覆盖在所述目标区域上。

在一些实施例中，所述画布容器的大小大于所述目标区域的大小；所述画布容器为透明画布容器。

在一些实施例中，所述生成单元根据所述目标区域的位置信息，利用webgl网络图形库生成所述立体模型。

根据本公开的又一些实施例，提供一种图形的生成装置，包括：存储器；和耦接至所述存储器的处理器，所述处理器被配置为基于存储在所述存储器装置中的指令，执行上述任一个实施例中的图形的生成方法。

根据本公开的再一些实施例，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一个实施例中的图形的生成方法。

在上述实施例中，直接在页面中截取图片、设置画布可以快速地生成页面中的立体图形。这样，无需重新开发页面，即可在想要的区域将二维图像转换为三维图形，从而降低了开发成本、提高了开发效率。

附图说明

构成说明书的一部分的附图描述了本公开的实施例，并且连同说明书一起用于解释本公开的原理。

参照附图，根据下面的详细描述，可以更加清楚地理解本公开，其中：

图1示出本公开的图形的生成方法的一些实施例的流程图；

图2示出图1中的步骤110的一些实施例的流程图；

图3a-3c示出本公开的图形的生成方法的一些实施例的示意图；

图4示出本公开的图形的生成装置的一些实施例的框图；

图5示出本公开的图形的生成装置的另一些实施例的框图；

图6示出本公开的图形的生成装置的又一些实施例的框图。

具体实施方式

现在将参照附图来详细描述本公开的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为授权说明书的一部分。

在这里示出和讨论的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它示例可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

图1示出本公开的图形的生成方法的一些实施例的流程图。

如图1所示，该方法包括：步骤110，截取待处理图像；步骤120，生成画布容器；步骤130，生成立体模型；和步骤140，生成立体图形。

在步骤110中，在页面中的目标区域内截取待处理图像。例如，目标区域是想要将二维图像转换为三维图形的区域，该区域内包含的二维图形即为待处理图像。在一些实施例中，可以通过图2中的步骤截取待处理图像。

图2示出图1中的步骤110的一些实施例的流程图。

如图2所示，步骤110包括：步骤1110，获取位置信息和url；步骤1120，截取待处理图像。

在步骤1110中，获取目标区域的位置信息和页面的url。例如，位置信息可以包括位置坐标和区域大小。位置坐标可以为目标区域的左上角顶点的坐标，,区域大小可以为目标区域的宽度与高度。

在步骤1120中，根据位置信息和url，利用node.js截取待处理图像。

在一些实施例中，先保存url、左上角顶点的坐标、宽度、高度，再发送给node.js后端。node.js后端可以将页面作为程序的一个模块来处理(例如，将目标区域内的动态广告作为每秒刷新60次的不同图片)，从而实现截图功能。这样，通过node.js可以解决浏览器无法直接对页面进行截图的问题，从而能够自定义想要生成立体图形的图像源和区域无需重新开发新的页面，提高页面成效率、降低页面生成成本。

在一些实施例中，还可以向浏览器发送目标区域的位置信息，以便浏览器生成相应大小的不透明背景，并将不透明背景覆盖在目标区域上。例如，可以生成一个与目标区域同等大小的白色背景遮盖目标区域中的二维图像。

获取了待处理图像后，就可以通过图1中的其余步骤生成立体图形了。

在步骤120中，根据待生成的立体模型，在目标区域上生成相应大小的画布容器。例如，画布容器的大小大于目标区域的大小，画布容器为透明画布容器。画布容器的大小可以根据立体模型的大小设定。

由于立体图形可以具有旋转功能，在旋转过程中立体图形有可能超过目标区域的范围。因此，画布容器的大小大于目标区域的大小，可以保证立体图形显示的完整性。

在步骤130中，在画布容器中生成立体模型。例如，根据目标区域的位置信息，利用webgl网络图形库生成立体模型。

在步骤140中，将待处理图像设置在立体模型的各个面上，以生成立体图形。

图3a-3c示出本公开的图形的生成方法的一些实施例的示意图。

如图3a所示，页面3中包含区域31、区域32和区域33。例如，将区域31作为目标区域，对其中的二维图像34进行处理。图像34中可以包含图案341和342。将区域31的左顶点坐标、宽度、长度以及页面3的url发送给node.js。node.js根据上述位置信息截取图像34。

如图3b所示，浏览器可以根据服务端返回的位置信息生成与区域31同等大小的白色背景，并将白色背景覆盖在区域31上。在区域31上生成透明的画布容器(图中未标出)，画布容器的大小要大于区域31，以防生成的立体模型35超过区域31的范围。利用webgl在画布容器中生成立体模型35。

如图3c所示，将图像34设置在立体模型35的各个面上，以形成立体图形替代图像34。

上述实施例中，直接在页面中截取图片、设置画布可以快速地生成页面中的立体图形。这样，无需重新开发页面，即可在想要的区域将二维图像转换为三维图形，从而降低了开发成本、提高了开发效率。

图4示出本公开的图形的生成装置的一些实施例的框图。

如图4所示，图形的生成装置4包括：截取单元41、生成单元42。

截取单元41在页面中的目标区域内截取待处理图像。生成单元42根据待生成的立体模型，在目标区域上生成相应大小的画布容器，在画布容器中生成所述立体模型，将待处理图像设置在立体模型的各个面上，以生成立体图形。

在一些实施例中，截取单元41获取目标区域的位置信息和页面的url，根据位置信息和url，利用node.js截取待处理图像。

在一些实施例中，图形的生成装置4还包括发送单元43。发送单元43向浏览器发送目标区域的位置信息，以便浏览器生成相应大小的不透明背景，并将不透明背景覆盖在目标区域上。

在一些实施例中，画布容器的大小大于目标区域的大小，画布容器为透明画布容器。

在一些实施例中，生成单元42根据目标区域的位置信息，利用webgl网络图形库生成立体模型。

上述实施例中，直接在页面中截取图片、设置画布可以快速地生成页面中的立体图形。这样，无需重新开发页面，即可在想要的区域将二维图像转换为三维图形，从而降低了开发成本、提高了开发效率。

图5示出本公开的图形的生成装置的另一些实施例的框图。

如图5所示，该实施例的图形的生成装置5包括：存储器51以及耦接至该存储器51的处理器52，处理器52被配置为基于存储在存储器51中的指令，执行本公开中任意一个实施例中的图形的生成方法。

其中，存储器51例如可以包括系统存储器、固定非易失性存储介质等。系统存储器例如存储有操作系统、应用程序、引导装载程序(bootloader)、数据库以及其他程序等。

图6示出本公开的图形的生成装置的又一些实施例的框图。

如图6所示，该实施例的图形的生成装置6包括：存储器610以及耦接至该存储器610的处理器620，处理器620被配置为基于存储在存储器610中的指令，执行前述任意一个实施例中的图形的生成方法。

存储器610例如可以包括系统存储器、固定非易失性存储介质等。系统存储器例如存储有操作系统、应用程序、引导装载程序(bootloader)以及其他程序等。

图形的生成装置6还可以包括输入输出接口630、网络接口640、存储接口650等。这些接口630、640、650以及存储器610和处理器620之间例如可以通过总线660连接。其中，输入输出接口630为显示器、鼠标、键盘、触摸屏等输入输出设备提供连接接口。网络接口640为各种联网设备提供连接接口。存储接口650为sd卡、u盘等外置存储设备提供连接接口。

本领域内的技术人员应当明白，本公开的实施例可提供为方法、系统、或计算机程序产品。因此，本公开可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用非瞬时性存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

至此，已经详细描述了根据本公开的图形的生成方法、图形的生成装置和计算机可读存储介质。为了避免遮蔽本公开的构思，没有描述本领域所公知的一些细节。本领域技术人员根据上面的描述，完全可以明白如何实施这里公开的技术方案。

可能以许多方式来实现本公开的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和系统。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

虽然已经通过示例对本公开的一些特定实施例进行了详细说明，但是本领域的技术人员应该理解，以上示例仅是为了进行说明，而不是为了限制本公开的范围。本领域的技术人员应该理解，可在不脱离本公开的范围和精神的情况下，对以上实施例进行修改。本公开的范围由所附权利要求来限定。