CN114371838A - 一种小程序画布渲染方法、装置、设备及存储介质 - Google Patents

Abstract

本公开提供了一种小程序画布渲染方法、装置、设备及存储介质，计算机技术领域，尤其涉及图像处理技术领域。具体实现方案为：渲染引擎调用小程序画布标签的绘制API，以在小程序画布上绘制图形，得到绘制后画布；将绘制后画布存储至预设缓存区中，以使网络浏览器从预设缓存区读取绘制后画布，并在网络浏览器上视频标签所占区域内渲染绘制后画布；其中，网络浏览器上视频标签的属性与渲染引擎上小程序画布标签的属性相同。

Description

一种小程序画布渲染方法、装置、设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及图像处理技术领域。

背景技术

小程序画布(canvas)面向Web(网络)开发者提供了一套绘图应用程序接口(Application Programming Interface，API)，常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等领域。

发明内容

本公开提供了一种小程序画布渲染方法、装置、设备及存储介质。

根据本公开的第一方面，提供了一种小程序画布渲染方法，应用于渲染引擎，包括：

调用小程序画布标签的绘制API，以在所述小程序画布上绘制图形，得到绘制后画布；

将所述绘制后画布存储至预设缓存区中，以使网络浏览器从所述预设缓存区读取所述绘制后画布，并在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

根据本公开的第二方面，提供了一种小程序画布渲染方法，应用于网络浏览器，包括：

从预设缓存区读取绘制后画布，所述绘制后画布为渲染引擎调用小程序画布标签的绘制API，以在所述小程序画布上绘制图形所得到的画布；

在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

根据本公开的第三方面，提供了一种小程序画布渲染装置，应用于渲染引擎，包括：

调用单元，用于调用小程序画布标签的绘制API，以在所述小程序画布上绘制图形，得到绘制后画布；

存储单元，用于将所述绘制后画布存储至预设缓存区中，以使网络浏览器从所述预设缓存区读取所述绘制后画布，并在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

根据本公开的第四方面，提供了一种小程序画布渲染装置，应用于网络浏览器，包括：

读取单元，用于从预设缓存区读取绘制后画布，所述绘制后画布为渲染引擎调用小程序画布标签的绘制API，以在所述小程序画布上绘制图形所得到的画布；

渲染单元，用于在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

根据本公开的第五方面，提供了一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面提供的任一小程序画布渲染方法或第二方面提供的任一小程序画布渲染方法。

根据本公开的第六方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行根据第一方面提供的任一小程序画布渲染方法或第二方面提供的任一小程序画布渲染方法。

根据本公开的第七方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据第一方面提供的任一小程序画布渲染方法或第二方面提供的任一小程序画布渲染方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1相关技术中小程序canvas的渲染过程的一种示意图；

图2是本公开实施例提供的小程序画布渲染方法的第一种流程示意图；

图3是本公开实施例提供的小程序画布渲染系统的一种结构示意图；

图4是本公开实施例提供的小程序画布渲染方法的第二种流程示意图；

图5是本公开实施例提供的小程序画布渲染过程的一种示意图；

图6是本公开实施例提供的小程序画布渲染方法的第三种流程示意图；

图7是本公开实施例提供的小程序画布渲染方法的第四种流程示意图；

图8是本公开实施例提供的子DOM树的一种示意图；

图9是本公开实施例提供的小程序画布渲染装置的第一种结构示意图；

图10是本公开实施例提供的小程序画布渲染装置的第二种结构示意图；

图11是用来实施本公开实施例的小程序画布渲染方法的电子设备的第一种框图；

图12是用来实施本公开实施例的小程序画布渲染方法的电子设备的第二种框图；

图13是用来实施本公开实施例的小程序画布渲染方法的电子设备的第三种框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

小程序canvas画布面向Web开发者提供了一套绘图API，常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等领域。

相关技术中，小程序canvas的渲染过程，如图1所示，包括：

