CN116700704A - 图像处理方法、装置、存储介质及电子设备 - Google Patents

Abstract

本发明提供一种图像处理方法、装置、存储介质及电子设备，其中，该方法包括：获取待处理的初始页面横幅数据，初始页面横幅数据包括初始物料图层，初始物料图层是按照初始图层信息对目标物料进行显示的；对初始物料图层进行变换处理，得到目标物料图层，并获取目标物料图层的状态变换信息；基于初始图层信息，确定锚点坐标，以及采用状态变换信息和所述锚点坐标，计算目标物料图层的目标位置信息；基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，并在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。本发明实施例可实现页面横幅数据的复用，从而节约成本。

Description

图像处理方法、装置、存储介质及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种图像处理方法、装置、存储介质及电子设备。

背景技术

目前，图像处理中的页面横幅(Banner)技术已被广泛应用于各种场景，如商品促销场景和企业推荐场景等；以商品促销场景为例，一些电商企业在重大节日期间进行商品促销时，如何在有限时间内将更多的信息传递给客户以增加点击量，这不仅需要广泛的流量基础作为支撑，还要增加趣味、可交互性等元素，从而吸引客户点击参与；基于此，在app(Application，应用程序)端、pc(personal computer，个人计算机)端以及小程序等渠道投放banner位成为获取流量的主要手段之一。

在现有技术中，通常使用jpg(Joint Photo graphic Experts Group，一种图片格式)、png(Portable Network Graphic Format，图像文件存储格式)等图片占位，并通过cdn(Content Delivery Network，内容分发网络)链接或者图片静态资源方式加载，或者构建配置后台，以通过接口下发banner图更新；相应的，如果要增加趣味性，则会使用gif(Graphics Interchange Format，图像互换格式)等动效图片。但现有技术依赖环节较多，每次活动迭代都需要banner图片的重新设计，也就是说，需先进行UI(User Interface，用户界面)设计，然后研发或运营进行替换，尤其是只需要相应文案更改或部分区域图片替换也需要进行UI设计，造成额外的成本(如时间成本等)；并且，在实现动效场景时，如果使用gif实现复杂动效(如粒子)，则gif体积将会很大，不利于加载，且还容易出现跳帧现象；如果使用帧动画或者transition(一种过渡效果)实现动效，则不利于后续扩展和复用。

进一步的，为了实现一些复杂的动效，且实现较好的渲染效果，现有技术通常采用lottie(一款动画效果解决工具)来进行设计和渲染，效果优于gif图，但通过lottie制作好的页面横幅数据也难以复用，必须通过绘图工具进行再次设计开发，从而增加成本。基于此，如何实现页面横幅数据的复用，从而节约成本成为一个研究热点。

发明内容

有鉴于此，本发明实施例提供了一种图像处理方法、装置、存储介质及电子设备，以解决页面横幅数据难以复用的问题，也就是说，本发明实施例可实现页面横幅数据的复用，从而节约成本。

根据本发明的一方面，提供了一种图像处理方法，所述方法包括：

获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

根据本发明的另一方面，提供了一种图像处理装置，所述装置包括：

获取单元，用于获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

处理单元，用于对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

所述处理单元，还用于基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

所述处理单元，还用于基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

根据本发明的另一方面，提供了一种电子设备，所述电子设备包括处理器、以及存储程序的存储器，其中，所述程序包括指令；所述指令在由所述处理器执行时使所述处理器执行如下步骤：

获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

根据本发明的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使计算机执行如下步骤：

获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

本发明实施例在获取到待处理的初始页面横幅数据后，可对初始页面横幅数据中的初始物料图层进行变换处理，得到目标物料图层，从而可获取到目标物料图层的状态变换信息，以便于后续对初始页面横幅数据进行更新；其中，初始物料图层是按照初始图层信息对目标物料进行显示的，且该变换处理包括：位置变换处理和/或大小变换处理。然后，可基于初始图层信息，确定锚点坐标，以及采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息，从而对目标物料图层进行精确地定位；基于此，可基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，目标页面横幅数据包括目标物料图层，并可在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。可见，本发明实施例可实现页面横幅数据的复用，在仅需对页面横幅数据中某个物料的位置和/或大小等进行更新时，无须通过相应绘图工具对页面横幅数据进行编辑，从而有效节约成本，避免资源浪费。

附图说明

在下面结合附图对于示例性实施例的描述中，本发明的更多细节、特征和优点被公开，在附图中：

图1示出了根据本发明示例性实施例的一种图像处理方法的流程示意图；

图2示出了根据本发明示例性实施例的一种数据结构的示意图；

图3a示出了根据本发明示例性实施例的一种位置变换处理的示意图；

图3b示出了根据本发明示例性实施例的一种大小变换处理的示意图；

图4示出了根据本发明示例性实施例的另一种图像处理方法的流程示意图；

图5a示出了根据本发明示例性实施例的一种目标位置信息的示意图；

图5b示出了根据本发明示例性实施例的另一种目标位置信息的示意图；

图6示出了根据本发明示例性实施例的一种编辑初始物料图层的流程示意图；

图7示出了根据本发明示例性实施例的一种创建目标背景图层的流程示意图；

图8示出了根据本发明示例性实施例的一种更新初始页面横幅数据的流程示意图；

图9示出了根据本发明示例性实施例的一种图像处理装置的示意性框图；

图10示出了能够用于实现本发明的实施例的示例性电子设备的结构框图。

具体实施方式

下面将参照附图更详细地描述本发明的实施例。虽然附图中显示了本发明的某些实施例，然而应当理解的是，本发明可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本发明。应当理解的是，本发明的附图及实施例仅用于示例性作用，并非用于限制本发明的保护范围。

应当理解，本发明的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本发明的范围在此方面不受限制。

