CN104978723B - 一种图片处理方法和装置 - Google Patents

Abstract

本申请涉及一种图片处理方法和装置，该方法包括：根据接收的交互请求在多个图片图层的顶层添加交互图层，其中交互请求中携带有待关联图片图层的标识；根据交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及根据更新后的图片数据，对各图片图层中的图片进行合成。根据本申请，能够通过用户对位于顶层的交互图层进行操作，调整各图片图层中的图片数据（如，调整大小、位置、角度）。同时，可以在无需引入其他后端服务支持的情况下，在浏览器中直接合成图片。

Description

一种图片处理方法和装置

技术领域

本申请涉及图片处理领域，更具体地，涉及一种图片处理方法和装置。

背景技术

用户在浏览器中对图片进行处理的时候，有时需要将多个图片合成为一个图片，并且在合成之前，通常需要对待合成图片中的某些图片进行缩放、旋转等操作。

现有技术中，存在多种对多个图片进行合成的方法。其中一种方法是，基于图块模板对多图片进行合成，即将不同的图片在以某种固定的图块模式或布局拼在一起。这种方法的缺陷在于，待合成图片的合成位置会因为图块模板的设定而被固定住，并且用户无法对图片进行缩放、旋转等操作。另外一种方法是，将多个待合成图片作为多个图层在画布上进行叠加，操作以达到显示合成效果的目的。这种方法会带来的一些问题包括，当用户需要进行调整的图片不在顶层时，由于该层被其上层的图片遮盖，用户无法对该层的图片的操作；此外，如果想要对所叠加的图片进行合成，必须依赖后端服务器相关的技术来支持，而不能在浏览器中直接生成合成的图片。

因此，在本领域中，需要一种图片处理的方案，能够解决现有技术中用户无法对除顶层图片之外的其他图片进行调整和无法在浏览器中直接合成图片等问题。

发明内容

本申请的主要目的在于提供一种图片处理技术，以解决现有技术中用户无法对除顶层图片之外的其他图片数据进行调整和无法在浏览器中直接合成图片等问题。

根据本申请的第一方面，提供了一种图片处理方法，其特征在于，方法包括：根据接收的交互请求在多个图片图层的顶层添加交互图层，其中交互请求中携带有待关联图片图层的标识；根据交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及根据更新后的图片数据，对各图片图层中的图片进行合成。

根据本申请的第二方面，提供了一种图片处理装置，其特征在于，一个图片图层中包含至少一张图片，装置包括：添加模块，用于根据接收的交互请求在多个图片图层的顶层添加交互图层；关联模块，用交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；更新模块，用于根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及合成模块，用于根据更新后的图片数据，对各图片图层中的图片进行合成。

与现有技术相比，根据本申请的技术方案，能够在叠加多个图片的基础上，满足用户对各图片数据进行调整的需要，同时可以实时呈现用户对图片数据调整后的效果，并且可以在无需引入其他后端服务支持的情况下，在浏览器中直接合成图片。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请一个实施例的图片处理方法的流程图；

图2a是根据本申请一个实施例的图片处理方法的示意图；

图2b是根据图2a的图片处理方法的操作过程中的用户界面的示意图；

图2c是根据图2a的图片处理方法的合成后的图片的示意图；以及

图3是根据本申请一个实施例的图片处理装置的框图。

具体实施方式

在图片处理领域，每一个图层都是由许多像素组成的。在每一个图层中，可以根据所提供的图片数据绘制图片。每一个含有图片的图层，即，图片图层，可以通过上下叠加的方式来组成整个图像。

目前，主流浏览器HTML5的相关特性（canvas，画布）允许用户在用户界面上进行绘图操作。本申请提供一种在HTML5浏览器中实现对多图片进行缩放、旋转等调整并且对调整后的图片进行合成的方法。

本申请的主要思想在于，通过根据接收的交互请求在多个图片图层的顶层添加交互图层；根据该交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及根据更新后的图片数据对各图片图层中的图片进行合成。该技术方案能够在叠加多个图片图层的基础上，通过用户对位于顶层的交互图层进行操作，调整各图片图层中的图片数据（如，调整大小、位置、角度），同时可以实时呈现用户对图片数据调整后的效果，并且可以在无需引入其他后端服务支持的情况下，在浏览器中直接合成图片。

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

