一种图片处理的方法及装置与流程

本申请涉及数据处理技术领域，尤其涉及一种图片处理的方法及装置。

背景技术：

随着互联网技术的发展，网络营销的应用也越来越广泛，网络营销具有传播广、速度快、内容丰富等优点。在网络营销过程中，为了更好地实现营销目的，有效的推广方式和策略是不可或缺的。

例如，其中一种营销推广方式为邮件营销。而邮件营销等营销内容中最重要的组成部分则是制作主推商品的精美图片。目前，通常是由人工来制作营销图片，例如，运营人员收集需要营销的商品图片、价格信息等商品基本信息交付设计师进行设计，当需要设计的图片比较多时，会导致设计师和运营人员的工作量较大，效率较低。

技术实现要素：

鉴于上述问题，提出了本申请以便提供一种克服上述问题或者至少部分地解决上述问题的一种图片处理的方法及装置。

第一方面，本申请提供了一种图片处理的方法，所述方法包括：

展示功能页面，所述功能页面包括多个图片模板，所述图片模板采用低耦合的组件设计；

从所述多个图片模板中确定目标图片模板；

获取用户输入的目标商品标识；

根据所述目标商品标识，从连接的电商系统中读取所述目标商品标识对应的目标商品的商品属性信息；

将所述商品属性信息填充到所述目标图片模板中，生成目标商品的目标图片。

可选地，所述将所述商品属性信息填充到所述目标图片模板中，生成目标商品的目标图片，包括：

将所述商品属性信息填充到所述目标图片模板中，生成图片预览信息，并展示所述图片预览信息；

当检测到用户对所述图片预览信息的确认指示时，则根据所述图片预览信息生成所述目标商品的目标图片。

可选地，在所述当检测到用户对所述图片预览信息的确认指示时，则根据所述图片预览信息生成所述目标商品的目标图片之前，所述将所述商品属性信息填充到所述目标图片模板中，生成目标商品的目标图片还包括：

检测用户对所述图片预览信息的编辑操作；

若检测到所述编辑操作，则根据用户输入的编辑信息，更新所述图片预览信息。

可选地，所述商品属性信息包括商品图片、货币类型、商品原价、商品售价以及商品名称；

所述将所述商品属性信息填充到所述目标图片模板中，生成图片预览信息，包括：

根据所述商品原价以及所述商品售价计算商品折扣；

将所述商品图片、货币类型、商品原价、商品售价、商品折扣以及商品名称填充在所述目标图片模板的对应位置，生成图片预览信息。

可选地，所述检测用户对所述图片预览信息的编辑操作包括：

对所述货币类型和/或所述商品原价和/或所述商品售价的修改操作；

或者，

对所述商品图片的显示位置的修改操作；

或者，

更新所述商品图片的操作。

可选地，所述目标图片为base64格式的图片，所述方法还包括：

将所述目标图片上传至云服务器，以由所述云服务器保存所述目标图片，并生成及提供所述目标图片的图片链接。

第二方面，本申请还提高了一种图片处理的装置，所述装置包括：

页面展示模块，用于展示功能页面，所述功能页面包括多个图片模板，所述图片模板采用低耦合的组件设计；

目标图片模板确定模块，用于从所述多个图片模板中确定目标图片模板；

商品属性信息确定模块，用于获取用户输入的目标商品标识，并根据所述目标商品标识，从连接的电商系统中读取所述目标商品标识对应的目标商品的商品属性信息；

目标图片生成模块，用于将所述商品属性信息填充到所述目标图片模板中，生成目标商品的目标图片。

可选地，所述目标图片生成模块包括：

预览子模块，用于将所述商品属性信息填充到所述目标图片模板中，生成图片预览信息，并展示所述图片预览信息；

确认子模块，用于当检测到用户对所述图片预览信息的确认指示时，则根据所述图片预览信息生成所述目标商品的目标图片。

第三方面，本申请还提供了一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如上述的方法。

第四方面，本申请还提供了一种存储介质，当所述存储介质中的指令由所述设备的处理器执行时，使得所述电子设备能够执行如上述的方法。

本申请具有如下有益效果：