本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本发明中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。

需要注意，本发明中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

本发明实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。

需要说明的是，本发明实施例提供的图像处理方法的执行主体可以是一个或多个电子设备，本发明对此不作限定；其中，电子设备可以是终端(即客户端)或者服务器，那么在执行主体包括多个电子设备，且多个电子设备中包括至少一个终端和至少一个服务器时，本发明实施例提供的图像处理方法可由终端和服务器共同执行。相应的，此处所提及的终端可以包括但不限于：智能手机、平板电脑、笔记本电脑、台式计算机、智能手表、智能语音交互设备、智能家电、车载终端、飞行器，等等。此处所提及的服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算(cloud computing)、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器，等等。

请参见图1，本发明实施例提出一种图像处理方法，该图像处理方法可以由上述所提及的电子设备(终端或服务器)执行；或者，该图像处理方法可由终端和服务器共同执行。为便于阐述，后续均以电子设备执行该图像处理方法为例进行说明；如图1所示，该图像处理方法可包括以下步骤S101-S104：

S101，获取待处理的初始页面横幅数据，初始页面横幅数据包括初始物料图层，初始物料图层是按照初始图层信息对目标物料进行显示的。

其中，物料也可称为物体，且物料可以是电商产品图像，也可是动物图像或植物图像等，本发明对此不作限定；相应的，目标物料可以是初始页面横幅数据中的任一物料。在本发明实施例中，初始页面横幅数据的获取方式包括但不限于以下几种：

第一种获取方式：电子设备可获取页面横幅数据的下载链接，并根据该下载链接进行数据下载，从而将基于该下载链接下载的页面横幅数据作为初始页面横幅数据。

第二种获取方式：电子设备存储有多个页面横幅数据，则电子设备可从自身存储的多个页面横幅数据中，选取出一个页面横幅数据，从而将选取出的页面横幅数据作为上述初始页面横幅数据。

第三种获取方式：电子设备可具有页面横幅数据生成工具(即绘图工具)，从而通过该页面横幅数据生成工具，生成上述初始页面横幅数据，等等。例如，该页面横幅数据生成工具可以是lottie，lottie提供了ios(一种操作系统)、android(安卓)、react-native(一种混合移动应用开发框架)、web(World Wide Web，万维网)等版本，可在分别引入对应的lottie库后支持多端渲染；在此种情况下，可由设计师(即前端设计人员)通过页面横幅数据生成工具生成图像(即动画)，并导为json(JavaScript Object Notation，一种轻量级的数据交换格式)文件(即页面横幅数据)，此时也可称为lottie文件，使得后端人员(即研发人员)可采用json进行渲染；需要说明的是，lottie可由Adobe After Effects(一种动画工具)实现，使动画实现更加方便，效果也更好，而得到的json文件大小会比gif文件小很多，使得性能更好，并且通过lottie方案生成页面横幅数据的方式可使得分工合理(即前端设计人员负责设计动画，后端人员更好的展示动画)，相应的，前端设计人员可以自由灵活的控制动画(如播放第几帧、开始暂停以及播放速率等)。又如，页面横幅数据生成工具也可以是live2d(一种动画技术)，等等；本发明对此不作限定。

需要说明的是，lottie是具有较强性能等优势的开源动画库，为了便于阐述，后续均以页面横幅数据生成工具为lottie为例进行说明；也就是说，后续均以页面横幅数据为lottie生成的json文件为例进行说明。

示例性的，lottie的json结构可如图2所示，其中，layer可表示图层，refid对应assets(资源)中的id(身份标识号)，即refid可表示图层对应的资源信息，assets中可包括layers字段，以表示该资源信息对应的图层类型为合成图层，layer中ty表示图层类型(如取值为0时可表示图层类型为合成图层，取值为2时可表示图层类型为图片图层等)；其中，layer中的ks字段为本发明实施例的操作核心，该字段可用于表示图层的具体变换信息，也就是说，本发明实施例可通过对ks字段的更新，以达到对初始页面横幅数据进行更新的目的。

相应的，如图2所示，ks字段中的o、r、p、a、s可分别表示不透明度、旋转、位置(即位置信息，用于表示图层的中心点位置在坐标系中的坐标)、锚点的坐标值(如初始图层信息中的初始锚点坐标，即初始物料图层中锚点的坐标值)、缩放(即图层缩放比例)等；在初始页面横幅数据中，锚点一般可以是图层中心点位置，是计算其它位置信息的基础；基于此，整个lottie的编辑则是变化ks字段(即图层信息)中对应各个信息字段的k值，从而实现对ks字段的更新。

需要说明的是，图2仅示例性地对json文件中的部分结构进行了表示，本发明实施例对此不作限定；例如，可采用asset表示资源，也可将ty字段取值为1并当取值为1时用于表示图层类型为合成图层，还可以将value(值)作为各个信息字段的值字段(即采用value替换ks字段中各个信息字段包含的k)，此时对lottie的编辑是通过变化ks字段中对应各个信息字段的value值进行实现的，等等。

S102，对初始物料图层进行变换处理，得到目标物料图层，并获取目标物料图层的状态变换信息，变换处理包括：位置变换处理和/或大小变换处理。

在一种实施方式中，变换处理包括位置变换处理，那么电子设备可对初始物料图层进行位置变换处理(即平移处理)，得到目标物料图层，此时目标物料图层与初始物料图层所处位置不同，但大小相同，如图3a所示；另一种实施方式中，变换处理包括大小变换处理，那么电子设备可对初始物料图层进行大小变换处理(即缩放处理)，得到目标物料图层，此时目标物料图层与初始物料图层所处位置和大小均可不同，如图3b所示。

