[发明专利]一种图片处理方法和装置

说明书

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

附图说明

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

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

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

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

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

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

具体实施方式

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

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

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