在本实施例中，向用户展示的功能页面能够提供丰富的图片模板，当确定目标图片模板并获取用户输入的目标商品标识以后，则可以根据目标商品标识，从连接的电商系统中读取对应的目标商品的商品属性信息，并将商品属性信息自动填充到目标图片模板中，生成目标商品的目标图片，整个过程对用户而言操作简单，节省大量的设计及运营人力资源，实现高效作图的目的。

另外，本实施例的图片模板采用低耦合的组件设计，开发人员能快速添加新的图片模板，极大的节省系统维护成本。

附图说明

图1为本申请实施例的一种图片处理的方法实施例的步骤流程图；

图2为本申请实施例的功能页面示意图；

图3为本申请实施例的目标图片模板示意图；

图4为本申请实施例的图片预览信息展示示意图；

图5为本申请实施例的目标图片示意图；

图6为本申请实施例的一种图片处理的装置实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

参照图1，示出了本申请实施例的一种图片处理的方法实施例的步骤流程图，具体可以包括如下步骤：

步骤101，展示功能页面，所述功能页面包括多个图片模板。

其中，本实施例可以应用于商品管理网站(或商品管理系统)中，而功能页面可以为商品管理网站中的页面，当用户(如运营人员等操作人员)触发商品管理网站中的该功能页面对应的控件时，则可以进入该功能页面中。在一种实施方式中，可以通过浏览器、小程序等打开功能页面。

在该实施例中，功能页面可以为用于展示多个图片模板的页面。其中，图片模板可以为用于对图片进行设计的模板样式，其可以根据运营需要由设计师预先设计、并部署到功能页面中。例如，如图2的功能页面示意图所示，该功能页面中可以包括多个图片模板。

为了可以在功能页面中快速增加更多的图片模板，丰富图片模板的种类和样式，在一种例子中，图片模板可以采用低耦合的组件设计。例如，可以采用react组件设计图片模板，图片模板的样式、交互逻辑可以在组件内实现，这些组件被封装在一个数组内提供给功能页面引用。这样，添加一个图片模板只需添加一个新的react组件，并在组件内完成模板样式、交互逻辑的代码编写，而无需在功能页面中添加额外逻辑即可使用。

步骤102，从所述多个图片模板中确定目标图片模板。

例如，从图2可以看出，功能页面中展示的图片模板可以被用户选择，用户可以通过点击图片的区域来选择对应的图片模板，被用户选择的图片模板可以标记上选择标识(如图2的“√”所示)，则被用户选定的图片模板可以作为目标图片模板。

作为一种示例，针对图2选定的目标图片模板，如图3所示，目标图片模板可以包括商品图片控件、货币类型控件、商品原价控件、商品售价控件以及商品折扣控件等。

步骤103，获取用户输入的目标商品标识。

在功能页面中，用户除了可以选择目标图片模板以外，还可以输入目标商品标识，例如，在图2中，用户可以在“图片名称”的输入框中输入所要编辑图片的目标商品的目标商品标识。

在一种例子中，目标商品标识可以为目标商品的图片在系统的商品库中存储的id信息，例如，目标商品标识可以包括但不限于：商品id、商品spu(standardproductunit，标准产品单位)id等。

步骤104，根据所述目标商品标识，从连接的电商系统中读取所述目标商品标识对应的目标商品的商品属性信息。

在实际中，步骤104可以根据用户在功能页面触发的操作来执行，例如，在图2中，当用户选定目标图片模板以及输入目标商品标识以后，若用户点击页面中的“创建图片”按钮，则可以执行步骤104。

在本实施例中，商品管理网站可以与电商系统连接，其中，电商系统中可以包括存储海量商品数据的商品库。

步骤104在被执行时，可以根据目标商品标识生成属性获取请求，并通过调用电商系统提供的接口，将属性获取请求发送至电商系统中。电商系统通过解析该属性获取请求确定商品管理网站需要获取目标商品标识对应的目标商品的商品属性信息，则可以从自身的商品库中查找该目标商品标识，并获取该标识实时的商品属性信息返回给商品管理网站。

作为一种示例，目标商品的商品属性信息可以包括但不限于：一个或多个商品图片、货币类型、商品原价、商品售价以及商品名称等。

步骤105，将所述商品属性信息填充到所述目标图片模板中，生成目标商品的目标图片。

在该步骤中，获得商品属性信息以后，可以将商品属性信息填充在目标图片模板的对应位置，生成目标商品的目标图片。