再一种实施方式中，变换处理可包括位置变换处理和大小变换处理，那么电子设备可分别对初始物料图层进行位置变换处理和大小变换处理，得到目标物料图层，此时目标物料图层和初始物料图层所处位置和大小均可不同。具体的，电子设备可先对初始物料图层进行位置变换处理，得到中间物料图层，再对中间物料图层进行大小变换处理，得到目标物料图层；或者，电子设备可先对初始物料图层进行大小变换处理，得到中间物料图层，再对中间物料图层进行位置变换处理，得到目标物料图层，等等；本发明对此不作限定。

S103，基于初始图层信息，确定锚点坐标，以及采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息。

其中，初始图层信息可包括初始锚点坐标和图层缩放比例，那么当原图层存在缩放(即初始物料图层是原图层经过缩放后的图层)时，电子设备可对初始图层信息中的初始锚点坐标与图层缩放比例进行乘法运算，得到上述锚点坐标，从而得到初始物料图层(即当前图层)的真实锚点坐标值。示例性的，假设原图层的锚点坐标值(即初始锚点坐标)包括a.k[0](初始锚点坐标的横坐标值)和a.k[1](初始锚点坐标的纵坐标值)，且图层缩放比例为0.5(横坐标缩放比例)和0.5(纵坐标缩放比例)，那么电子设备可对初始锚点坐标与图层缩放比例进行乘法运算，得到初始物料图层中锚点坐标的横坐标值为0.5a.k[0]，且初始物料图层中锚点坐标的纵坐标值为0.5a.k[1]。

S104，基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，目标页面横幅数据包括目标物料图层，并在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。

在本发明实施例中，在对初始图层信息进行更新时，初始图层信息中所需更新的内容包括但不限于：位置信息和图层缩放比例等；本发明对此不作限定。相应的，当初始图层信息中所需更新的内容包括位置信息时，电子设备可采用目标位置信息对初始图层信息中的位置信息进行更新，以使目标图层信息中的位置信息为目标位置信息；当初始图层信息中所需更新的内容包括位置信息和图层缩放比例时，电子设备可采用目标位置信息对初始图层信息中的位置信息进行更新，并采用目标缩放比例对初始图层信息中的图层缩放比例进行更新，也就是说，电子设备可替换初始图层信息中ks字段包括的位置信息p以及缩放信息(即图层缩放比例)s，从而得到目标图层信息，以使目标图层信息中的位置信息为目标位置信息，且目标图层信息中的图层缩放比例为目标缩放比例，等等。

本发明实施例在获取到待处理的初始页面横幅数据后，可对初始页面横幅数据中的初始物料图层进行变换处理，得到目标物料图层，从而可获取到目标物料图层的状态变换信息，以便于后续对初始页面横幅数据进行更新；其中，初始物料图层是按照初始图层信息对目标物料进行显示的，且该变换处理包括：位置变换处理和/或大小变换处理。然后，可基于初始图层信息，确定锚点坐标，以及采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息，从而对目标物料图层进行精确地定位；基于此，可基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，目标页面横幅数据包括目标物料图层，并可在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。可见，本发明实施例可实现页面横幅数据的复用，在仅需对页面横幅数据中某个物料的位置和/或大小等进行更新时，无须通过相应绘图工具对页面横幅数据进行编辑，从而有效节约成本，避免资源浪费。

基于上述描述，本发明实施例还提出一种更为具体的图像处理方法，该图像处理方法可以由上述所提及的电子设备(终端或服务器)执行；或者，该图像处理方法可由终端和服务器共同执行。为便于阐述，后续均以电子设备执行该图像处理方法为例进行说明；请参见图4，该图像处理方法可包括以下步骤S401-S406：

S401，获取待处理的初始页面横幅数据，初始页面横幅数据包括初始物料图层，初始物料图层是按照初始图层信息对目标物料进行显示的。

应当理解的是，初始图层信息包括但不限于位置信息、旋转等，那么初始物料图层可按照初始图层信息包含的内容对目标物料进行显示；示例性的，以位置信息为例，初始物料图层可按照初始图层信息中的位置信息对目标物料进行显示，也就是说，在加载初始页面横幅数据时，电子设备可按照初始图层信息中的位置信息，对初始物料图层中的目标物料进行显示。

S402，对初始物料图层进行变换处理，得到目标物料图层，并获取目标物料图层的状态变换信息，变换处理包括：位置变换处理和/或大小变换处理。

在具体实现中，在对初始物料图层进行变换处理，得到目标物料图层时，电子设备可将初始物料图层集成到变换处理组件(即拖拽组件)中，该变换处理组件用于支持对初始物料图层的变换处理；应当理解的是，用户(如后端人员)可对初始物料图层执行集成操作，那么电子设备在检测到用户执行的集成操作时，可将初始物料图层集成到变换处理组件中。其中，对初始物料图层的变换处理过程也可称为对初始物料图层的编辑过程，也就是说，电子设备可对初始物料图层进行编辑。

相应的，电子设备可基于变换处理组件，对初始物料图层进行变换处理，得到目标物料图层；具体的，用户可对变换处理组件执行变换处理操作，那么电子设备可在检测到用户针对变换处理组件执行的变换处理操作时，基于变换处理组件，对初始物料图层进行变换处理，得到目标物料图层；其中，变换处理操作包括位置变换处理操作和/或大小变换处理操作。应当理解的是，由于初始物料图层被集成到变换处理组件，则初始物料图层可随着变换处理组件的变换而变换，从而得到目标物料图层；可见，本发明实施例可将物料lottie元素集成到变换处理组件中，以实现平移、缩放等能力。