参考图1，图1是根据本申请一个实施例的图片处理方法100的流程图。如图1所示，方法100开始于步骤101。

在步骤101，根据接收的交互请求在多个图片图层的顶层添加交互图层。

具体而言，在对图片进行处理的初始阶段，一个图片图层中包含至少一张图片，其中，图层的大小可以是预先设定的，每一个图层的大小、形状等规格可以相同。然后，可以根据合成时需要的顺序，将含有图片的图层由底向上依次叠加，同时记录并存储所有图片图层中的图片数据。

图片数据可以包括图片图层中的图片的序号（按叠加顺序计算）、内容、大小（例如，高度和宽度）、中心点坐标和角度中的至少一种。记录并存储这些数据。

当接收到用户启动交互的交互请求时，执行在图片图层的顶层添加一透明的交互图层。交互图层的大小、形状等规格可以与图片图层相同。该交互图层可以用于捕捉用户对交互图层的操作，如通过触屏、鼠标等输入设备执行的拖拽、点击等。

在步骤101中，根据标识所对应的图片图层中的图片数据，可以在交互图层中生成交互提示，以供用户基于交互提示对交互图层进行操作。具体地，可以根据标识所对应的图片图层中的图片的大小、中心点坐标和角度等数据，在交互图层绘制交互提示。

交互提示在交互图层中的显示形式可以包括方框、阴影等。

交互提示的内容可以包括：提示图片缩放的拖拽点、角度旋转提示、提示性文字或其他任何可以向用户提供操作提示的提示性信息。

由于在顶层的交互图层中生成交互提示，该交互提示不会被下面的其他图片图层遮挡，可以完整地呈现给用户，从而提高了用户体验。

在步骤102，根据交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联。

具体而言，每一个图片图层都对应一个标识，如序号等。所接收的交互请求中携带有图片图层的标识，可以根据该标识找到相对应的图片图层，以便当接收到用户在交互图层输入的图片数据后，可以将该图片数据传递到该图片图层。

根据本申请的一个实施例，可以对交互图层设置“关联图层”这样一个字段。根据接收的交互请求中携带的待关联的图片图层的标识，在该字段中记录该标识，如图片图层的序号。

在步骤103，根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据。

具体而言，由于在图片图层的顶层添加了交互图层，可以接收用户在交互图层的操作请求。并且，在步骤102，该交互图层已经与需要调整的图片相对应的图片图层相关联，因此，可以通过接收用户在交互图层输入的图片数据，如调整后的大小、调整后的中心点坐标、旋转后的角度等，来调整与交互图层所关联的图片图层中的图片数据。

根据本申请的一个实施例，根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据的步骤可以进一步包括：监听用户对交互图层的操作，以获取输入的图片数据；以及根据输入的图片数据更新与所交互图层所关联的图片图层中的图片数据。

具体地，在交互图层设置监听，以监听用户的操作事件（如触摸、鼠标点击、键盘按键等输入设备触发的操作事件）。当确定操作的目标（调整大小、调整中心点坐标或旋转）后，可以根据操作的起始和终止位置之间的距离、位置的变化差值、角度的变化差值等，计算操作后的大小、中心点坐标、角度等数据，该数据即为用户输入的图片数据。

在获取的输入的图片数据后，可以通过交互图层与所关联图层的关联关系，找到所关联的图层，并且将该图片图层中的图片数据更新为所获取的用户输入的图片数据。

根据用户输入的图片数据，可以重新绘制该图片图层，重新绘制后的图片图层中的图片具有用户输入的图片数据，从而达到更新图片图层中的图片的目的。同时，也可以实时向用户呈现与交互图层所关联的图片图层中的图片数据调整后的效果。

另外，用户在交互图层进行操作时，为了实时向用户呈现对交互图层中的交互提示的操作效果，步骤103可以进一步包括：根据输入的图片数据重新生成交互图层中的交互提示。