在一种实施方式中，步骤105可以包括子步骤s11以及子步骤s14：

子步骤s11，将所述商品属性信息填充到所述目标图片模板中，生成图片预览信息，并展示所述图片预览信息。

例如，如图4所示，图片预览信息中可以包括填充到目标图片模板中的、位于图4下部分的商品属性信息，以及位于图4上部分的预览图片。

在一种实施方式中，子步骤s11可以进一步包括如下子步骤：

根据所述商品原价以及所述商品售价计算商品折扣；将所述商品图片、货币类型、商品原价、商品售价、商品折扣以及商品名称填充在所述目标图片模板的对应位置，生成图片预览信息。

例如，如图4所示，假设目标商品为一个背包，获得该背包的商品属性信息包括：四张背包图片、商品原价为49.99、商品售价为34.99、货币类型为美元以及商品名称(即图4中的商品标题)，可以根据商品原价以及商品售价计算商品折扣为30％(计算方式为：(49.99-34.99)/49.99)。然后，将商品图片、货币类型、商品原价、商品售价、商品折扣以及商品名称填充在目标图片模板的对应位置，生成的图片预览信息可以如图4所示。

在一种实施方式中，用户还可以按需对图片预览信息进行自定义修改，则在子步骤s11之后，步骤105还可以包括子步骤s12以及子步骤s13：

子步骤s12，检测用户对所述图片预览信息的编辑操作。

在一种例子中，上述编辑操作可以包括：对货币类型和/或商品原价和/或商品售价的修改操作。

由于初始填写在目标图片模板中的图片属性信息为从电商系统中获取的信息，当将该信息填充到目标图片模板以后，用户可以对该图片属性信息进行修改。例如，在图4中，用户可以修改货币类型、商品原价、商品售价的一种或结合。

在另一种例子中，上述编辑操作可以包括：对所述商品图片的显示位置的修改操作。

例如，在图4中，有四张商品图片，用户可以更改四张图片在模板中的位置，如将大图中的图片与第一个小图中的图片互换等。

在另一种例子中，上述编辑操作可以包括：更新所述商品图片的操作。

在该示例中，若某个商品图片不是用户想要的图片，则用户还可以在该商品图片的位置上传新的商品图片，以达到图片更新的效果。

在实现时，可以使用html5的dom对象拖拽api，实现自由拖拽图片到图片模板。

需要说明的是，本实施例并不限于上述的编辑操作，本领域技术人员采用其他编辑操作进行图片预览信息的编辑均是可以的。

子步骤s13，若检测到所述编辑操作，则根据用户输入的编辑信息，更新所述图片预览信息。

在该步骤中，当检测到用户的编辑操作时，可以获取用户输入的编辑信息，然后根据该编辑信息生成新的图片预览信息，并显示该新的图片预览信息。

子步骤s14，当检测到用户对所述图片预览信息的确认指示时，则根据所述图片预览信息生成所述目标商品的目标图片。

例如，如图4所示，当用户点击图4的“保存”按钮以后，则可以判定检测到用户的确认指示，此时可以生成如图5所示的目标图片，并将该目标图片保存在本地。

在一种实现中，可以使用npm插件dom-to-image生成base64格式的目标图片。

在应用时，目标图片可以根据需要应用在各种营销方式中，例如，可以在营销邮件中增加主推款式的商品的图片。

在一种实施方式中，本实施例还可以包括如下子步骤：

将所述目标图片上传至云服务器，以由所述云服务器保存所述目标图片，并生成及提供所述目标图片的图片链接。

在该实施例中，可以在网页端将base64格式的目标图片上传至云服务器。在实现时，可以使用antdesign图片上传组件来上传目标图片，从而为用户提供交互友好的图片上传体验。

云服务器收到目标图片以后，将base64格式的目标图片转换为图片文件保存在云服务器上，图片文件在云服务器上的地址即为图片链接。随后，云服务器将该图片链接连同其配置信息(商品属性信息、自定义内容等)保存在系统内，并提供一个列表给操作人员编辑或者下载图片。用户可以将目标图片一键下载到本地，在下载时，可以支持单张图片下载或者批量图片下载。