在一种实施方式中，变换处理操作包括位置变换处理操作(即变换处理包括位置变换处理)，该位置变换处理操作也可称为拖动操作或平移操作等，在此种情况下，在检测到用户针对变换处理组件执行的位置变换处理操作时，电子设备可对初始物料图层进行位置变换处理。另一种实施方式中，变换处理操作包括大小变换处理操作(即变换处理包括大小变换处理)，该大小变换处理操作也可称为缩放操作或拉拽操作等，在此种情况下，在检测到用户针对变换处理组件执行的大小变换处理操作时，电子设备可对初始物料图层进行大小变换处理。再一种实施方式中，变换处理操作包括位置变换处理操作和大小变换处理操作(即变换处理包括位置变换处理和大小变换处理)，在此种情况下，在检测到用户针对变换处理组件执行的位置变换处理操作时，电子设备可对初始物料图层进行位置变换处理，并在检测到用户针对变换处理组件执行的大小变换处理操作时，电子设备可对初始物料图层进行大小变换处理。

需要说明的是，在获取目标物料图层的状态变换信息时，电子设备可通过变换处理组件，生成状态变换信息，以获取目标物料图层的状态变换信息。其中，状态变换信息包括但不限于缩放指示信息(即宽高缩放比例)和位置移动信息等，该位置移动信息包括初始物料图层在平移(translate)后的横向位置移动信息(即x值)和纵向位置移动信息(即y值)，即包括目标物料图层在x轴上的移动信息(即移动距离)和目标物料图层在y轴上的移动信息，该缩放指示信息可包括横向缩放指示信息sw和纵向缩放指示信息sh。在此种情况下，电子设备可通过变换处理组件，生成目标物料图层的缩放指示信息和位置移动信息，以获取目标物料图层的状态变换信息。应当理解的是，每次物料变化，也就是说，每次初始物料图层变化，电子设备均可获得目标物料图层的状态变换信息。

S403，基于初始图层信息，确定锚点坐标，以及采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息。

需要说明的是，在采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息时，电子设备可采用位置移动信息和缩放指示信息，计算实质移动信息(也可称为相对移动距离、真实移动距离或相对距离等)，实质移动信息是指：对初始物料图层的变换处理为位置变换处理时的移动信息；然后，可对实质移动信息和锚点坐标进行求和运算，得到目标物料图层的目标位置信息，目标位置信息是指目标物料图层的中心点位置在坐标系中的坐标。需要说明的是，当缩放指示信息指示了初始物料图层未被缩放(即变换处理仅包括位置变换处理)时，实质移动信息则等于位置移动信息，此时位置移动信息仅由位置变换处理所产生，在此种情况下，目标位置信息为位置移动信息加上锚点坐标；当缩放指示信息指示了初始物料图层被缩放(即变换处理包括大小变换处理)时，实质移动信息则不等于位置移动信息。

具体的，由于缩放指示信息包括横向缩放指示信息和纵向缩放指示信息，位置移动信息包括横向位置移动信息和纵向位置移动信息，且实质移动信息包括横向实质移动信息和纵向实质移动信息，那么在采用位置移动信息和缩放指示信息，计算实质移动信息时，电子设备可从初始图层信息中确定出初始物料图层的横向图层长度，并采用横向缩放指示信息和所述横向图层长度，计算横向缩放值，以及将横向位置移动信息与横向缩放值之间的差值，作为横向实质移动信息；相应的，可从初始图层信息中确定出初始物料图层的纵向图层高度，并采用纵向缩放指示信息和纵向图层高度，计算纵向缩放值，以及将纵向位置移动信息与纵向缩放值之间的差值，作为纵向实质移动信息。

基于此，电子设备可采用公式1.1，计算实质移动信息：

其中，x1为横向实质移动信息，x为横向位置移动信息，w为横向图层长度，且sw为横向缩放指示信息；相应的，y1为纵向实质移动信息，y为纵向位置移动信息，h为纵向图层高度，且sh为纵向缩放指示信息。可见，由于缩放过程中本身带有横向位置移动信息和纵向位置移动信息的变化，所以实质移动信息则需加减这部分的移动距离。

相应的，目标位置信息包括位置横坐标值(即目标物料图层的中心点位置在坐标系中的横坐标值)和位置纵坐标值(即目标物料图层的中心点位置在坐标系中的纵坐标值)，那么在对实质移动信息和锚点坐标进行求和运算，得到目标物料图层的目标位置信息时，电子设备可对横向实质移动信息和锚点坐标的横坐标值进行求和运算，得到目标位置信息中的位置横坐标值；并且，电子设备可对纵向实质移动信息和锚点坐标的纵坐标值进行求和运算，得到目标位置信息中的位置纵坐标值。基于此，电子设备可采用公式1.2，计算目标位置信息：

其中，p.k[0]为位置横坐标值，ax为锚点坐标的横坐标值；相应的，p.k[1]为位置纵坐标值，ay为锚点坐标的纵坐标值。由于锚点坐标是通过初始锚点坐标与初始图层信息中的图层缩放比例(包括横坐标缩放比例和纵坐标缩放比例)进行乘法运算所得的，则ax＝a.k[0]*s.k[0]，ay＝a.k[1]*s.k[1]，a.k[0]为初始锚点坐标的横坐标值，s.k[0]为横坐标缩放比例，a.k[1]为初始锚点坐标的纵坐标值，且s.k[1]为纵坐标缩放比例。

例如，如图5a所示，假设初始物料图层为图层501，初始物料图层的锚点为点502，目标物料图层为图层503，且目标物料图层的中心点位置为点504，在此种情况下，目标物料图层的横向图层长度为w*sw，目标物料图层的纵向图层高度为h*sh，又由于目标物料图层小于初始物料图层，即sw和sh的取值均小于1(此时横向实质移动信息x1小于横向位置移动信息x，且纵向实质移动信息y1小于纵向位置移动信息y)，则横向缩放值x2＝w*(1-sw)/2，纵向缩放值y2＝h*(1-sh)/2，那么电子设备可采用公式1.1和公式1.2计算目标位置信息；示例性的，以横向实质移动信息为例进行说明，假设横向缩放指示信息为0.5，则横向实质移动信息为x-(1-0.5)*w/2。