步骤一，网络浏览器在网络视图(Web View)上创建canvas标签，即创建canvas节点，并配置canvas节点的属性。其中，canvas节点的属性包括canvas节点的宽和高，以及canvas节点在Web View上得到位置。

步骤二，网络浏览器将canvas节点插入DOM树中，计算canvas节点的布局，得到canvas节点的属性，包括canvas节点相对Web View的位置(x，y)、宽和高。

图1所示的DOM树中还包括body、div、text等多个标签的节点，本公开实施例中以此为例进行说明，并不起限定作用。

步骤三，网络浏览器向客户端发送canvas节点的属性。客户端具有canvas原生组件。

步骤四，客户端利用canvas原生组件，在客户端视图上与canvas节点相对WebView的位置相同的位置上，插入一块原生区域，并在该原生区域内渲染原生界面，即canvas节点的画布内容。

步骤五，当canvas节点在网络视图上的位置或宽高发生变化时，网络浏览器将调整后的canvas节点属性发送给客户端，以使得客户端相应的调整在客户端视图上原生区域的位置以及原生区域的宽高。

canvas原生组件在Web View这一层的渲染任务是很简单，只需要渲染一个占位元素，之后，客户端在这块占位元素之上叠加一层原生界面。

然而上述小程序canvas的渲染方式，存在如下缺点：

1)客户端视图框架是由Java语言实现，例如，安卓视图(Android View)框架就是由Java语言实现。网络浏览器是由C++语言实现。在渲染小程序canvas时，客户端与网络浏览器之间需要多次通信，这就使得在渲染小程序canvas的过程中，需要多次进行跨语言的数据交换，如java->C++，或C++->java的数据交换，进而带来了渲染性能上的损耗。

实际应用中，小程序canvas用于动画、游戏等对帧率有高要求的领域，对渲染性能的要求是越高越好。

2)canvas原生组件实际是一个视图(View)原生组件，与Web View在不同显示层级上，View原生组件的层级是最高的，所以Web View中的其他组件无论设置叠加顺序属性(如z-index)为多少，都无法盖在canvas原生组件上。

canvas原生组件无法应用层叠样式表(Cascading Style Sheets，CSS)，也不支持多种事件(如catch和capture事件等)绑定方式。在需要改变网络浏览器上小程序canvas的背景颜色或字体字号等信息时，需要客户端利用canvas原生组件修改代码来实现。

另外，如上述步骤五的描述，网络浏览器与客户端之间显示小程序canvas无法实现滚动联动，需要网络浏览器同步通知客户端当前位置，客户端在将小程序canvas同步移动到相应位置。

基于上述可知，相关技术中的小程序canvas渲染方式存在着渲染性能损耗和使用限制。为解决该问题，本公开实施例提供了一种小程序画布渲染方法，该方法应用于渲染引擎，该渲染引擎(如V8引擎等)具有canvas原生组件，该canvas原生组件的标签为小程序画布标签，即canvas标签。该渲染引擎关联的网络浏览器上创建有视频标签，该视频标签可以为video标签，也可以为其他支持嵌入视频的标签，对此不进行限定。

本公开实施例中，渲染引擎和网络浏览器可以位于同一电子设备上，也要位于不同的电子设备上。电子设备可以为移动终端、平板电脑、笔记被或服务器等，对此不进行限定。

一个可选的实施例中，为支持绘图API的高频调用，以及减少渲染引擎与网络浏览器的通信开销，渲染引擎可以通过宿主机与网络浏览器绑定，并且小程序画布标签运行于渲染引擎的上下文中。这样，在进行小程序画布渲染时，绘制API的调用均是采用直接绑定的方式，小程序画布的绘制均是在渲染引擎的上下文中执行，不需要经过网络浏览器与渲染引擎的消息通讯，实现了支持绘图API的高频调用，以及减少渲染引擎与网络浏览器的通信开销。

本公开实施例中，视频标签为嵌入性标签，且视频标签具有画布渲染功能，网络浏览器上视频标签的属性与渲染引擎上小程序画布标签的属性相同。其中，小程序画布标签的属性可以包括但不限于小程序画布的宽、高、位置和内容等。