需要说明的是，对交互图层的监听是持续不断的（时间维度上的持续），每次监听到有事件发生，就根据该事件所对应的输入的图片数据，更新交互图层所关联的图片图层中的图片数据。

另外，需要说明的是，上述步骤101至103描述了如何通过交互图层更新某一图片图层中的图片数据的过程。当完成对某一图片图层中的图片数据的更新后，可以基于来自用户的结束交互的请求，去除交互图层。当再次接收到启动交互的请求时，可以再次执行步骤101至103，以满足用户对各图片图层中的图片数据进行调整的需要。

在步骤104，根据更新后的图片数据对各图片图层中的图片进行合成。

具体而言，当接收到对各图片图层中的图片数据进行合成的合成请求时，可以依次读取每个图片图层中更新后的图片数据，然后，在新建的图层中，可以由底向上，依次绘制各图片图层中的图片，并且在绘制时，上面图层覆盖下面图层，，同时，擦除原各图片图层，从而获取处理后的图片。

优选地，在根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据的步骤之后，在根据更新后的图片数据对各图片图层中的图片进行合成的步骤之前，取消对交互图层的监听。

优选地，在根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据的步骤之后，在根据更新后的图片数据对各图片图层中的图片进行合成的步骤之前，可以去除交互图层。

至此，描述了根据本申请一个实施例的图片处理方法100的流程图。本实施例的方法100通过根据接收的交互请求在多个图片图层的顶层添加交互图层；根据交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及根据更新后的图片数据对各图片图层中的图片进行合成。与现有技术相比，该方法100可以在叠加多个图片的基础上，通过用户在顶层的交互图层进行操作，调整各图片图层中的图片数据，同时可以实时呈现用户对图片数据调整后的效果，并且可以在无需引入其他后端服务支持的情况下，在浏览器中直接合成图片。

图2a至图2c示意性地示出了根据本申请的一个实施例的图片处理方法的实际操作过程。

其中，图2a是根据本申请一个实施例的图片处理方法的示意图。如图2a所示，在浏览器中以叠加方式添加3个图片图层，分别为图片图层A、图片图层B和图片图层C每个图片图层中绘制有一张图片。在顶层添加交互图层D，并且指定图片图层A为待关联的图片图层，使交互图层D与图片图层A相关联。在交互图层D中，根据图片图层A的图片数据，绘制交互提示。

图2b是根据图2a的图片处理方法的操作过程中的用户界面的示意图。如图2b所示，图片图层A、图片图层B和图片图层C叠加而置，用户可对顶层的交互图层进行操作，如触摸、鼠标点击、键盘按键等。通过在交互图层进行操作可以通过交互图层与所关联图层的关联关系，以在交互图层输入的图片数据更新所关联的图片图层的图片数据。

例如，当用户需要对图片图层A中的图片进行调整时，可以指定该图片图层A，使交互图层与其相关联，然后基于交互图层D中的交互提示进行所需操作，如触摸、鼠标点击、键盘按键等。用户对交互图层的每一次操作都对应一个输入的图片数据，通过将所关联的图片图层A的图片数据更新为该用户输入的数据，可以重新绘制图片图层A中的图片，从而完成对图片图层A中的图片的调整。当完成对图片图层A中的图片数据进行调整后，取消对交互图层的监听，并且移除交互图层D。根据上述方法，用户可以对图片图层B和/或图片图层C中的图片数据进行调整。在用户的操作过程中，可以实时看到对所关联图片图层中的图片数据调整后的效果，并且也可以实时看到交互图层中的交互提示在用户操作后的效果。另外，在用户的操作过程中，交互图层始终位于顶层，其中的交互提示可以完整的呈现给用户，由于其不会被其他图层覆盖，因此不会影响用户的操作体验。

图2c是根据图2a的图片处理方法的合成后的图片的示意图。如图2c所示，当用户对需要进行调整的图片的图片数据完成调整后，可以通过发出合成请求，例如点击“获取合成图片”，使图片图层A、图片图层B和图片图层C中的图片进行合成操作，从而在浏览器中直接获取合成后的图片。

图3是根据本申请一个实施例的图片处理装置300的框图。