又如，如图5b所示，假设初始物料图层为图层505，初始物料图层的锚点为点506，目标物料图层为图层507，且目标物料图层的中心点位置为点508，在此种情况下，目标物料图层的横向图层长度为w*sw，目标物料图层的纵向图层高度为h*sh，又由于目标物料图层大于初始物料图层，即sw和sh的取值均大于1(此时横向实质移动信息x1大于横向位置移动信息x，且纵向实质移动信息y1大于纵向位置移动信息y)，则横向缩放值x2＝-w*(1-sw)/2，纵向缩放值y2＝-h*(1-sh)/2，且x1＝x+x2＝x-w*(1-sw)/2，y1＝y+y2＝y-h*(1-sh)/2，也就是说，电子设备可采用公式1.1和公式1.2计算目标位置信息。

S404，基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，目标页面横幅数据包括所述目标物料图层，并在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。

需要说明的是，当锚点坐标是基于初始图层信息中的图层缩放比例所确定的，且缩放指示信息包括横向缩放指示信息和纵向缩放指示信息时，电子设备还可根据横向缩放指示信息和纵向缩放指示信息之间的大小关系，从缩放指示信息中选取出目标缩放指示信息，目标缩放指示信息小于缩放指示信息中除目标缩放指示信息以外的其他缩放指示信息，也就是说，目标缩放指示信息为横向缩放指示信息和纵向缩放指示信息中的最小值，即目标缩放指示信息f可表示为Math.min(sw,sh)；基于此，在基于目标位置信息，更新初始图层信息，得到目标图层信息时，电子设备可分别基于目标缩放指示信息和目标位置信息，更新初始图层信息中的图层缩放比例和位置信息，得到目标图层信息，也就是说，电子设备可基于目标缩放指示信息确定目标缩放比例，从而采用目标缩放比例更新初始图层信息中的图层缩放比例，并基于目标位置信息更新初始图层信息中的位置信息，从而得到目标图层信息。由于目标位置信息是基于锚点坐标和实质移动信息计算所得的，故本发明实施例可基于锚点坐标和实质移动信息，更新初始图层信息，从而得到目标图层信息，如图6所示。

在具体实现中，由于图层缩放比例包括横坐标缩放比例和纵坐标缩放比例，则目标缩放比例也包括横坐标缩放比例和纵坐标缩放比例，在基于目标缩放指示信息确定目标缩放比例时，电子设备可采用目标缩放指示信息，分别作为目标缩放比例中的横坐标缩放比例和纵坐标缩放比例。在此种情况下，若图层缩放比例在任一图层信息中的表现形式为百分制形式，那么目标缩放比例中的横坐标缩放比例和纵坐标缩放比例可表示为f*100，从而在采用目标缩放比例更新初始图层信息中的图层缩放比例时使得s.k[0]＝s.k[1]＝f*100；若图层缩放比例在任一图层中的表现形式为实数形式，那么目标缩放比例中的横坐标缩放比例和纵坐标缩放比例可表示f。

在其他实施例中，电子设备还可不获取目标缩放指示信息，而采用横向缩放指示信息作为目标缩放比例中的横坐标缩放比例，并采用纵向缩放指示信息作为目标缩放比例中的纵坐标缩放比例；或者，电子设备可将横向缩放指示信息和纵向缩放指示信息中的最大值作为目标缩放指示信息，等等；本发明实施例对此不作限定。

S405，获取背景矢量图，并对背景矢量图进行编辑，得到编辑后的背景矢量图。

在本发明实施例中，上述背景矢量图可为svg格式(一种矢量化图片格式)，是基于xml(eXtensibleMarkup Language，可扩展标记语言)语言生成的，可被扩展；基于此，svg格式的dom(Document Object Model，文档对象模型)元素可以被特征语法或者javascripts(一种基于对象和事件驱动并具有安全性能的脚本语言)控制，如通过css(CascadingStyle Sheets，层叠样式表)可在不同地方重用SVG图像元素、标记文本位置进而实现替换等。其中，svg格式比jpg和png点阵图片占用数据少的多，且在兼容低端机型能力上更有优势。应当理解的是，用户可上传svg格式的背景矢量图，那么电子设备在接收到背景矢量图后，可对背景矢量图进行编辑。

具体的，在对背景矢量图进行编辑，得到编辑后的背景矢量图时，电子设备可对背景矢量图进行解析处理，得到背景矢量图的解析处理结果，解析处理结果包括文本内容(即文本信息)，也就是说，电子设备可解析背景矢量图中的xml内容；然后，可从解析处理结果中，提取出至少一个文本内容，并将至少一个文本内容存储至文本数组中；基于此，电子设备可确定待编辑的目标文本信息，并将目标文本信息(即当前文本信息)添加至文本数组中，得到编辑后的文本数组，从而采用编辑后的文本数组对背景矢量图进行编辑，得到编辑后的背景矢量图，如图7所示。

可选的，在从解析处理结果中，提取出至少一个文本内容时，电子设备可利用正则(即/<tspan[\s\S]*？>([\s\S]*？)<\/tspan>/g)提取文本标签内容，如使用replace(一种查找并替换函数)获取匹配到的tspan，从而获取到各个文本内容text(文本)。