一个可选的实施例中，视频标签的属性包括预设特殊属性，预设特殊属性指示：视频标签用于同层渲染小程序画布。例如，预设特殊属性可以采用canvas-type＝“true”来表示。基于预设特殊属性，可以实现在视频标签所占区域同层渲染小程序画布，而视频标签属于嵌入性标签，并非是View原生组件，因此，可以使用叠加顺序属性，来控制视频标签的显示层级，也就是实现了小程序画布的内容可以在任一层级显示，降低了小程序画布渲染方法的使用限制。

基于此，如图2所示，上述小程序画布渲染方法包括如下步骤：

步骤S21，调用小程序画布标签的绘制API，以在小程序画布上绘制图形，得到绘制后画布。

渲染引擎提供了小程序画布标签的绘制API。渲染引擎调用绘制API，可在渲染引擎的视图中显示的小程序画布上绘制图形，经绘制所得到的画布称为绘制后画布。

在本公开实施例中，渲染引擎可以基于图形处理函数(如skia函数等)提供的图形库，来实现在小程序画布上绘制图形。

步骤S22，将绘制后画布存储至预设缓存区中，以使网络浏览器从预设缓存区读取绘制后画布，并在网络浏览器上视频标签所占区域内渲染绘制后画布。

本公开实施例中，预设缓存区为网络浏览器和渲染引擎复用的缓存区。一个示例中，视频标签为video标签，在网络浏览器在创建video标签时，还可以配置一个内容缓存区，如surface缓存区。该内容缓存区可以作为预设缓存区。

预设缓存区也可以为预先配置在宿主机中的一个缓存区，当网络浏览器创建了video标签后，该缓存区就作为预设缓存区，由网络浏览器和渲染引擎分别复用该缓存区。

本公开实施例中，视频标签具有画布渲染功能。在图形绘制完成，得到绘制后画布后，渲染引擎将绘制后画布存储至预设缓存区中。之后，网络浏览器从预设缓存区读取绘制后画布，并利用视频标签具有画布渲染功能，在网络浏览器上视频标签所占区域内渲染绘制后画布。

本公开实施例提供的技术方案中，小程序分为主机(master)和从机(slave)两个运行环境，slave由网络浏览器承载，master由渲染引擎承载，两者之间的通信通过宿主机实现，如图3所示，这支持不同操作系统跨端进行小程序画布渲染。

网络浏览器和渲染引擎均是采用C++语言实现的，因此，在渲染小程序canvas时，客户端与网络浏览器之间通信时，不需要进行跨语言的数据交换，降低了渲染性能上的损耗，渲染性能好，更为适用于动画、游戏等对帧率有高要求的领域，例如，可以使小游戏帧率接近原生组件的帧率。

另外，视频标签为网络浏览器上的嵌入性标签，网络浏览器所支持的各种功能和事件，视频标签均支持，如视频标签支持CSS，以及各种事件绑定方式。本公开实施例提供的技术方案中，将由canvas原生组件生成的画布(即上述小程序画布)在视频标签所占区域进行渲染，实现了在网络浏览器上渲染的小程序画布支持CSS以及各种事件绑定方式，降低了小程序画布渲染方法的使用限制。

此外，视频标签为网络浏览器上的嵌入性标签，也就是，视频标签显示的小程序画布可以随着网络浏览器的网络视图的滚动而滚动，不需要同步通知客户端当前位置。这进一步降低了小程序画布渲染方法的使用限制。

在本公开的一个实施例中，还提供了一种小程序画布渲染方法，如图4所示，应用于渲染引擎，该方法中，步骤S44-步骤S45与步骤S21-步骤S22相同。

步骤S41，通过宿主机，向网络浏览器发送查询请求，查询请求包括小程序画布标签的标识，以使网络浏览器获取与标识匹配的视频标签的属性，并将视频标签的属性返回给渲染引擎。