如图3所示，装置300包括：添加模块310，用于根据接收的交互请求在多个图片图层的顶层添加交互图层；关联模块320，用交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；更新模块330，用于根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及合成模块340，用于根据更新后的图片数据，对各图片图层中的图片进行合成。

根据本申请的一个实施例，每个图片图层规格相同。

根据本申请的一个实施例，添加模块310进一步包括（未示出）：提示子模块，用于根据标识所对应的图片图层中的图片数据，在交互图层中生成交互提示，以供用户基于交互提示对交互图层进行操作。

根据本申请的一个实施例，更新模块330进一步包括（未示出）：监听子模块，用于监听用户对交互图层的操作，以获取输入的图片数据；以及更新子模块，用于根据输入的图片数据，更新与所交互图层所关联的图片图层中的图片数据。

根据本申请的一个实施例，装置300还包括（未示出）：生成模块，用于根据输入的图片数据，重新生成交互图层中的交互提示。

根据本申请的一个实施例，装置300还包括（未示出）：去除模块，用于去除交互图层。

根据本申请的一个实施例，合成模块340进一步包括（未示出）：绘制子模块，用于按照自底向上的顺序进行绘制，并且上方图片图层覆盖下方图片图层。

根据本申请的一个实施例，图片数据包括图片图层中的图片的大小、中心点坐标和角度中的至少一种。

由于本实施例的装置所实现的功能基本相应于前述图1所示的方法实施例，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此不做赘述。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)。内存是计算机可读介质的示例。

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

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

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

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

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

根据接收的交互请求在多个图片图层的顶层添加透明的交互图层，其中所述交互请求中携带有待关联图片图层的标识；

根据所述交互请求中携带的待关联图片图层的标识，将所述交互图层与所述标识所对应的图片图层进行关联；

根据在所述交互图层中输入的图片数据，更新所述交互图层所关联的图片图层中的图片数据；以及

根据更新后的图片数据，对各图片图层中的图片进行合成。

2.根据权利要求1所述的方法，其特征在于，每个图片图层规格相同。

3.根据权利要求1所述的方法，其特征在于，根据接收的交互请求在多个图片图层的顶层添加交互图层的步骤进一步包括：

根据所述标识所对应的图片图层中的图片数据，在所述交互图层中生成交互提示，以供用户基于交互提示对交互图层进行操作。

4.根据权利要求1所述的方法，其特征在于，根据在所述交互图层中输入的图片数据，更新所述交互图层所关联的图片图层中的图片数据，进一步包括：

监听用户对所述交互图层的操作，以获取输入的图片数据；以及

根据所述输入的图片数据，更新与所交互图层所关联的图片图层中的图片数据。

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

根据输入的图片数据，重新生成交互图层中的交互提示。

6.根据权利要求1所述的方法，其特征在于，在根据在所述交互图层中输入的图片数据，更新所述交互图层所关联的图片图层中的图片数据的步骤之后，在根据更新后的图片数据对各图片图层中的图片进行合成的步骤之前，还包括：

去除所述交互图层。

7.根据权利要求1所述的方法，其特征在于，根据更新后的图片数据，对各图片图层中的图片进行合成，进一步包括：

按照自底向上的顺序进行绘制，并且上方图片图层覆盖下方图片图层。

8.根据权利要求1～7任一所述的方法，其特征在于，所述图片数据包括图片图层中的图片的大小、中心点坐标和角度中的至少一种。

9.一种图片处理装置，其特征在于，包括：

添加模块，用于根据接收的交互请求在多个图片图层的顶层添加透明的交互图层；

关联模块，用所述交互请求中携带的待关联图片图层的标识，将所述交互图层与所述标识所对应的图片图层进行关联；

更新模块，用于根据在所述交互图层中输入的图片数据，更新所述交互图层所关联的图片图层中的图片数据；以及

合成模块，用于根据更新后的图片数据，对各图片图层中的图片进行合成。

10.根据权利要求9所述的装置，其特征在于，所述添加模块进一步包括：

提示子模块，用于根据所述标识所对应的图片图层中的图片数据，在所述交互图层中生成交互提示，以供用户基于交互提示对交互图层进行操作。