进一步的，电子设备还可记录至少一个文本内容中各个文本内容在文本数组中的索引信息，即下标index(索引)，使得后续编辑文本(即编辑文本数组)可根据首尾的index实时更新背景矢量图；基于此，在将目标文本信息添加至文本数组中，得到编辑后的文本数组时，电子设备可在各个文本内容的索引信息中，确定与目标文本信息相匹配的待替换文本内容的索引信息，待替换文本内容为至少一个文本内容中的任一文本内容；然后，可按照待替换文本内容的索引信息，将目标文本信息添加至文本数组中，以使目标文本信息替换待替换文本内容，且目标文本信息在文本数组中的索引信息为待替换文本的索引信息，也就是说，可根据下标匹配位置以进行替换。

S406，基于编辑后的背景矢量图，创建目标背景图层，并将目标背景图层添加至目标页面横幅数据中，以使目标背景图层作为目标物料图层的背景图层。

具体的，在基于编辑后的背景矢量图，创建目标背景图层时，电子设备可对编辑后的背景矢量图进行图片转换处理，得到编辑后的背景矢量图对应的目标背景图片；生成目标背景图片的图片资源链接，并采用图片资源链接创建目标背景图层。可选的，电子设备可依赖save-svg-as-png库(一种格式转换库)，将编辑好的svg格式的背景矢量图转为png格式的目标背景图片，从而上传目标背景图片的图片资源链接，如cdn。

相应的，在创建目标背景图层时，电子设备可创建图层所需要的assets、layer信息。在创建assets信息时，可引入图片资源链接，生成图片资源id；然后在创建layer图层信息时，其中宽、高信息默认使用背景宽高，ty为2，表示图片图层，ks字段中也使用默认值，比如不透明度o为1，旋转角度r为0，锚点a位置为图层中心点位置等，从而最终得到目标背景图层的全部信息。

应当理解的是，当页面横幅数据为lottie文件时，上述将目标背景图层添加至目标页面横幅数据中，即是指将目标背景图层合并到编辑后的物料lottie中，从而更新原lottie(即初始页面横幅数据)中的宽高、layer、assets等，以得到目标页面横幅数据(即更新初始图层信息后的页面横幅数据)，如图8所示。可见，本发明实施例可通过对svg文本下标标记的方法，实现对xml文本替换更新，同时当物料在背景上移动、缩放后，根据位置、宽高等信息计算出对应json中坐标信息，最终生成banner的lottie文件，即生成目标页面横幅数据；也就是说，本发明实施例可基于svg扩展能力以及lottie动画编译原理，实现配置化的图片设计，使banner交互样式有了更多可能，即能够从svg可编辑和lottie动画文件易操作的角度来实现banner的快速配置；具体的，可使用svg解决背景图的编辑问题，并利用lottie解决动效元素替换、移动、缩放以及图层内部图片替换等问题。

在其他实施例中，电子设备也可将背景矢量图的编辑放在lottie文件中进行，但此种方案会增加文件体积，影响lottie动画渲染；或者，banner中动效部分也可采用类似低代码方式进行配置，但只能通过css方式去编辑，动效效果简单，等等；本发明对此不作限定。

本发明实施例可在获取到待处理的初始页面横幅数据后，对初始物料图层进行变换处理，得到目标物料图层，并获取目标物料图层的状态变换信息；然后，可基于初始图层信息，确定锚点坐标，以及采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息，从而基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，目标页面横幅数据包括目标物料图层，并在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。进一步的，可获取背景矢量图，并对背景矢量图进行编辑，得到编辑后的背景矢量图；然后，可基于编辑后的背景矢量图，创建目标背景图层，并将目标背景图层添加至目标页面横幅数据中，以使目标背景图层作为目标物料图层的背景图层。可见，本发明实施例可通过对现有动效元素的复用、编辑和背景矢量图中文本内容的编辑，解决动效元素复用难的问题，并解决了开发周期长，相似动效元素重复设计等问题，从而有效减少日常开发中的环节依赖。

基于上述图像处理方法的相关实施例的描述，本发明实施例还提出了一种图像处理装置，该图像处理装置可以是运行于电子设备中的一个计算机程序(包括程序代码)；如图9所示，该图像处理装置可包括获取单元901和处理单元902。该图像处理装置可以执行图1或图4所示的图像处理方法，即该图像处理装置可以运行上述单元：

获取单元901，用于获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

处理单元902，用于对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

所述处理单元902，还用于基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

所述处理单元902，还用于基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

在一种实施方式中，处理单元902在对所述初始物料图层进行变换处理，得到目标物料图层时，可具体用于：

将所述初始物料图层集成到变换处理组件中，所述变换处理组件用于支持对所述初始物料图层的变换处理；

基于所述变换处理组件，对所述初始物料图层进行变换处理，得到目标物料图层。

另一种实施方式中，状态变换信息包括缩放指示信息和位置移动信息；处理单元902在采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息时，可具体用于：

采用所述位置移动信息和所述缩放指示信息，计算实质移动信息，所述实质移动信息是指：对所述初始物料图层的变换处理为位置变换处理时的移动信息；

对所述实质移动信息和所述锚点坐标进行求和运算，得到所述目标物料图层的目标位置信息。

另一种实施方式中，缩放指示信息包括横向缩放指示信息和纵向缩放指示信息，所述位置移动信息包括横向位置移动信息和纵向位置移动信息，且所述实质移动信息包括横向实质移动信息和纵向实质移动信息；处理单元902在采用所述位置移动信息和所述缩放指示信息，计算实质移动信息时，可具体用于：

从所述初始图层信息中确定出所述初始物料图层的横向图层长度，并采用所述横向缩放指示信息和所述横向图层长度，计算横向缩放值，以及将所述横向位置移动信息与所述横向缩放值之间的差值，作为所述横向实质移动信息；