本公开实施例中，渲染引擎向宿主机发送查询请求，宿主机将查询请求转发给网络浏览器。网络浏览器接收到查询请求后，可以从查询请求中提取到小程序画布标签的标识，并确定与该小程序画布标签的标识匹配的视频标签，进而网络浏览器获取该视频标签的属性，如宽、高、位置、以及画布内容等，将获取的视频标签的属性返回给渲染引擎。

步骤S42，接收网络浏览器返回的视频标签的属性。

网络浏览器获取到视频标签的属性后，向宿主机发送视频标签的属性，进而宿主机将视频标签的属性转发给渲染引擎。

步骤S43，在渲染引擎上创建与视频标签的属性匹配的小程序画布标签，小程序画布标签所占区域内渲染与视频标签的属性匹配的小程序画布。

本公开实施例中，视频标签的属性包括视频标签所占区域的宽、高以及画布内容等。渲染引擎接收到视频标签的属性后，在渲染引擎上创建与视频标签的属性匹配的小程序画布标签。例如，渲染引擎利用小程序画布原生组件，在与视频标签的宽高以及位置相同的区域内，渲染视频标签的内容。

例如，如图5所示，渲染引擎向宿主机发送查询请求，该查询请求包括小程序画布标签的标识，如图5中的query，select('#mycanvas')。宿主机向网络浏览器转发该查询请求，此时，网络浏览器获取到小程序画布标签的标识mycanvas，如图5中的getsurface('#mycanvas')。网络浏览器获取与mycanvas匹配的视频标签的属性，如图5中的宽(w)、高(h)和内容(surface)，将(w，h，surface)发送给宿主机，如图5中的return(w，h，surface)，宿主机将(w，h，surface)发送给渲染引擎，如图5中的new canvas(w，h，surface)。渲染引擎获取到(w，h，surface)后，在渲染引擎的视图上渲染surface。

本公开实施例中，宿主机中配置了预设缓存区，如图5所示的map，map中记录了小程序画布标签的标识和内容的对应关系，如图5所示的canvas-id与surface的对应关系。基于该预设缓存区中存储的内容，对网络浏览器上的视频标签的内容进行调整。

一个示例中，若渲染引擎获取的视频标签的内容为空，则渲染引擎利用小程序画布原生组件，在与视频标签的属性匹配的区域内，渲染一个原生界面，该原生界面即为小程序画面。

本公开实施例中，渲染引擎可以实时利用小程序画布标签，对网络浏览器显示的视频标签内容进行调整，便于开发者对小程序画布进行更新，降低了小程序画布的调整成本和开发成本。

与上述应用于渲染引擎的小程序画布渲染方法，本公开实施例还提供了一种小程序画布渲染方法，该方法应用于网络浏览器。该网络浏览器上创建有视频标签，该视频标签可以为video标签，也可以为其他支持嵌入视频的标签，对此不进行限定。该网络浏览器关联的渲染引擎具有canvas原生组件，该canvas原生组件的标签为小程序画布标签，即canvas标签。

一个可选的实施例中，为支持绘图API的高频调用，以及减少渲染引擎与网络浏览器的通信开销，渲染引擎可以通过宿主机与网络浏览器绑定，并且小程序画布标签运行于渲染引擎的上下文中。

本公开实施例中，视频标签为嵌入性标签，且视频标签具有画布渲染功能，网络浏览器上视频标签的属性与渲染引擎上小程序画布标签的属性相同。一个可选的实施例中，视频标签的属性包括预设特殊属性，预设特殊属性指示：视频标签用于同层渲染小程序画布。

基于此，如图6所示，上述小程序画布渲染方法包括如下步骤：

步骤S61，从预设缓存区读取绘制后画布，绘制后画布为渲染引擎调用小程序画布标签的绘制API，以在小程序画布上绘制图形所得到的画布。

本公开实施例中，渲染引擎绘制小程序画布的过程可参见上述步骤S21-步骤S22部分的相关描述，此处不再赘述。

网络浏览器可以定时的从预设缓存区读取绘制后画布，也可以在接收到渲染引擎发送的绘制完成消息后，从预设缓存区读取绘制后画布，对此不进行限定。