在本实施例中，向用户展示的功能页面能够提供丰富的图片模板，当确定目标图片模板并获取用户输入的目标商品标识以后，则可以根据目标商品标识，从连接的电商系统中读取对应的目标商品的商品属性信息，并将商品属性信息自动填充到目标图片模板中，生成目标商品的目标图片，整个过程对用户而言操作简单，节省大量的设计及运营人力资源，实现高效作图的目的。

另外，本实施例的图片模板采用低耦合的组件设计，开发人员能快速添加新的图片模板，极大的节省系统维护成本。

基于上述的图片处理的方法，参照图6，示出了本申请一种图片处理的装置实施例的结构框图，所述装置可以包括如下模块：

页面展示模块601，用于展示功能页面，所述功能页面包括多个图片模板，所述图片模板采用低耦合的组件设计；

目标图片模板确定模块602，用于从所述多个图片模板中确定目标图片模板；

商品属性信息确定模块603，用于获取用户输入的目标商品标识，并根据所述目标商品标识，从连接的电商系统中读取所述目标商品标识对应的目标商品的商品属性信息；

目标图片生成模块604，用于将所述商品属性信息填充到所述目标图片模板中，生成目标商品的目标图片。

在一种实施方式中，所述目标图片生成模块604包括：

预览子模块，用于将所述商品属性信息填充到所述目标图片模板中，生成图片预览信息，并展示所述图片预览信息；

确认子模块，用于当检测到用户对所述图片预览信息的确认指示时，则根据所述图片预览信息生成所述目标商品的目标图片。

在一种实施方式中，所述目标图片生成模块604还包括：

编辑操作检测子模块，用于检测用户对所述图片预览信息的编辑操作；

图片预览更新子模块，用于若检测到所述编辑操作，则根据用户输入的编辑信息，更新所述图片预览信息。

在一种实施方式中，所述商品属性信息包括商品图片、货币类型、商品原价、商品售价以及商品名称；

所述预览子模块具体用于：

根据所述商品原价以及所述商品售价计算商品折扣；

将所述商品图片、货币类型、商品原价、商品售价、商品折扣以及商品名称填充在所述目标图片模板的对应位置，生成图片预览信息。

在一种实施方式中，所述编辑操作检测子模块具体用于：

对所述货币类型和/或所述商品原价和/或所述商品售价的修改操作；

或者，

对所述商品图片的显示位置的修改操作；

或者，

更新所述商品图片的操作。

在一种实施方式中，所述目标图片为base64格式的图片，所述装置还包括：

图片上传模块，用于将所述目标图片上传至云服务器，以由所述云服务器保存所述目标图片，并生成及提供所述目标图片的图片链接。

本申请实施例还公开了一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现上述的方法实施例。

本申请实施例还公开了一种存储介质，当所述存储介质中的指令由所述设备的处理器执行时，使得所述电子设备能够执行上述的方法实施例。

关于上述实施例中的装置、电子设备及存储介质，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

虽然本说明书包含许多具体实施细节，但是这些不应被解释为限制任何发明的范围或所要求保护的范围，而是主要用于描述特定发明的具体实施例的特征。本说明书内在多个实施例中描述的某些特征也可以在单个实施例中被组合实施。另一方面，在单个实施例中描述的各种特征也可以在多个实施例中分开实施或以任何合适的子组合来实施。此外，虽然特征可以如上所述在某些组合中起作用并且甚至最初如此要求保护，但是来自所要求保护的组合中的一个或多个特征在一些情况下可以从该组合中去除，并且所要求保护的组合可以指向子组合或子组合的变型。

类似地，虽然在附图中以特定顺序描绘了操作，但是这不应被理解为要求这些操作以所示的特定顺序执行或顺次执行、或者要求所有例示的操作被执行，以实现期望的结果。在某些情况下，多任务和并行处理可能是有利的。此外，上述实施例中的各种系统模块和组件的分离不应被理解为在所有实施例中均需要这样的分离，并且应当理解，所描述的程序组件和系统通常可以一起集成在单个软件产品中，或者封装成多个软件产品。

由此，主题的特定实施例已被描述。其他实施例在所附权利要求书的范围以内。在某些情况下，权利要求书中记载的动作可以以不同的顺序执行并且仍实现期望的结果。此外，附图中描绘的处理并非必需所示的特定顺序或顺次顺序，以实现期望的结果。在某些实现中，多任务和并行处理可能是有利的。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。