从所述初始图层信息中确定出所述初始物料图层的纵向图层高度，并采用所述纵向缩放指示信息和所述纵向图层高度，计算纵向缩放值，以及将所述纵向位置移动信息与所述纵向缩放值之间的差值，作为所述纵向实质移动信息。

另一种实施方式中，锚点坐标是基于所述初始图层信息中的图层缩放比例所确定的，且所述缩放指示信息包括横向缩放指示信息和纵向缩放指示信息；处理单元902，还可用于：

根据所述横向缩放指示信息和所述纵向缩放指示信息之间的大小关系，从所述缩放指示信息中选取出目标缩放指示信息，所述目标缩放指示信息小于所述缩放指示信息中除所述目标缩放指示信息以外的其他缩放指示信息；

处理单元902在基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息时，可具体用于：

分别基于所述目标缩放指示信息和所述目标位置信息，更新所述初始图层信息中的图层缩放比例和位置信息，得到目标图层信息。

另一种实施方式中，获取单元901，还可用于：

获取背景矢量图，并对所述背景矢量图进行编辑，得到编辑后的背景矢量图；

处理单元902，还可用于：

基于所述编辑后的背景矢量图，创建目标背景图层，并将所述目标背景图层添加至所述目标页面横幅数据中，以使所述目标背景图层作为所述目标物料图层的背景图层。

另一种实施方式中，处理单元902在对所述背景矢量图进行编辑，得到编辑后的背景矢量图时，可具体用于：

对所述背景矢量图进行解析处理，得到所述背景矢量图的解析处理结果，所述解析处理结果包括文本内容；

从所述解析处理结果中，提取出至少一个文本内容，并将所述至少一个文本内容存储至文本数组中；

确定待编辑的目标文本信息，并将所述目标文本信息添加至所述文本数组中，得到编辑后的文本数组；

采用所述编辑后的文本数组对所述背景矢量图进行编辑，得到编辑后的背景矢量图。

另一种实施方式中，处理单元902，还可用于：

记录所述至少一个文本内容中各个文本内容在所述文本数组中的索引信息；

处理单元902在将所述目标文本信息添加至所述文本数组中，得到编辑后的文本数组时，可具体用于：

在所述各个文本内容的索引信息中，确定与所述目标文本信息相匹配的待替换文本内容的索引信息，所述待替换文本内容为所述至少一个文本内容中的任一文本内容；

按照所述待替换文本内容的索引信息，将所述目标文本信息添加至所述文本数组中，以使所述目标文本信息替换所述待替换文本内容，且所述目标文本信息在所述文本数组中的索引信息为所述待替换文本的索引信息。

另一种实施方式中，处理单元902在基于所述编辑后的背景矢量图，创建目标背景图层时，可具体用于：

对所述编辑后的背景矢量图进行图片转换处理，得到所述编辑后的背景矢量图对应的目标背景图片；

生成所述目标背景图片的图片资源链接，并采用所述图片资源链接创建目标背景图层。

根据本发明的一个实施例，图1或图4所示的方法所涉及的各个步骤均可由图9所示的图像处理装置中的各个单元来执行的。例如，图1中所示的步骤S101可由图9中所示的获取单元901执行，步骤S102-S104均可由图9中所示的处理单元902执行。又如，图4中所示的步骤S401和S405均可由图9中所示的获取单元901执行，步骤S402-S404以及S406均可由图9中所示的处理单元902执行，等等。

根据本发明的另一个实施例，图9所示的图像处理装置中的各个单元均可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本发明的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本发明的其它实施例中，任一图像处理装置也可以包括其他单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。

根据本发明的另一个实施例，可以通过在包括中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件的例如计算机的通用电子设备上运行能够执行如图1或图4中所示的相应方法所涉及的各步骤的计算机程序(包括程序代码)，来构造如图9中所示的图像处理装置，以及来实现本发明实施例的图像处理方法。所述计算机程序可以记载于例如计算机存储介质上，并通过计算机存储介质装载于上述电子设备中，并在其中运行。

本发明实施例在获取到待处理的初始页面横幅数据后，可对初始页面横幅数据中的初始物料图层进行变换处理，得到目标物料图层，从而可获取到目标物料图层的状态变换信息，以便于后续对初始页面横幅数据进行更新；其中，初始物料图层是按照初始图层信息对目标物料进行显示的，且该变换处理包括：位置变换处理和/或大小变换处理。然后，可基于初始图层信息，确定锚点坐标，以及采用状态变换信息和锚点坐标，计算目标物料图层的目标位置信息，从而对目标物料图层进行精确地定位；基于此，可基于目标位置信息，更新初始图层信息，得到目标图层信息，以将初始页面横幅数据更新为目标页面横幅数据，目标页面横幅数据包括目标物料图层，并可在加载目标页面横幅数据时，使得目标物料图层按照目标图层信息对目标物料进行显示。可见，本发明实施例可实现页面横幅数据的复用，在仅需对页面横幅数据中某个物料的位置和/或大小等进行更新时，无须通过相应绘图工具对页面横幅数据进行编辑，从而有效节约成本，避免资源浪费。

基于上述方法实施例以及装置实施例的描述，本发明示例性实施例还提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器。所述存储器存储有能够被所述至少一个处理器执行的计算机程序，所述计算机程序在被所述至少一个处理器执行时用于使所述电子设备执行根据本发明实施例的方法。

本发明示例性实施例还提供一种存储有计算机程序的非瞬时计算机可读存储介质，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本发明实施例的方法。

本发明示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本发明实施例的方法。

参考图10，现将描述可以作为本发明的服务器或客户端的电子设备1000的结构框图，其是可以应用于本发明的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

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