步骤S62，在网络浏览器上视频标签所占区域内渲染绘制后画布。

本公开实施例提供的技术方案中，小程序分为master和slave两个运行环境，slave由网络浏览器承载，master由渲染引擎承载，两者之间的通信通过宿主机实现，如图3所示，这支持不同操作系统跨端进行小程序画布渲染。

网络浏览器和渲染引擎均是采用C++语言实现的，因此，在渲染小程序canvas时，客户端与网络浏览器之间通信时，不需要进行跨语言的数据交换，降低了渲染性能上的损耗，渲染性能好，更为适用于动画、游戏等对帧率有高要求的领域，例如，可以使小游戏帧率接近原生组件的帧率。

另外，视频标签为网络浏览器上的嵌入性标签，其本身支持CSS，以及各种事件绑定方式。本公开实施例提供的技术方案中，将由canvas原生组件生成的画布(即上述小程序画布)在视频标签所占区域进行渲染，实现了在网络浏览器上渲染的小程序画布支持CSS以及各种事件绑定方式，降低了小程序画布渲染方法的使用限制。

此外，视频标签为网络浏览器上的嵌入性标签，也就是，视频标签显示的小程序画布可以随着网络浏览器的网络视图的滚动而滚动，不需要同步通知客户端当前位置。这进一步降低了小程序画布渲染方法的使用限制。

在本公开的一个实施例中，还提供了一种小程序画布渲染方法，如图7所示，应用于网络浏览器，该方法中，步骤S76-步骤S77与步骤S61-步骤S62相同。

步骤S71，接收指示创建小程序画布标签的指令。

本公开实施例中，网络浏览器可以向用户提供创建小程序画布的用户界面(UserInterface，UI)，用户可以通过UI，向网络浏览器输入指示创建小程序画布标签的指令。用户也可以通过其他设备，向网络浏览器输入指示创建小程序画布标签的指令，还可以采用其他方式，向网络浏览器输入指示创建小程序画布标签的指令，对此不进行限定。

步骤S72，根据指令，在网络浏览器上创建视频标签。

本公开实施例中，网络浏览器在接收到指示创建小程序画布标签的指令后，根据该指令，网络浏览器可以通过声明小程序画布标签，经转换处理，将小程序画布标签转换为视频标签，进而实现在网络浏览器上创建视频标签，该视频标签用于同层渲染小程序画布。

一个可选的实施例中，步骤S72具体可以为：根据指示创建小程序画布标签的指令，网络浏览器可以在DOM树上插入嵌入标签，在嵌入标签下创建子DOM树，子DOM树包括视频标签。基于此来实现在网络浏览器上创建视频标签。

例如，嵌入标签为超文本标记语言(Hyper Text Markup Language，Html)的embed标签，子DOM树为ifame标签，ifame标签具有video标签。基于此，根据指示创建小程序画布标签的指令，在网络浏览器上创建视频标签的结构，如图8所示。图8中还示出了head、body、videolayer和surface等标签的节点，图8仅为一个示例，并不起限定作用。

实际应用中，canvas渲染的原理可以复用video标签的渲染方式，video标签包括一个surface缓存区，canvas组件(即网络浏览器)构建一个video标签，来生成一块surface画布，canvas原生组件(即渲染引擎)负责绘制小程序画布，网络浏览器负责呈现小程序画布。

本公开实施例中，在渲染引擎一侧，小程序画布可以称为canvas画布，在网络浏览器一侧，小程序画布可以称为surface画布。

一个可选的实施例中，在创建视频标签之后，网络浏览器还可以创建一个预设缓存区，如图8中的surface缓存区，渲染引擎和网络浏览器复用预设缓存区，该预设缓存区作为小程序画布的后端存储。

步骤S73，通过宿主机，接收渲染引擎发送查询请求，查询请求包括小程序画布标签的标识。

渲染引擎向宿主机发送查询请求，查询请求包括小程序画布标签的标识；宿主机向网络浏览器发送查询请求；网络浏览器接收该查询请求。

