一种图片处理方法和装置的制造方法
【技术领域】
[0001]本申请涉及图片处理领域，更具体地，涉及一种图片处理方法和装置。
【背景技术】
[0002]用户在浏览器中对图片进行处理的时候，有时需要将多个图片合成为一个图片，并且在合成之前，通常需要对待合成图片中的某些图片进行缩放、旋转等操作。
[0003]现有技术中，存在多种对多个图片进行合成的方法。其中一种方法是，基于图块模板对多图片进行合成，即将不同的图片在以某种固定的图块模式或布局拼在一起。这种方法的缺陷在于，待合成图片的合成位置会因为图块模板的设定而被固定住，并且用户无法对图片进行缩放、旋转等操作。另外一种方法是，将多个待合成图片作为多个图层在画布上进行叠加，操作以达到显示合成效果的目的。这种方法会带来的一些问题包括，当用户需要进行调整的图片不在顶层时，由于该层被其上层的图片遮盖，用户无法对该层的图片的操作；此外，如果想要对所叠加的图片进行合成，必须依赖后端服务器相关的技术来支持，而不能在浏览器中直接生成合成的图片。
[0004]因此，在本领域中，需要一种图片处理的方案，能够解决现有技术中用户无法对除顶层图片之外的其他图片进行调整和无法在浏览器中直接合成图片等问题。
【发明内容】
[0005]本申请的主要目的在于提供一种图片处理技术，以解决现有技术中用户无法对除顶层图片之外的其他图片数据进行调整和无法在浏览器中直接合成图片等问题。
[0006]根据本申请的第一方面，提供了一种图片处理方法，其特征在于，方法包括:根据接收的交互请求在多个图片图层的顶层添加交互图层，其中交互请求中携带有待关联图片图层的标识；根据交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及根据更新后的图片数据，对各图片图层中的图片进行合成。
[0007]根据本申请的第二方面，提供了一种图片处理装置，其特征在于，一个图片图层中包含至少一张图片，装置包括:添加模块，用于根据接收的交互请求在多个图片图层的顶层添加交互图层；关联模块，用交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；更新模块，用于根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及合成模块，用于根据更新后的图片数据，对各图片图层中的图片进行合成。
[0008]与现有技术相比，根据本申请的技术方案，能够在叠加多个图片的基础上，满足用户对各图片数据进行调整的需要，同时可以实时呈现用户对图片数据调整后的效果，并且可以在无需引入其他后端服务支持的情况下，在浏览器中直接合成图片。
【附图说明】
[0009]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中:
[0010]图1是根据本申请一个实施例的图片处理方法的流程图；
[0011]图2a是根据本申请一个实施例的图片处理方法的示意图；
[0012]图2b是根据图2a的图片处理方法的操作过程中的用户界面的示意图；
[0013]图2c是根据图2a的图片处理方法的合成后的图片的示意图；以及
[0014]图3是根据本申请一个实施例的图片处理装置的框图。
【具体实施方式】
[0015]在图片处理领域，每一个图层都是由许多像素组成的。在每一个图层中，可以根据所提供的图片数据绘制图片。每一个含有图片的图层，即，图片图层，可以通过上下叠加的方式来组成整个图像。
[0016]目前，主流浏览器HTML5的相关特性(canvas，画布)允许用户在用户界面上进行绘图操作。本申请提供一种在HTML5浏览器中实现对多图片进行缩放、旋转等调整并且对调整后的图片进行合成的方法。
[0017]本申请的主要思想在于，通过根据接收的交互请求在多个图片图层的顶层添加交互图层；根据该交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联；根据在交互图层中输入的图片数据，更新交互图层所关联的图片图层中的图片数据；以及根据更新后的图片数据对各图片图层中的图片进行合成。该技术方案能够在叠加多个图片图层的基础上，通过用户对位于顶层的交互图层进行操作，调整各图片图层中的图片数据(如，调整大小、位置、角度)，同时可以实时呈现用户对图片数据调整后的效果，并且可以在无需引入其他后端服务支持的情况下，在浏览器中直接合成图片。
[0018]为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0019]参考图1，图1是根据本申请一个实施例的图片处理方法100的流程图。如图1所示，方法100开始于步骤101。
[0020]在步骤101，根据接收的交互请求在多个图片图层的顶层添加交互图层。
[0021]具体而言，在对图片进行处理的初始阶段，一个图片图层中包含至少一张图片，其中，图层的大小可以是预先设定的，每一个图层的大小、形状等规格可以相同。然后，可以根据合成时需要的顺序，将含有图片的图层由底向上依次叠加，同时记录并存储所有图片图层中的图片数据。
[0022]图片数据可以包括图片图层中的图片的序号(按叠加顺序计算)、内容、大小(例如，高度和宽度)、中心点坐标和角度中的至少一种。记录并存储这些数据。
[0023]当接收到用户启动交互的交互请求时，执行在图片图层的顶层添加一透明的交互图层。交互图层的大小、形状等规格可以与图片图层相同。该交互图层可以用于捕捉用户对交互图层的操作，如通过触屏、鼠标等输入设备执行的拖拽、点击等。
[0024]在步骤101中，根据标识所对应的图片图层中的图片数据，可以在交互图层中生成交互提示，以供用户基于交互提示对交互图层进行操作。具体地，可以根据标识所对应的图片图层中的图片的大小、中心点坐标和角度等数据，在交互图层绘制交互提示。
[0025]交互提示在交互图层中的显示形式可以包括方框、阴影等。
[0026]交互提示的内容可以包括:提示图片缩放的拖拽点、角度旋转提示、提示性文字或其他任何可以向用户提供操作提示的提示性信息。
[0027]由于在顶层的交互图层中生成交互提示，该交互提示不会被下面的其他图片图层遮挡，可以完整地呈现给用户，从而提高了用户体验。
[0028]在步骤102，根据交互请求中携带的待关联图片图层的标识，将交互图层与标识所对应的图片图层进行关联。
[0029]具体而言，每一个图片图层都对应一个标识，如序号等。所接收的交互请求中携带有图片图层的标识，可以根据该标识找到相对应的图片图层，以便当接收到用户在交互图层输入的图片数据后，可以将该图片数据传递到该图片图层。