电子设备1000中的多个部件连接至I/O接口1005，包括：输入单元1006、输出单元1007、存储单元1008以及通信单元1009。输入单元1006可以是能向电子设备1000输入信息的任何类型的设备，输入单元1006可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入。输出单元1007可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元1008可以包括但不限于磁盘、光盘。通信单元1009允许电子设备1000通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

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

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

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

如本发明使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

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

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

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

并且，应理解的是，以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (12)

1.一种图像处理方法，其特征在于，包括：

获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

2.根据权利要求1所述的方法，其特征在于，所述对所述初始物料图层进行变换处理，得到目标物料图层，包括：

将所述初始物料图层集成到变换处理组件中，所述变换处理组件用于支持对所述初始物料图层的变换处理；

基于所述变换处理组件，对所述初始物料图层进行变换处理，得到目标物料图层。

3.根据权利要求1所述的方法，其特征在于，所述状态变换信息包括缩放指示信息和位置移动信息；所述采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息，包括：

采用所述位置移动信息和所述缩放指示信息，计算实质移动信息，所述实质移动信息是指：对所述初始物料图层的变换处理为位置变换处理时的移动信息；

对所述实质移动信息和所述锚点坐标进行求和运算，得到所述目标物料图层的目标位置信息。

4.根据权利要求3所述的方法，其特征在于，所述缩放指示信息包括横向缩放指示信息和纵向缩放指示信息，所述位置移动信息包括横向位置移动信息和纵向位置移动信息，且所述实质移动信息包括横向实质移动信息和纵向实质移动信息；所述采用所述位置移动信息和所述缩放指示信息，计算实质移动信息，包括：

从所述初始图层信息中确定出所述初始物料图层的横向图层长度，并采用所述横向缩放指示信息和所述横向图层长度，计算横向缩放值，以及将所述横向位置移动信息与所述横向缩放值之间的差值，作为所述横向实质移动信息；

从所述初始图层信息中确定出所述初始物料图层的纵向图层高度，并采用所述纵向缩放指示信息和所述纵向图层高度，计算纵向缩放值，以及将所述纵向位置移动信息与所述纵向缩放值之间的差值，作为所述纵向实质移动信息。

5.根据权利要求3所述的方法，其特征在于，所述锚点坐标是基于所述初始图层信息中的图层缩放比例所确定的，且所述缩放指示信息包括横向缩放指示信息和纵向缩放指示信息；所述方法还包括：

根据所述横向缩放指示信息和所述纵向缩放指示信息之间的大小关系，从所述缩放指示信息中选取出目标缩放指示信息，所述目标缩放指示信息小于所述缩放指示信息中除所述目标缩放指示信息以外的其他缩放指示信息；

所述基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，包括：

分别基于所述目标缩放指示信息和所述目标位置信息，更新所述初始图层信息中的图层缩放比例和位置信息，得到目标图层信息。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：

获取背景矢量图，并对所述背景矢量图进行编辑，得到编辑后的背景矢量图；

基于所述编辑后的背景矢量图，创建目标背景图层，并将所述目标背景图层添加至所述目标页面横幅数据中，以使所述目标背景图层作为所述目标物料图层的背景图层。

7.根据权利要求6所述的方法，其特征在于，所述对所述背景矢量图进行编辑，得到编辑后的背景矢量图，包括：

对所述背景矢量图进行解析处理，得到所述背景矢量图的解析处理结果，所述解析处理结果包括文本内容；

从所述解析处理结果中，提取出至少一个文本内容，并将所述至少一个文本内容存储至文本数组中；

确定待编辑的目标文本信息，并将所述目标文本信息添加至所述文本数组中，得到编辑后的文本数组；

采用所述编辑后的文本数组对所述背景矢量图进行编辑，得到编辑后的背景矢量图。

8.根据权利要求7所述的方法，其特征在于，所述方法还包括：

记录所述至少一个文本内容中各个文本内容在所述文本数组中的索引信息；

所述将所述目标文本信息添加至所述文本数组中，得到编辑后的文本数组，包括：

在所述各个文本内容的索引信息中，确定与所述目标文本信息相匹配的待替换文本内容的索引信息，所述待替换文本内容为所述至少一个文本内容中的任一文本内容；

按照所述待替换文本内容的索引信息，将所述目标文本信息添加至所述文本数组中，以使所述目标文本信息替换所述待替换文本内容，且所述目标文本信息在所述文本数组中的索引信息为所述待替换文本的索引信息。

9.根据权利要求6所述的方法，其特征在于，所述基于所述编辑后的背景矢量图，创建目标背景图层，包括：

对所述编辑后的背景矢量图进行图片转换处理，得到所述编辑后的背景矢量图对应的目标背景图片；

生成所述目标背景图片的图片资源链接，并采用所述图片资源链接创建目标背景图层。

10.一种图像处理装置，其特征在于，所述装置包括：

获取单元，用于获取待处理的初始页面横幅数据，所述初始页面横幅数据包括初始物料图层，所述初始物料图层是按照初始图层信息对目标物料进行显示的；

处理单元，用于对所述初始物料图层进行变换处理，得到目标物料图层，并获取所述目标物料图层的状态变换信息，所述变换处理包括：位置变换处理和/或大小变换处理；

所述处理单元，还用于基于所述初始图层信息，确定锚点坐标，以及采用所述状态变换信息和所述锚点坐标，计算所述目标物料图层的目标位置信息；

所述处理单元，还用于基于所述目标位置信息，更新所述初始图层信息，得到目标图层信息，以将所述初始页面横幅数据更新为目标页面横幅数据，所述目标页面横幅数据包括所述目标物料图层，并在加载所述目标页面横幅数据时，使得所述目标物料图层按照所述目标图层信息对所述目标物料进行显示。

11.一种电子设备，其特征在于，包括：

处理器；以及

存储程序的存储器，

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据权利要求1-9中任一项所述的方法。

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