步骤S74，获取与标识匹配的视频标签的属性。

网络浏览器从查询请求中获取小程序画布标签的标识，获取与标识匹配的视频标签，并获取该视频标签的属性。

步骤S75，将视频标签的属性返回给渲染引擎。

本公开实施例中，视频标签的属性包括视频标签所占区域的宽、高以及画布内容等。渲染引擎接收到视频标签的属性后，在渲染引擎上创建与视频标签的属性匹配的小程序画布标签。例如，渲染引擎利用小程序画布原生组件，在与视频标签的宽高以及位置相同的区域内，渲染视频标签的内容。

本公开实施例中，渲染引擎可以实时利用小程序画布标签，对网络浏览器显示的视频标签内容进行调整，便于开发者对小程序画布进行更新，降低了小程序画布的调整成本和开发成本。

与上述小程序画布渲染方法对应，本公开实施例还提供了一种小程序画布渲染装置，应用于渲染引擎，如图9所示，包括：

调用单元91，用于调用小程序画布标签的绘制API，以在小程序画布上绘制图形，得到绘制后画布；

存储单元92，用于将绘制后画布存储至预设缓存区中，以使网络浏览器从预设缓存区读取绘制后画布，并在网络浏览器上视频标签所占区域内渲染绘制后画布；

其中，视频标签为嵌入性标签，且视频标签具有画布渲染功能，网络浏览器上视频标签的属性与渲染引擎上小程序画布标签的属性相同。

可选的，上述小程序画布渲染装置还可以包括：

发送单元，用于在小程序画布标签的绘制API之前，通过宿主机，向网络浏览器发送查询请求，查询请求包括小程序画布标签的标识，以使网络浏览器获取与标识匹配的视频标签的属性，并将视频标签的属性返回给渲染引擎；

接收单元，用于接收网络浏览器返回的视频标签的属性；

创建单元，用于在渲染引擎上创建与视频标签的属性匹配的小程序画布标签，小程序画布标签所占区域内渲染与视频标签的属性匹配的小程序画布。

可选的，视频标签的属性包括预设特殊属性，预设特殊属性指示：视频标签用于同层渲染小程序画布。

可选的，渲染引擎通过宿主机与网络浏览器绑定，小程序画布标签运行于渲染引擎的上下文中。

与上述小程序画布渲染方法对应，本公开实施例还提供了一种小程序画布渲染装置，应用于网络浏览器，如图10所示，包括：

读取单元101，用于从预设缓存区读取绘制后画布，绘制后画布为渲染引擎调用小程序画布标签的绘制应用程序接口API，以在小程序画布上绘制图形所得到的画布；

渲染单元102，用于在网络浏览器上视频标签所占区域内渲染绘制后画布；

其中，视频标签为嵌入性标签，且视频标签具有画布渲染功能，网络浏览器上视频标签的属性与渲染引擎上小程序画布标签的属性相同。

可选的，上述小程序画布渲染装置还可以包括：

第一接收单元，用于在从预设缓存区读取绘制后画布之前，接收指示创建小程序画布标签的指令；

创建单元，用于根据指令，在网络浏览器上创建视频标签；

第二接收单元，用于通过宿主机，接收渲染引擎发送查询请求，查询请求包括小程序画布标签的标识；

获取单元，用于获取与标识匹配的视频标签的属性；

返回单元，用于将视频标签的属性返回给渲染引擎。

可选的，创建单元，具体可以用于：

根据指令，在DOM树上插入嵌入标签；

在嵌入标签下创建子DOM树，子DOM树包括视频标签。

可选的，视频标签的属性包括预设特殊属性，预设特殊属性指示：视频标签用于同层渲染小程序画布。

