一种跨端渲染方法、系统及电子设备

技术领域

本申请涉及计算机技术领域，具体涉及一种跨端渲染方法。本申请同时涉及一种跨端渲染系统及电子设备。

背景技术

目前，在电商领域将电子图片进行大规模合图的应用比较广泛，其中，合图为将电子图片中的各个图层的原始图像信息进行修改处理，然后修改处理后的各个图层按照顺序合并渲染，获得新的目标图片。

现有技术中，将电子图片进行渲染的过程在两个端之间进行时，经常存在两个端渲染完成的图像存在图像差异，而且两个端对图像渲染的维护成本增加。

因此，如何降低双端同构渲染过程中的图像差异以及维护成本是需要解决的技术问题。

发明内容

本申请实施例提供一种跨端渲染方法，以降低双端同构渲染过程中的图像差异以及维护成本。本申请实施例同时涉及一种跨端渲染系统及电子设备。

本申请实施例提供一种跨端渲染方法，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

可选的，还包括：对所述图像数据进行解析处理，获得解析后的图像协议数据；将所述解析后的图像协议数据发送给相对端。

可选的，所述确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具，包括：通过应用层确定用于渲染所述图像数据的渲染资源；通过画布层确定用于渲染所述图像数据的渲染环境；通过抽象层确定用于渲染所述图像数据的渲染工具。

可选的，所述相对应的底层渲染框架为canvaskit.wasm环境，所述canvaskit.wasm环境包括Skia的渲染逻辑以及API应用接口。

可选的，所述对所述图像数据进行解析处理，获得解析后的图像协议数据，包括：协议层根据预先定义的数据属性和解析规则对所述图像数据进行解析处理，获得解析后的图像协议数据。

可选的，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得目标图像。

可选的，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据进行渲染操作，获得渲染后的多层图像渲染数据；将所述多层图像渲染数据在本端节点上执行渲染上屏操作。

可选的，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得第一中间图像；获得针对所述第一中间图像的更新信息，将所述第一中间图像的更新信息进行协议化处理，获得更新图像协议数据；将所述更新图像协议数据发送给相对端；获得所述相对端对所述更新图像协议数据再次进行解析处理后获得的解析后更新图像协议数据。

可选的，还包括：协议层将所述解析后的图像协议数据发送给本端的应用层；或者，协议层接收本端的应用层导出的渲染数据，将所述导出的渲染数据通过预先定义的数据属性进行打包处理，将打包处理后的渲染数据提供给通讯发送端口。

可选的，所述通过画布层确定用于渲染所述图像数据的渲染环境，包括：通过所述画布层根据所述图像数据解析后的图像协议数据，确定静态画布渲染逻辑以及提供静态画布渲染环境。

可选的，还包括：在所述静态画布渲染环境的基础上，根据所述图像协议数据，确定动态画布渲染逻辑以及提供动态可视化画布渲染环境；基于静态画布种监测到的触发动作，根据触发动作的移动轨迹调整该触发动作对应的画布层的位置。

本申请实施例还提供一种跨端渲染系统，包括：第一端和第二端；所述第一端和所述第二端均包括协议层单元、应用层单元、画布层单元以及抽象层单元；所述协议层单元用于第一端和第二端之间的数据解析，以及定义实现跨端交互的数据属性、解析规则以及拓展规则；所述应用层单元用于实现渲染环境初始化、所需资源加载以及完成渲染后的数据导出；所述画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境；所述抽象层单元用于定义渲染所需的各种功能和方法；其中，所述第一端和所述第二端还包括基于相同底层渲染框架的渲染层单元，用于执行渲染工作。

本申请实施例还提供一种电子设备，所述电子设备包括处理器和存储器；所述存储器中存储有计算机程序，所述处理器运行所述计算机程序后，执行上述方法。

本申请实施例还提供一种计算机存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器运行后，执行上述方法。

与现有技术相比，本申请实施例具有如下优点：

本申请实施例提供一种跨端渲染方法，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

上述方法，接受到图像数据后，确定渲染该图像数据的渲染资源、渲染环境以及渲染工具，采用和相对端相对应的底层渲染框架，根据该渲染资源、渲染环境以及渲染工具，对该图像数据执行渲染工作。本端和相对端采用相对应的底层渲染框架，基于同一份渲染代码，对图像数据进行渲染工作，使得两端获得效果一致的渲染图像。换言之，两端最终获得的渲染图像在两端之间的差异可忽略，降低了双端同步渲染过程中的图像差异以及维护成本。

附图说明

图1为本申请实施例提供的跨端渲染方法的第一应用场景图。

图2为本申请实施例提供的跨端渲染方法的第二应用场景图。

图3为本申请第一实施例提供的一种跨端渲染方法的流程图。

图4为本申请第二实施例提供的一种跨端渲染系统的逻辑框架图。

图5为本申请第三实施例提供的一种跨端渲染装置的示意图。

图6为本申请第四实施例提供的一种电子设备的示意图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

本申请中使用的术语是仅仅出于对特定实施例描述的目的，而非旨在限制本申请。在本申请中和所附权利要求书中所使用的描述方式例如：“一种”、“第一”、和“第二”等，并非对数量上的限定或先后顺序上的限定，而是用来将同一类型的信息彼此区分。

本申请实施例提供一种跨端渲染方法，以降低双端同构渲染过程中的图像差异以及维护成本。本申请实施例同时涉及一种跨端渲染系统及电子设备。

首先，对本申请实施例中涉及的概念进行说明：

同构渲染：是指在不同端(例如客户端和服务端)基于相同代码，对待渲染数据执行渲染操作，获得相同的渲染效果，也称为跨端同构渲染。本实施例中，以客户端和服务端为例，并使用JavaScript脚本语言实现的图像渲染框架来实现同构渲染。

