本申请实施例提供一种跨端渲染方法、系统及电子设备，在该方法中，接受到图像数据后，确定渲染该图像数据的渲染资源、渲染环境以及渲染工具，采用和相对端相对应的底层渲染框架，根据该渲染资源、渲染环境以及渲染工具，对该图像数据执行渲染工作。本端和相对端采用相对应的底层渲染框架，对图像数据进行渲染工作，使得两端获得效果一致的渲染图像。换言之，两端最终获得的渲染图像在两端之间的差异可忽略，降低了双端同构渲染过程中的图像差异以及维护成本。维护成本。维护成本。
【技术实现步骤摘要】
一种跨端渲染方法、系统及电子设备
[0001]本申请涉及计算机
，具体涉及一种跨端渲染方法。本申请同时涉及一种跨端渲染系统及电子设备。
技术介绍
[0002]目前，在电商领域将电子图片进行大规模合图的应用比较广泛，其中，合图为将电子图片中的各个图层的原始图像信息进行修改处理，然后修改处理后的各个图层按照顺序合并渲染，获得新的目标图片。
[0003]现有技术中，将电子图片进行渲染的过程在两个端之间进行时，经常存在两个端渲染完成的图像存在图像差异，而且两个端对图像渲染的维护成本增加。
[0004]因此，如何降低双端同构渲染过程中的图像差异以及维护成本是需要解决的技术问题。
技术实现思路
[0005]本申请实施例提供一种跨端渲染方法，以降低双端同构渲染过程中的图像差异以及维护成本。本申请实施例同时涉及一种跨端渲染系统及电子设备。
[0006]本申请实施例提供一种跨端渲染方法，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。
[0007]可选的，还包括：对所述图像数据进行解析处理，获得解析后的图像协议数据；将所述解析后的图像协议数据发送给相对端。
[0008]可选的，所述确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具，包括：通过应用层确定用于渲染所述图像数据的渲染资源；通过画布层确定用于渲染所述图像数据的渲染环境；通过抽象层确定用于渲染所述图像数据的渲染工具。
[0009]可选的，所述相对应的底层渲染框架为canvaskit.wasm环境，所述canvaskit.wasm环境包括Skia的渲染逻辑以及API应用接口。
[0010]可选的，所述对所述图像数据进行解析处理，获得解析后的图像协议数据，包括：协议层根据预先定义的数据属性和解析规则对所述图像数据进行解析处理，获得解析后的图像协议数据。
[0011]可选的，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得目标图像。
[0012]可选的，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据进行渲染操作，获得
渲染后的多层图像渲染数据；将所述多层图像渲染数据在本端节点上执行渲染上屏操作。
[0013]可选的，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得第一中间图像；获得针对所述第一中间图像的更新信息，将所述第一中间图像的更新信息进行协议化处理，获得更新图像协议数据；将所述更新图像协议数据发送给相对端；获得所述相对端对所述更新图像协议数据再次进行解析处理后获得的解析后更新图像协议数据。
[0014]可选的，还包括：协议层将所述解析后的图像协议数据发送给本端的应用层；或者，协议层接收本端的应用层导出的渲染数据，将所述导出的渲染数据通过预先定义的数据属性进行打包处理，将打包处理后的渲染数据提供给通讯发送端口。
[0015]可选的，所述通过画布层确定用于渲染所述图像数据的渲染环境，包括：通过所述画布层根据所述图像数据解析后的图像协议数据，确定静态画布渲染逻辑以及提供静态画布渲染环境。
[0016]可选的，还包括：在所述静态画布渲染环境的基础上，根据所述图像协议数据，确定动态画布渲染逻辑以及提供动态可视化画布渲染环境；基于静态画布种监测到的触发动作，根据触发动作的移动轨迹调整该触发动作对应的画布层的位置。
[0017]本申请实施例还提供一种跨端渲染系统，包括：第一端和第二端；所述第一端和所述第二端均包括协议层单元、应用层单元、画布层单元以及抽象层单元；所述协议层单元用于第一端和第二端之间的数据解析，以及定义实现跨端交互的数据属性、解析规则以及拓展规则；所述应用层单元用于实现渲染环境初始化、所需资源加载以及完成渲染后的数据导出；所述画布层单元用于定义画布渲染逻辑以及提供可视化画布渲染环境；所述抽象层单元用于定义渲染所需的各种功能和方法；其中，所述第一端和所述第二端还包括基于相同底层渲染框架的渲染层单元，用于执行渲染工作。
[0018]本申请实施例还提供一种电子设备，所述电子设备包括处理器和存储器；所述存储器中存储有计算机程序，所述处理器运行所述计算机程序后，执行上述方法。
[0019]本申请实施例还提供一种计算机存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器运行后，执行上述方法。
[0020]与现有技术相比，本申请实施例具有如下优点：
[0021]本申请实施例提供一种跨端渲染方法，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。
[0022]上述方法，接受到图像数据后，确定渲染该图像数据的渲染资源、渲染环境以及渲染工具，采用和相对端相对应的底层渲染框架，根据该渲染资源、渲染环境以及渲染工具，对该图像数据执行渲染工作。本端和相对端采用相对应的底层渲染框架，基于同一份渲染代码，对图像数据进行渲染工作，使得两端获得效果一致的渲染图像。换言之，两端最终获得的渲染图像在两端之间的差异可忽略，降低了双端同步渲染过程中的图像差异以及维护成本。
附图说明
[0023]图1为本申请实施例提供的跨端渲染方法的第一应用场景图。
[0024]图2为本申请实施例提供的跨端渲染方法的第二应用场景图。
[0025]图3为本申请第一实施例提供的一种跨端渲染方法的流程图。
[0026]图4为本申请第二实施例提供的一种跨端渲染系统的逻辑框架图。
[0027]图5为本申请第三实施例提供的一种跨端渲染装置的示意图。
[0028]图6为本申请第四实施例提供的一种电子设备的示意图。
具体实施方式
[0029]在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。
[0030]本申请中使用的术语是仅仅出于对特定实施例描述的目的，而非旨在限制本申请。在本申请中和所附权利要求书中所使用的描述方式例如：“一种”、“第一”、和“第二本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种跨端渲染方法，其特征在于，包括：接收图像数据；确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具；采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作。2.根据权利要求1所述的方法，其特征在于，还包括：对所述图像数据进行解析处理，获得解析后的图像协议数据；将所述解析后的图像协议数据发送给相对端。3.根据权利要求1所述的方法，其特征在于，所述确定用于渲染所述图像数据的渲染资源、渲染环境以及渲染工具，包括：通过应用层确定用于渲染所述图像数据的渲染资源；通过画布层确定用于渲染所述图像数据的渲染环境；通过抽象层确定用于渲染所述图像数据的渲染工具。4.根据权利要求1所述的方法，其特征在于，所述相对应的底层渲染框架为canvaskit.wasm环境，所述canvaskit.wasm环境包括Skia的渲染逻辑以及API应用接口。5.根据权利要求2所述的方法，其特征在于，所述对所述图像数据进行解析处理，获得解析后的图像协议数据，包括：协议层根据预先定义的数据属性和解析规则对所述图像数据进行解析处理，获得解析后的图像协议数据。6.根据权利要求2所述的方法，其特征在于，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据中的数据分别对应的多个图层进行合图处理，获得目标图像。7.根据权利要求2所述的方法，其特征在于，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据进行渲染操作，获得渲染后的多层图像渲染数据；将所述多层图像渲染数据在本端节点上执行渲染上屏操作。8.根据权利要求2所述的方法，其特征在于，所述采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像数据执行渲染工作，包括：采用与相对端相对应的底层渲染框架，基于所述渲染资源、渲染环境以及渲染工具，对所述图像协议数据...
【专利技术属性】
技术研发人员：黄鹏飞，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。