可选的，渲染引擎通过宿主机与网络浏览器绑定，小程序画布标签运行于渲染引擎的上下文中。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图11示出了用来实施本公开实施例的小程序画布渲染方法的电子设备110的第一种框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图11所示，设备110包括计算单元111，其可以根据存储在只读存储器(ROM)112中的计算机程序或者从存储单元118加载到随机访问存储器(RAM)113中的计算机程序，来执行各种适当的动作和处理。在RAM 113中，还可存储设备110操作所需的各种程序和数据。计算单元111、ROM 112以及RAM 113通过总线114彼此相连。输入/输出(I/O)接口115也连接至总线114。

设备110中的多个部件连接至I/O接口115，包括：输入单元116，例如键盘、鼠标等；输出单元117，例如各种类型的显示器、扬声器等；存储单元118，例如磁盘、光盘等；以及通信单元119，例如网卡、调制解调器、无线通信收发机等。通信单元119允许设备110通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元111可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元111的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元111执行上文所描述的各个方法和处理，例如小程序画布渲染方法。例如，在一些实施例中，小程序画布渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元118。在一些实施例中，计算机程序的部分或者全部可以经由ROM 112和/或通信单元119而被载入和/或安装到设备110上。当计算机程序加载到RAM 113并由计算单元111执行时，可以执行上文描述的小程序画布渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元111可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行小程序画布渲染方法。

图12示出了用来实施本公开实施例的小程序画布渲染方法的电子设备的第二种框图，包括：

至少一个处理器121；以及

与至少一个处理器121通信连接的存储器122；其中，

存储器122存储有可被至少一个处理器121执行的指令，指令被至少一个处理器121执行，以使至少一个处理器121能够执行上述应用于渲染引擎的任一小程序画布渲染方法。

图13示出了用来实施本公开实施例的小程序画布渲染方法的电子设备的第三种框图，包括：

至少一个处理器131；以及

与至少一个处理器131通信连接的存储器132；其中，

存储器132存储有可被至少一个处理器131执行的指令，指令被至少一个处理器131执行，以使至少一个处理器131能够执行上述应用于网络浏览器的任一小程序画布渲染方法。

本公开实施例还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行根据上述应用于渲染引擎的任一小程序画布渲染方法。

本公开实施例还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行根据上述应用于网络浏览器的任一小程序画布渲染方法。

本公开实施例还提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据上述应用于渲染引擎的任一小程序画布渲染方法。

本公开实施例还提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据上述应用于网络浏览器的任一小程序画布渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (20)

1.一种小程序画布渲染方法，应用于渲染引擎，包括：

调用小程序画布标签的绘制应用程序接口API，以在所述小程序画布上绘制图形，得到绘制后画布；

将所述绘制后画布存储至预设缓存区中，以使网络浏览器从所述预设缓存区读取所述绘制后画布，并在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

2.根据权利要求1所述的方法，在小程序画布标签的绘制API之前，所述方法还包括：

通过宿主机，向所述网络浏览器发送查询请求，所述查询请求包括所述小程序画布标签的标识，以使所述网络浏览器获取与所述标识匹配的所述视频标签的属性，并将所述视频标签的属性返回给所述渲染引擎；

接收所述网络浏览器返回的所述视频标签的属性；

在所述渲染引擎上创建与所述视频标签的属性匹配的小程序画布标签，所述小程序画布标签所占区域内渲染与所述视频标签的属性匹配的所述小程序画布。

3.根据权利要求1或2所述的方法，其中，所述视频标签的属性包括预设特殊属性，所述预设特殊属性指示：所述视频标签用于同层渲染所述小程序画布。

4.根据权利要求1或2所述的方法，其中，所述渲染引擎通过宿主机与网络浏览器绑定，所述小程序画布标签运行于所述渲染引擎的上下文中。

5.一种小程序画布渲染方法，应用于网络浏览器，包括：

从预设缓存区读取绘制后画布，所述绘制后画布为渲染引擎调用小程序画布标签的绘制应用程序接口API，以在所述小程序画布上绘制图形所得到的画布；

在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

6.根据权利要求5所述的方法，在从预设缓存区读取绘制后画布之前，所述方法还包括：

接收指示创建所述小程序画布标签的指令；

根据所述指令，在所述网络浏览器上创建所述视频标签；