Wasm(WebAssembly)：是一种虚拟指令集体系架构，整体架构包括核心的ISA定义、二进制编码、程序语义的定义与执行，以及面向不同的嵌入环境的应用编程接口(WebAssembly API)。Wasm可以在客户端运行，与JavaScript可以并存。

Json：(JavaScript Object Notation，JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(European Computer Manufacturers Association，欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

为了便于理解本申请实施例提供的跨端渲染方法及系统，在介绍本申请实施例之前，先对本申请实施例的背景进行介绍。

目前，在电商领域将电子图片进行大规模合图的应用比较广泛，其中，合图为将电子图片中的各个图层的原始图像信息进行修改处理，然后修改处理后的各个图层按照顺序合并渲染，获得新的目标图片。

现有技术中，将电子图片进行渲染的过程在两个端之间进行时，经常存在两个端渲染完成的图像存在图像差异，而且两个端对图像渲染的维护成本增加。

例如，两个端可以为客户端和服务器端，在客户端进行图像渲染，通常采用fabric.js等基于浏览器原生canvas的图层渲染框架，而服务器端的图像渲染通常采用类似node-canvas等开源版本的类canvas库实现渲染框架。因此，客户端和服务器端采用不同的渲染框架，使得渲染得到的图像存在容易被用户察觉的差异，另外，两个端采用两种渲染框架，在后期的渲染框架维护阶段也会增加维护成本。

因此，如何降低双端同构渲染过程中的图像差异以及维护成本是需要解决的技术问题。

本领域技术人员可以了解现有技术存在的问题，接下来对本申请实施例提供的跨端渲染方法的应用场景进行详细说明。首先对本申请实施例提供的跨端渲染方法的应用场景进行详细说明。该跨端渲染方法可以应用于电商领域对电子图像进行大规模合图过程中的应用场景。

例如，获取一段图像数据，将这个图像数据分别在浏览器端或服务器端进行解析处理后，将解析后的图像协议数据发送给相对端。然后，两个端根据解析后的图像协议数据进行图像渲染处理，最终，浏览器端节点展示的渲染后的图像与服务器端渲染合成的图像是一致的，从用户的视觉角度来看没有差别，体现了跨端同构渲染图像的一致性。因为，本申请提供的跨端渲染方法依据跨端渲染系统，在两个端之间采用相同的渲染逻辑，具体是在渲染层采用相同底层渲染框架，也就是canvaskit.wasm(canvaskit.wasm：在浏览器中直接使用skia的能力渲染sketch文件；Sketch是一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正)环境，其包括Skia(skia是个2D向量图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现)的渲染逻辑以及API(Application Programming Interface，应用程序接口)应用接口，在所述第一端和所述第二端同时运行，对待渲染图像数据进行渲染处理，获得相同的渲染结果。此外，第一端和第二端的协议层单元，应用层单元，画布层单元以及抽象层单元采用相同的渲染逻辑在渲染过程中提供各自的功能。

再例如，获取一段图像协议数据，将图像的原始文本信息替换为原始文本信息对应的译文文本信息，将译文文本信息渲染到图像中，获得目标图像，此过程为合图过程。针对大规模电子图片，为了获取每个电子图片的多种不同译文文本的图像，以及提升多个电子图片的合图效率，本申请实施例采用跨端渲染方法处理图像的合图过程。

请参考图1，其为本申请实施例提供的跨端渲染方法的第一应用场景图。

图1描述了采用跨端渲染方法对图像进行合图处理的多种应用场景。在图1中，首先将商品的图片信息转换为Json协议数据，具体是，通过算法工程提取图片信息，图片信息包括图片的url(Uniform Resource Locator，统一资源定位器)，尺寸信息，图片包含的文本信息以及文本信息分布的区域等。其中，图片的url表示图片资源在互联网上的标准网络地址。

通过算法工程提取图片信息，例如，自定义图片信息的属性，获取图片信息中的分类信息，例如，尺码图或者文本信息图，通过OCR(Optical Character Recognition，文字识别)技术识别图片的文本区域及以及文本区域中的文字信息。

在获取图片的图片信息后，此处主要是获取图片的文本信息，将文本信息进行翻译处理，获得文本信息的译文文本信息。将图片的原始文本信息和与原始文本信息对应的译文文本信息进行格式化处理，获得图片的Json协议数据。

将Json协议数据至少通过如下三种应用方式获得包含译文文本的目标合图。

第一种，将Json协议数据作为浏览器端(也称为客户端)的入参信息，浏览器端对Json协议数据进行解析处理，获得图像的url，尺寸信息，图片包含的文本信息以及文本信息对应的译文文本信息。

然后，浏览器端对译文文本信息进行修改处理，编辑或者纠正译文中的错位信息，将修改后的信息发送给服务器端，作为服务器端进行合图的入参信息。同时将修改后的信息提供给浏览器端的应用层单元，由应用层单元提供渲染图像的译文文本信息所需的渲染资源。

服务器端获取入参信息后，将译文文本信息和图像进行合图处理，具体是采用本申请实施例提供的跨端渲染系统进行合图处理，获得目标图片，目标图片的文本信息为与原始图片的文本信息对应的译文文本信息。

浏览器端和服务器端分别通过协议层单元，应用层单元，画布层单元，抽象层单元以及渲染层单元，采用相同的渲染逻辑，将译文文本信息渲染到虚拟图像中进行渲染处理。最终，浏览器端节点上展示的渲染后的图像信息与服务器端合成的目标图像的信息之间的差异是可以被忽略的。

第二种，将Json协议数据作为服务器端的入参信息，服务器端对图片的Json协议数据进行解析处理，其中，服务器端的解析采用的处理逻辑与浏览器端采用相同的处理逻辑。然后，根据解析后的数据进行合图处理，获得目标图片。

第三种，将Json协议数据作为服务器端的入参信息，服务器端对Json协议数据进行解析处理，然后根据解析获得的译文文本信息进行合图处理，获得中间图片。根据原始图片和中间图片的对比，对中间图片增加更新或者补充信息，将更新或者补充信息转换为中间Json协议数据，发送给浏览器端。浏览器端对中间Json协议数据进行编辑处理，将编辑后的中间Json协议数据发送给服务器端，服务器端根据中间图片和修改后的中间Json协议数据，进行合图处理，获得目标图片。

其中，上述三种应用方式中，浏览器端和服务器端采用相同的渲染逻辑框架，使得合图获得的目标图片与原始图片之间存在区别的是文本区域，其余部分的差异可忽略。目标图片的文本信息为与原始图片的文本信息对应的译文文本信息。而且，浏览器端上展示的渲染后的图像信息与服务器端合成的目标图像是一致的，在用户的视觉感官上来说，两者之间是无差别的。

请参考图2，其为本申请实施例提供的跨端渲染方法的第二应用场景图。

在图2中，跨端渲染方法是以本申请提供的跨端渲染系统在浏览器端和服务器端对一份图像协议数据同时进行渲染处理，使得浏览器端上展示的渲染后的图像信息与服务器端合图的目标图像之间的差异对于用户视觉上来说是无差别的。以下具体描述跨端渲染系统的逻辑框架。

跨端渲染系统包括浏览器端和服务器端，浏览器端和服务器端均包括：协议层，应用层，画布层，抽象层。

协议层用于浏览器端和服务器端之间的数据解析，以及定义实现跨端交互的数据属性、解析规则以及拓展规则。

在图2中，协议层包括Json协议，数据结构，字段定义，解析规则以及扩展规则。

浏览器端的协议层和服务器端的协议层中的任意一端的协议层，具体用于接收相对端的协议层发送的图像协议数据，根据所定义的数据属性和解析规则进行解析处理，并将解析的图像数据协议数据解析结果提供给本端的应用层；还用于将应用层导出的渲染数据通过协议层按照所定义的数据属性进行打包处理，将打包处理后的数据提供给通讯发送端口。

应用层用于实现渲染环境初始化、所需资源加载以及完成渲染后的数据导出；具体是，根据接收到的图像协议数据解析结果，确定所述图像协议解析结果中所需要的渲染资源，加载所述渲染资源。其中浏览器端和服务器端加载渲染资源分别使用各种的加载器及软件工具开发包。浏览器端的应用层采用Web-SDK(浏览器软件工具开发包，SDK(Software Development Kit，软件工具开发包)，服务器端的应用层采用Node-SDK(Node，服务器端JavaScript解释器)。

其中，软件工具开发包是软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。

JavaScript(简称为JS)，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

画布层用于定义画布渲染逻辑以及提供可视化画布渲染环境。

在图2中，画布层包括静态画布(StaticCanvas)和可交互画布(InteractCanvas)。静态画布包括如下至少一种信息：图层，滤镜，画笔。可交互画布包括如下至少一种信息：事件，控制器以及动画。

浏览器端的画布层可以渲染静态画布和可交互画布。渲染静态画布中，画布层定义了静态画布渲染逻辑以及提供静态画布渲染环境，根据浏览器端的应用层单元提供的渲染方法，从抽象层单元提取每层图像渲染所需的渲染工具。

浏览器端的画布层渲染可交互画布时，在静态画布的基础上，定义动态画布渲染逻辑以及提供动态可视化画布渲染环境；基于静态画布中监测到的出发事件，根据触发动作的移动轨迹动态调整该触发动作对应的画布图层的位置，将调整后的画布图层的位置信息在浏览器端节点上展示。

抽象层用于定义渲染所需的各种功能和方法。抽象层具体用于抽象出各种图形渲染工具，具体定义画布层所需的图形渲染工具的图形定义和逻辑基类。图形定义包括如下至少一种定义信息：图像，文本，方形，线，点。逻辑基类包括如下至少一种定义信息：对象，底层画布，几何形状，混入，实用工具。

其中，浏览器端和服务器端还包括基于相同底层渲染框架的渲染层，用于执行渲染工作。

渲染层在画布层中的虚拟画布中为每层图形进行渲染操作；浏览器端的渲染层将渲染完成的数据在浏览器端节点上渲染上屏；服务器端的渲染层将渲染完成的数据导出图片，获得渲染后的图片文件。

渲染层包括底层依赖框架和API。其中，底层依赖框架是以Skia(cpp)为底层渲染逻辑框架，build(结合)canvaskit.wasm，wasm是一种可以同时在浏览器端和服务器端运行的架构。

Skia是一个C++的开源2D向量图形处理函数库(Cairo是一个矢量库)，包括字型、坐标转换、位图等等，相当于轻量级的Cairo，Skia搭配OpenGL/ES与特定的硬件特征，强化显示的效果。OpenGL/ES(OpenGL for Embedded Systems)是OpenGL三维图形应用程序编程接口的子集，针对手机、平板和游戏主机等嵌入式设备而设计。

以上即为图2所示的跨端渲染系统的基本框架介绍。以下描述采用本申请提供的跨端渲染方法将原始图像进行合图的过程。此处以原始图像的图像数据作为入参数据，原始图像的图像数据可以称为第一图像的图像数据，将第一图像的原始文本信息采用原始文本信息对应的译文文本信息进行替换渲染处理后获得的图像为第二图像。其中，第一图像和第二图像中均包含多个图层，合图过程中，将第一图像的每个图层进行合图处理，具体是将每个图层中的译文文本信息渲染到对应图层中，然后将每个渲染后的图层进行合图处理。

第一步：浏览器端的协议层获得一段图像数据，该图像数据可以是Json协议数据，获取Json协议数据中描述的第一图像的URL，第一图像包含的区域信息以及每个区域的原始文本信息，每个区域的尺寸信息，与原始文本信息对应的译文文本信息。根据第一图像的Json协议数据，确定需要渲染处理的译文文本信息。浏览器端将第一图像的Json协议数据进行解析处理，具体是，如果需要对Json协议数据进行编辑或者修改处理，则将编辑或者修改处理后的第一图像的Json协议数据发送给服务器端的协议层。

第二步：浏览器端的应用层获得协议层发送的第一图像的Json协议数据，采用浏览器端的下载器，在浏览器端加载第一图像，根据第一图像中需要进行渲染处理的译文文本信息，获取渲染该译文文本信息的渲染资源。根据渲染资源和译文文本信息，开始渲染过程。

第三步：浏览器端的画布层按照第一图像的尺寸信息构建虚拟底层画布，根据协议层中第一图像的Json协议数据，确定第一图像包含的图层数量。按照第一图像的图层依次构建每层图层，在构建每层图层的过程中，将图层中包含文本信息的位置，使用译文文本信息渲染到对应图层中。具体的，将第一图像划分为包含多个文本信息的区域，在每个区域中，将第一图像的原始图片的背景颜色和文字颜色提取，将第一图像的第一区域的文字对应的译文，按照第一区域中文字对应的尺寸信息以及布局信息，布局到虚拟画布中。以此类推，将第一图像的所有区域的文本信息对应的译文文本信息添加到第一图像的对应图层中。此过程为静态画布构建过程，浏览器端将静态画布在浏览器端的节点上进行展示，并将静态画布信息提供给服务器端，服务器端根据浏览器端提供的静态画布信息，进行合图处理，获得目标合图。

此外，浏览器端的画布层还可以构建可交互画布，具体如下：

静态画布位于浏览器端的canvaskit.wasm节点上，在静态画布的基础上，监听静态画布中触发动作以及动作的影响范围。遍历画布上图层的位置以及各个图层之间的交叉关系，确定鼠标触发了哪个图层。

以按压操作为例进行介绍，按压操作包括鼠标按动操作，鼠标拖拽操作以及鼠标松开操作。监听到鼠标按压操作后，根据坐标位置确定鼠标的按压操作对应的图层，该过程中，鼠标的按压操作及拖拽操作使得鼠标发生位移，相应的，鼠标按压的图层的位置随着鼠标的位移而发生移动。根据鼠标的移动轨迹确定图层的移动，计算鼠标停止移动时，图层的最终位置。当监听到鼠标的松开操作，表示此次鼠标停止了移动，因此，可以根据鼠标的移动位置确定图层的最终位置。上述过程即为浏览器端的画布层构建的可交互画布。

其中，浏览器端的画布层和服务器端的画布层采用相同的静态渲染逻辑以及提供可视化静态画布渲染环境。浏览器端的画布层还可以构建可交互画布，服务器端的画布层不能构建可交互画布。

第四步：浏览器端的抽象层为画布层的各个图层的渲染提供基础工具。

第五步：浏览器端的渲染层与服务器端采用相对应的底层渲染框架，基于该图像协议数据确定的渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

本步骤中，浏览器端的渲染层与服务器端采用相对应的底层渲染框架，对图像协议数据采用上述步骤确定的渲染资源，渲染环境以及渲染工具进行渲染处理。其中，浏览器端和服务器端采用相对应的底层渲染框架，其相对应的底层渲染框架包括本端和相对端采用相同的底层渲染框架，还可以包括本端和相对端采用的底层渲染框架包括部分相同的功能模块或者部分相同层，以及其他不同的操作模块。

例如，浏览器端与服务器端采用的相对应的底层渲染框架为canvaskit.wasm环境，所述canvaskit.wasm环境包括Skia的渲染逻辑以及API应用接口。

在canvaskit.wasm环境中可以保证浏览器端渲染后的图像信息与服务器端渲染得到的目标图像是一致的，两者之间的差异性对于用户视角来说是无差别的。

以上即为本申请提供的跨端渲染方法在浏览器端进行渲染处理的过程，浏览器端采用本申请提供的跨端渲染系统将译文文本信息渲染到各个图层，将各个图层进行合并渲染，最终在浏览器端节点上展示合并渲染后的数据信息。此外，服务器端的各个层采用与浏览器端相同的逻辑。上述以根据一段图像Json协议数据，将译文文本信息替换原始文本信息，渲染到图像中的应用场景的描述，具体是，渲染完成的第二图像中包含的文本信息为第一图像的原始文本信息对应的译文文本信息，两者除了文本信息为译文对应形式外，其余内容展示上没有差异。

此外，跨端渲染方法以及跨端渲染系统还可以应用于其他应用场景，例如，获取一段图像协议数据中包含原始图像的图像信息以及渲染后的图像中的图像信息，渲染后的图像信息是将原始图像的图像信息进行颜色字体的变换，修改字体大小等等。

本申请实施例提供一种跨端渲染方法，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

上述方法，接受到图像数据后，确定渲染该图像数据的渲染资源、渲染环境以及渲染工具，采用和相对端相对应的底层渲染框架，根据该渲染资源、渲染环境以及渲染工具，对该图像数据执行渲染工作。本端和相对端采用相对应的底层渲染框架，基于同一份渲染代码，对图像数据进行渲染工作，使得两端获得效果一致的渲染图像。换言之，两端最终获得的渲染图像在两端之间的差异可忽略，降低了双端同步渲染过程中的图像差异以及维护成本。

本申请实施例提供一种跨端渲染系统，包括：第一端和第二端；所述第一端和所述第二端均包括协议层单元、应用层单元、画布层单元以及抽象层单元；所述协议层单元用于第一端和第二端之间的数据解析，以及定义实现跨端交互的数据属性、解析规则以及拓展规则；所述应用层单元用于实现渲染环境初始化、所需资源加载以及完成渲染后的数据导出；所述画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境；所述抽象层单元用于定义渲染所需的各种功能和方法；其中，所述第一端和所述第二端还包括基于相同底层渲染框架的渲染层单元，用于执行渲染工作。

上述系统，第一端和第二端包括基于相同底层渲染框架的渲染层单元，协议层单元，应用层单元，画布层单元以及抽象层单元。以渲染层单元的相同底层渲染框架为基础实现效果一致的渲染图像。协议层单元，应用层单元，画布层单元，以及抽象层单元在第一端和第二端之间采用同样的逻辑代码，实现第一端和第二端的双端同构渲染方式。具体的，协议层单元用于将数据进行解析，并将解析后的数据在第一端和第二端之间进行交互传递。应用层单元具体为协议层单元提供的协议数据实现渲染环境初始化、加载渲染所需的渲染资源，以及将完成渲染后的数据导出。画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境。抽象层单元抽象渲染所需的各种功能和方法。在协议层单元，应用层单元，画布层单元以及抽象层单元分别采用相同的逻辑处理图像渲染中的各步骤，使得最终获得的渲染图像在两端之间的差异可忽略，降低了双端同构渲染过程中的图像差异以及维护成本。

第一实施例

图3为本申请第一实施例提供的一种跨端渲染方法的流程图。以下结合图3对本实施例提供的跨端渲染方法进行详细描述。其中，第一实施例提供的跨端渲染方法的具体描述过程可以参考上述场景实施例的描述。图3所示的跨端渲染方法包含步骤S301-S303。

如图3所示，在步骤S301中，接收图像数据。

本步骤用于接收图像数据，接收图像数据可以是浏览器端或者客户端，也可以是服务器端。接收的图像数据包括图像本身的数据，例如文本数据以及图像数据，也可以包括期望对图像进行渲染处理后获得的渲染后信息。如图1所示，图像自身包含商品信息，目的是将图像重新进行渲染处理，使得渲染后的图像上包含的是商品信息对应的译文文本信息。

因此，此处获取的图像数据包含图像自身的信息以及目标渲染信息。

本步骤中获得图像数据后，需要对图像数据进行解析处理，具体例如，进行格式化处理，获得图像的Json协议数据。

因此，本步骤S301接收到图像数据后，还包括：对所述图像数据进行解析处理，获得解析后的图像协议数据；将所述解析后的图像协议数据发送给相对端。

如图1所示，浏览器端接收到图像数据后，对图像数据进行解析处理，具体的解析方式可以包含如下方式：

所述对所述图像数据进行解析处理，获得解析后的图像协议数据，包括：协议层根据预先定义的数据属性和解析规则对所述图像数据进行解析处理，获得解析后的图像协议数据。

例如，将图像数据按照Json协议数据形式进行格式化处理，获得的图像数据的Json格式数据，然后，浏览器端根据图像数据的Json格式数据进行编辑处理或者修改处理，获得图像解析后的Json格式数据。将解析后的图像协议数据发送给服务器端。然后，浏览器端和服务器端分别根据同一份图像协议数据，确定渲染资源，渲染环境，渲染工具，采用相同的渲染底层框架，对图像协议数据进行渲染处理，获得渲染后的图像信息或者合图处理得到目标图像。

上述描述的是图像数据作为浏览器端的入参数据，浏览器端接收到图像数据，对图像数据进行解析处理获得图像协议数据并发送给服务器端的应用方式。其还包括第二种应用方式，如图1所示，图像数据作为服务器端的入参数据，服务器端获得图像数据，进行解析处理获得图像协议数据，发送给浏览器端。然后，服务器端对图像协议数据按照上述跨端渲染系统提供的方法进行渲染处理，得到合图后的目标图像。浏览器端根据图像协议数据，采用与服务器端相同的渲染逻辑进行渲染处理，在浏览器端节点上展示渲染后的图像信息。

另外还包括第三种应用方式，如图1所示，图像数据作为服务器端的入参数据，服务器端对图像数据进行解析后获得图像协议数据，根据图像协议数据进行渲染处理，得到第一中间图像，获得第一中间图像的更新信息。将第一中间图像的更新信息进行协议化处理，获得更新信息的Json格式数据，并发送给浏览器端。浏览器端对更新信息的Json格式数据进行解析处理，包括编辑处理或者修改处理，将编辑或者修改处理后的更新信息发送给服务器端。然后，浏览器端和服务器端同时采用相同的渲染底层框架，根据更新信息对应的渲染资源，渲染环境和渲染资源，对更新信息进行渲染处理。

上述即为图像数据分别作为浏览器端和服务器端的入参数据后，进行渲染处理的应用场景。

其中，上述将图像数据解析处理获得图像的Json格式数据为浏览器端的协议层或者服务器端的协议层处理获得的，具体如下：

所述对所述图像数据进行解析处理，获得解析后的图像协议数据，包括：协议层根据预先定义的数据属性和解析规则对所述图像数据进行解析处理，获得解析后的图像协议数据。

协议层对图像数据进行解析处理后，还包括：协议层将所述解析后的图像协议数据发送给本端的应用层；或者，协议层接收本端的应用层导出的渲染数据，将所述导出的渲染数据通过预先定义的数据属性进行打包处理，将打包处理后的渲染数据提供给通讯发送端口。

如图3所示，在步骤S302中，确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具。

本步骤用于根据图像数据确定用于渲染图像数据的渲染资源、渲染环境以及渲染工具。具体是根据本申请提供的跨端渲染系统的各个层确定渲染资源、渲染环境和渲染工具。具体如下：

所述确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具，包括：通过应用层确定用于渲染所述图像数据的渲染资源；通过画布层确定用于渲染所述图像数据的渲染环境；通过抽象层确定用于渲染所述图像数据的渲染工具。

跨端渲染系统的应用层根据图像协议数据，采用下载器下载渲染该图像协议数据所需的渲染资源。画布层用于定义画布渲染逻辑以及构建画布渲染环境，根据图像协议数据，确定该图像协议数据所需的画布渲染逻辑以及画布渲染环境。

其中，画布层确定图像协议数据对应的渲染环境，可以包括如下具体方式：

所述通过画布层确定用于渲染所述图像数据的渲染环境，包括：

通过所述画布层根据所述图像数据解析后的图像协议数据，确定静态画布渲染逻辑以及提供静态画布渲染环境。

浏览器端或者服务器端均可以对图像协议数据确定静态画布环境。

另外，浏览器端除了定义静态画布渲染环境外，还可以定义动态画布渲染环境：

在所述静态画布渲染环境的基础上，根据所述图像协议数据，确定动态画布渲染逻辑以及提供动态可视化画布渲染环境；基于静态画布种监测到的触发动作，根据触发动作的移动轨迹调整该触发动作对应的画布层的位置。

抽象层包含渲染所需的各种基础工具，根据图像协议数据确定该图像协议数据渲染过程中所需的渲染工具。

如图3所示，在步骤S303中，采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

本步骤用于对图像协议数据采用上述步骤确定的渲染资源，渲染环境以及渲染工具进行渲染处理。其中，渲染采用的是和相对端相对应的底层渲染框架，其相对应的底层渲染框架包括本端和相对端采用相同的底层渲染框架，还可以包括本端和相对端采用的底层渲染框架包括部分相同的功能模块或者部分相同层，以及其他不同的操作模块。

本申请构建的跨端渲染方法采用的相对应的底层渲染框架为canvaskit.wasm环境，所述canvaskit.wasm环境包括Skia的渲染逻辑以及API应用接口。

在canvaskit.wasm环境中可以保证浏览器端渲染后的图像信息与服务器端渲染得到的目标图像是一致的，两者之间的差异性对于用户视角来说是无差别的。

浏览器端和服务器端具体获得的渲染结果分别如下：

在浏览器端：所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：

采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据进行渲染操作，获得渲染后的多层图像渲染数据；将所述多层图像渲染数据在本端节点上执行渲染上屏操作。

在浏览器端，采用跨端渲染方法对图像协议数据进行渲染处理，是在浏览器端节点上逐步将图像信息进行渲染上屏操作，最终将每个图层的数据分布渲染上屏后，显示于屏幕中，供用户浏览最终的渲染结果。

在服务器端：所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，可以通过如下方法：

采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得目标图像。

服务器端根据上述跨端渲染系统，对图像协议数据可以进行合图处理，并最终获得目标图像。

其中，服务器端对图像协议数据进行渲染处理，还包括如下一种渲染方式：

所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：

采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得第一中间图像；获得针对所述第一中间图像的更新信息，将所述第一中间图像的更新信息进行协议化处理，获得更新图像协议数据；将所述更新图像协议数据发送给相对端；获得所述相对端对所述更新图像协议数据再次进行解析处理后获得的解析后更新图像协议数据。

如图1所示，图像数据作为服务器端的入参数据，服务器端对图像数据解析处理获得图像协议数据，根据图像协议数据进行渲染处理，获得第一中间图像。然后，获得第一中间图像的更新信息，发送给浏览器端。浏览器端对更新信息进行解析处理，包括编辑处理或者修改处理，将编辑或者修改处理后的更新信息发送给服务器端。然后，浏览器端和服务器端采用相对应的底层渲染框架，对该编辑或者修改处理的更新信息进行渲染处理，获得效果一致的渲染图像信息或者目标图像。

本申请实施例提供一种跨端渲染方法，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

上述方法，接受到图像数据后，确定渲染该图像数据的渲染资源、渲染环境以及渲染工具，采用和相对端相对应的底层渲染框架，根据该渲染资源、渲染环境以及渲染工具，对该图像数据执行渲染工作。本端和相对端采用相对应的底层渲染框架，基于同一份渲染代码，对图像数据进行渲染工作，使得两端获得效果一致的渲染图像。换言之，两端最终获得的渲染图像在两端之间的差异可忽略，降低了双端同构渲染过程中的图像差异以及维护成本。

第二实施例

图4为本申请第二实施例提供的一种跨端渲染系统的逻辑框架图。第一实施例中的跨端渲染方法采用的是第二实施例提供的跨端渲染系统对图像数据进行渲染处理的。以下结合图4对跨端渲染系统的逻辑框架图进行详细描述，其中，关于浏览器端和服务器端的各个层的具体渲染方式也可以参考场景实施例和方法实施例的描述。

图4中的跨端渲染系统400包括第一端401和第二端402。所述第一端和所述第二端均包括协议层单元、应用层单元、画布层单元以及抽象层单元。第一端401包括第一协议层单元401-1、第一应用层单元401-2、第一画布层单元401-3、第一抽象层单元401-4以及第一渲染层单元401-5。第二端402包括第二协议层单元402-1、第二应用层单元402-2、第二画布层单元402-3、第二抽象层单元402-4以及第二渲染层单元402-5。

所述协议层单元用于第一端和第二端之间的数据解析，以及定义实现跨端交互的数据属性、解析规则以及拓展规则；所述应用层单元用于实现渲染环境初始化、所需资源加载以及完成渲染后的数据导出；所述画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境；所述抽象层单元用于定义渲染所需的各种功能和方法；其中，所述第一端和所述第二端还包括基于相同底层渲染框架的渲染层单元，用于执行渲染工作。

所述第一端的第一协议层单元和所述第二端的第二协议层单元中的任意一端的协议层单元具体用于接收相对端的协议层单元发送的图像协议数据，根据所定义的数据属性和解析规则进行解析处理，并将解析的图像协议数据解析结果提供给本端的应用层单元；或者将应用层导出的渲染数据通过所述协议层单元按照所定义的数据属性进行打包处理，将打包处理后的数据提供给通讯发送端口。

如图4所示，第一协议层单元401-1接收第二协议层单元402-1发送的图像协议数据，根据所定义的数据属性和解析规则进行解析处理，并将解析的图像协议数据解析结果提供给第一应用层单元401-2；或者，将第一应用层单元401-2导出的渲染数据通过第一协议层单元401-1按照所定义的数据属性进行打包处理，将打包处理后的数据提供给通讯发送端口。通过该通讯发送端口可以向第一端的其他层发送数据，也可以向第二端的第一协议层单元401-1发送打包处理后的数据。

相应的，第二协议层单元402-1接收第一协议层单元401-1发送的图像协议数据，根据所定义的数据属性和解析规则进行解析处理，并将解析的图像协议数据解析结果提供给第二应用层单元402-2；或者，将第二应用层单元402-2导出的渲染数据通过第二协议层单元402-1按照所定义的数据属性进行打包处理，将打包处理后的数据提供给通讯发送端口。通过该通讯发送端口可以向第二端的其他层发送数据，也可以向第一协议层单元发送打包处理后的数据。

所述协议层单元采用的协议规则为Json协议。

例如，接收到的图像协议数据为一段图像Json协议数据，解析该图像Json协议数据，获得图像的原始文本信息以及与所述原始文本信息对应的译文文本信息。目的是将译文文本信息替换原始文本信息，渲染目标图像，使得目标图像的文本信息为原始图像的原始文本信息对应的译文文本信息。上述例子在协议层中，任意一端的协议层单元用于根据所定义的数据属性和解析规则对图像Json协议数据进行解析处理，解析获得的解析协议数据包括图像的原始文本信息以及与所述原始文本信息对应的译文文本信息。将图像的原始文本信息以及与所述原始文本信息对应的译文文本信息提供给本端的应用层单元。

所述应用层单元具体用于根据接收到的图像协议数据解析结果，确定所述图像协议数据解析结果中所需要的渲染资源，加载所述渲染资源。

继续结合上述例子，所述第一端的第一应用层单元401-2具体用于根据所述图像的原始文本信息以及与所述译文文本信息，获取用于渲染所述译文文本信息的渲染资源。所述第二端的第二应用层单元402-2具体用于接收第二端的第二协议层单元根据所述图像的原始文本信息以及与所述译文文本信息，获取用于渲染所述译文文本信息的渲染资源。

所述第一端的画布层单元具体用于定义静态画布渲染逻辑以及提供静态画布渲染环境，根据第一端的应用层单元提供的渲染方法，从所述第一端的抽象层单元提取每层图像渲染所需的渲染工具；所述第二端的画布层单元具体用于定义静态画布渲染逻辑以及提供静态画布渲染环境，根据第二端的应用层单元提供的渲染方法，从第二端的抽象层单元提取每层图像渲染所需的渲染工具。

所述第一端和所述第二端分别为客户端，浏览器端，或者服务器端。

第一端和第二端的协议层，应用层，画布层以及抽象层采用相同的渲染逻辑，因此，第一端渲染的图像展示信息与第二端渲染的图像展示信息是一致的。

如果第一端为客户端或者浏览器端，第二端为服务器端，则所述第一端的第一画布层单元401-3还用于在静态画布渲染环境的基础上，定义动态画布渲染逻辑以及提供动态可视化画布渲染环境；基于静态画布中监测到的触发动作，根据触发动作的移动轨迹动态调整该触发动作对应的画布图层的位置；将调整后的画布图层的位置信息在第一端节点上展示。

所述抽象层单元具体用于抽象出各种图形渲染工具，定义画布层所需的图形渲染工具的图形定义和逻辑基类，所述图形定义包括多个图形子类的定义以及实现图形子类的实现方法；所述逻辑基类包括多个逻辑子基类以及实现所述逻辑子基类的实现方法；为所述画布层单元提供所需的图形渲染工具。

第一端的第一抽象层单元和第二端的第二抽象层单元采用相同的渲染逻辑。因此，抽象层单元在第一端和第二端的渲染过程中，均为对应的画布层单元提供渲染所需的各种渲染工具。

所述渲染层单元具体用于在所述画布层单元中的虚拟画布中为每层图形进行渲染操作；所述第一端的渲染层单元还具体用于将渲染完成的数据在第一端的节点上渲染上屏；所述第二端的渲染层单元还具体用于将渲染完成的数据导出图片，获得渲染后的图片文件。

第一端为浏览器端或者客户端，第二端为服务器端时，浏览器端渲染的图像不能合成图片，是将渲染的图像在浏览器端节点上展示。服务器端对各个图层进行渲染后处理，将各个图层进行合图，形成目标图片，存储于服务器端。

所述相同底层渲染框架为canvaskit.wasm环境，所述canvaskit.wasm环境包括Skia的渲染逻辑以及API应用接口，在所述第一端和所述第二端同时运行。

以下描述采用本申请提供的跨端渲染系统将原始图像进行合图的过程。以第一端为浏览器端，第二端为服务器端为例进行说明。此处以原始图像的Json协议数据为入参数据，原始图像的Json协议数据可以称为第一图像的Json协议数据，将第一图像的原始文本信息采用原始文本信息对应的译文文本信息进行替换渲染处理后获得的图像为第二图像。其中，第一图像和第二图像中均包含多个图层，合图过程中，将第一图像的每个图层进行合图处理，具体是将每个图层中的译文文本信息渲染到对应图层中，然后将每个渲染后的图层进行合图处理。

第一步：浏览器端的协议层获得一段Json协议数据，根据Json协议数据，获取Json协议数据中描述的第一图像的URL，第一图像包含的区域信息以及每个区域的原始文本信息，每个区域的尺寸信息，与原始文本信息对应的译文文本信息。根据第一图像的Json协议数据，确定需要渲染处理的译文文本信息。

第二步：浏览器端的应用层采用浏览器端的下载器，在浏览器端加载第一图像，根据第一图像中需要进行渲染处理的译文文本信息，获取渲染该译文文本信息的渲染资源。根据渲染资源和译文文本信息，开始渲染过程。

第三步：浏览器端的画布层按照第一图像的尺寸信息构建虚拟底层画布，根据协议层中第一图像的Json协议数据，确定第一图像包含的图层数量。按照第一图像的图层依次构建每层图层，在构建每层图层的过程中，将图层中包含文本信息的位置，使用译文文本信息渲染到对应图层中。具体的，将第一图像划分为包含多个文本信息的区域，在每个区域中，将第一图像的原始图片的背景颜色和文字颜色提取，将第一图像的第一区域的文字对应的译文，按照第一区域中文字对应的尺寸信息以及布局信息，布局到虚拟画布中。以此类推，将第一图像的所有区域的文本信息对应的译文文本信息添加到第一图像的对应图层中。此过程为静态画布构建过程，浏览器端将静态画布在浏览器端的节点上进行展示，并将静态画布信息提供给服务器端，服务器端根据浏览器端提供的静态画布信息，进行合图处理，获得目标合图。

此外，浏览器端的画布层还可以构建可交互画布，具体如下：

静态画布位于浏览器端的canvaskit.wasm节点上，在静态画布的基础上，监听静态画布中触发动作以及触发动作的影响范围。遍历画布上图层的位置以及各个图层之间的交叉关系，确定鼠标触发了哪个图层。

以按压操作为例进行介绍，按压操作包括鼠标按动操作，鼠标拖拽操作以及鼠标松开操作。监听到鼠标按压操作后，根据坐标位置确定鼠标的按压操作对应的图层，该过程中，鼠标的按压操作及拖拽操作使得鼠标发生位移，相应的，鼠标按压的图层的位置随着鼠标的位移而发生移动。根据鼠标的移动轨迹确定图层的移动，计算鼠标停止移动时，图层的最终位置。当监听到鼠标的松开操作，表示此次鼠标停止了移动，因此，可以根据鼠标的移动位置确定图层的最终位置。上述过程即为浏览器端的画布层构建的可交互画布。

其中，浏览器端的画布层和服务器端的画布层采用相同的静态渲染逻辑以及提供可视化静态画布渲染环境。浏览器端的画布层还可以构建可交互画布，服务器端的画布层不能构建可交互画布。

第四步：浏览器端的抽象层为画布层的各个图层的渲染提供基础工具。

第五步：浏览器端的渲染层完成渲染过程。

以上即为浏览器端采用本申请提供的跨端渲染系统将译文文本信息渲染到各个图层，将各个图层进行合并渲染的过程。此外，服务器端的各个层采用与浏览器端相同的逻辑。上述以根据一段图像Json协议数据，将译文文本信息替换原始文本信息，渲染到图像中的应用场景的描述，具体是，渲染完成的第二图像中包含的文本信息为第一图像的原始文本信息对应的译文文本信息，两者除了文本信息为译文对应形式外，其余内容展示上没有差异。

本申请实施例提供一种跨端渲染系统，包括：第一端和第二端；所述第一端和所述第二端均包括协议层单元、应用层单元、画布层单元以及抽象层单元；所述协议层单元用于第一端和第二端之间的数据解析，以及定义实现跨端交互的数据属性、解析规则以及拓展规则；所述应用层单元用于实现渲染环境初始化、所需资源加载以及完成渲染后的数据导出；所述画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境；所述抽象层单元用于定义渲染所需的各种功能和方法；其中，所述第一端和所述第二端还包括基于相同底层渲染框架的渲染层单元，用于执行渲染工作。

上述系统，第一端和第二端包括基于相同底层渲染框架的渲染层单元，协议层单元，应用层单元，画布层单元以及抽象层单元。以渲染层单元的相同底层渲染框架为基础实现效果一致的渲染图像。协议层单元，应用层单元，画布层单元，以及抽象层单元在第一端和第二端之间采用同样的逻辑代码，实现第一端和第二端的双端同构渲染方式。具体的，协议层单元用于将数据进行解析，并将解析后的数据在第一端和第二端之间进行交互传递。应用层单元具体为协议层单元提供的协议数据实现渲染环境初始化、加载渲染所需的渲染资源，以及将完成渲染后的数据导出。画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境。抽象层单元抽象渲染所需的各种功能和方法。在协议层单元，应用层单元，画布层单元以及抽象层单元分别采用相同的逻辑处理图像渲染中的各步骤，使得最终获得的渲染图像在两端之间的差异可忽略，降低了双端同构渲染过程中的图像差异以及维护成本。

第三实施例

在第一实施例提供了跨端渲染方法的基础上，本申请第三实施例提供一种跨端渲染装置。图5为本申请第三实施例提供的一种跨端渲染装置的示意图。以下结合图5对本实施例提供的装置进行描述，本申请第三实施例提供的装置与场景实施例和第一实施例的相同描述，具体请参考场景实施例和第一实施例，本实施例不再赘述。

以下描述所涉及的实施例是用来解释说明方法原理，不是实际使用的限定。

图5所示的跨端渲染装置包括：

接收单元501，用于接收图像数据；

确定单元502，用于确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；

渲染单元503，用于采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。

第四实施例

与本申请第一实施例的方法相对应的，本申请第四实施例还提供一种电子设备。如图6所示，图6为本申请第四实施例中提供的一种电子设备的示意图。该电子设备，包括：至少一个处理器601，至少一个通信接口602，至少一个存储器603和至少一个通信总线604；可选的，通信接口602可以为通信模块的接口，如GSM模块的接口；处理器601可能是处理器CPU，或者是特定集成电路ASIC(Application Specific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。存储器603可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。其中，存储器603存储有程序，处理器601调用存储器603所存储的程序，以执行本发明第一实施例的方法。

第五实施例

与本申请第一实施例的方法相对应的，本申请第五实施例还提供一种计算机存储介质。所述计算机存储介质存储有计算机程序，该计算机程序被处理器运行，执行第一实施例的方法。

本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(Transitory Media)，如调制的数据信号和载波。

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

需要说明的是，本申请实施例中可能会涉及到对用户数据的使用，在实际应用中，可以在符合所在国的适用法律法规要求的情况下(例如，用户明确同意，对用户切实通知，等)，在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准，并提供有相应的操作入口，供用户选择授权或者拒绝。