通过宿主机，接收渲染引擎发送查询请求，所述查询请求包括所述小程序画布标签的标识；

获取与所述标识匹配的所述视频标签的属性；

将所述视频标签的属性返回给所述渲染引擎。

7.根据权利要求6所述的方法，所述根据所述指令，在所述网络浏览器上创建所述视频标签的步骤，包括：

根据所述指令，在文档对象模型DOM树上插入嵌入标签；

在嵌入标签下创建子DOM树，所述子DOM树包括所述视频标签。

8.根据权利要求5-7任一项所述的方法，其中，所述视频标签的属性包括预设特殊属性，所述预设特殊属性指示：所述视频标签用于同层渲染所述小程序画布。

9.根据权利要求5-7任一项所述的方法，其中，所述渲染引擎通过宿主机与网络浏览器绑定，所述小程序画布标签运行于所述渲染引擎的上下文中。

10.一种小程序画布渲染装置，应用于渲染引擎，包括：

调用单元，用于调用小程序画布标签的绘制应用程序接口API，以在所述小程序画布上绘制图形，得到绘制后画布；

存储单元，用于将所述绘制后画布存储至预设缓存区中，以使网络浏览器从所述预设缓存区读取所述绘制后画布，并在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

11.根据权利要求10所述的装置，所述装置还包括：

发送单元，用于在小程序画布标签的绘制API之前，通过宿主机，向所述网络浏览器发送查询请求，所述查询请求包括所述小程序画布标签的标识，以使所述网络浏览器获取与所述标识匹配的所述视频标签的属性，并将所述视频标签的属性返回给所述渲染引擎；

接收单元，用于接收所述网络浏览器返回的所述视频标签的属性；

创建单元，用于在所述渲染引擎上创建与所述视频标签的属性匹配的小程序画布标签，所述小程序画布标签所占区域内渲染与所述视频标签的属性匹配的所述小程序画布。

12.根据权利要求10或11所述的装置，其中，所述视频标签的属性包括预设特殊属性，所述预设特殊属性指示：所述视频标签用于同层渲染所述小程序画布。

13.根据权利要求10或11所述的装置，其中，所述渲染引擎通过宿主机与网络浏览器绑定，所述小程序画布标签运行于所述渲染引擎的上下文中。

14.一种小程序画布渲染装置，应用于网络浏览器，包括：

读取单元，用于从预设缓存区读取绘制后画布，所述绘制后画布为渲染引擎调用小程序画布标签的绘制应用程序接口API，以在所述小程序画布上绘制图形所得到的画布；

渲染单元，用于在所述网络浏览器上视频标签所占区域内渲染所述绘制后画布；

其中，所述视频标签为嵌入性标签，且所述视频标签具有画布渲染功能，所述网络浏览器上所述视频标签的属性与所述渲染引擎上所述小程序画布标签的属性相同。

15.根据权利要求14所述的装置，所述装置还包括：

第一接收单元，用于在从预设缓存区读取绘制后画布之前，接收指示创建所述小程序画布标签的指令；

创建单元，用于根据所述指令，在所述网络浏览器上创建所述视频标签；

第二接收单元，用于通过宿主机，接收渲染引擎发送查询请求，所述查询请求包括所述小程序画布标签的标识；

获取单元，用于获取与所述标识匹配的所述视频标签的属性；

返回单元，用于将所述视频标签的属性返回给所述渲染引擎。

16.根据权利要求14-15任一项所述的装置，其中，所述视频标签的属性包括预设特殊属性，所述预设特殊属性指示：所述视频标签用于同层渲染所述小程序画布。

17.根据权利要求14-15任一项所述的装置，其中，所述渲染引擎通过宿主机与网络浏览器绑定，所述小程序画布标签运行于所述渲染引擎的上下文中。

18.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-4或权利要求5-9中任一项所述的方法。

19.一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行根据权利要求1-4或权利要求5-9中任一项所述的方法。

20.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-4或权利要求5-9中任一项所述的方法。

Images