CN103778651B - 在Web前端进行合图的方法 - Google Patents

Abstract

本发明公开一种在Web前端进行合图的方法，包括如下步骤：获得在Web页面中输入的多张待处理图片，并通过实时访问解析每张所述待处理图片的原始引用位置标识，其中，所述原始引用位置标识与所述待处理图片一一对应；根据预设合并原则获得所述多张待处理图片的新引用位置标识，并利用所述新引用位置标识替换所述原始引用位置标识以将所述待处理图片设置到对应的位置；根据所述多张待处理图片及对应的新引用位置标识实时生成合并图并显示给用户。本发明在Web前端进行合图，从而可以将合图的中间效果和最终效果实时地呈现给用户，便于用户及时调整。

Description

在Web前端进行合图的方法

技术领域

本发明涉及互联网技术领域，特别涉及一种在Web前端进行合图的方法。

背景技术

随着互联网技术的不断发展，人们越来越习惯从网页上的图片直接获取信息。因此，图片质量及布局在Web页面开发中具有越来越重要的位置。合图开发作为高性能的Web前端开发中必须的步骤。

现有的合图方法是在完成开发后在编译阶段统一根据手动的配置项进行图片的合并和引用代码的替换。这样合图方法不仅操作复杂维护成本高，而且不能规避上线风险。一旦合图错误，则需重新进行一次冗长的前端编译流程，从而导致在大型前端项目中开发成本较高。

发明内容

本发明旨在至少在一定程度上解决上述技术问题之一或至少提供一种有用的商业选择。为此，本发明的目的在于提出一种在Web前端进行合图的方法，该方法在Web前端进行合图，从而可以将合图的中间效果和最终效果实时地呈现给用户，便于用户及时调整。

为实现上述目的，本发明的实施例提供一种在Web前端进行合图的方法，包括如下步骤：

获得在Web页面中输入的多张待处理图片，并通过实时访问解析每张所述待处理图片的原始引用位置标识，其中，所述原始引用位置标识与所述待处理图片一一对应；

根据预设合并原则获得所述多张待处理图片的新引用位置标识，并利用所述新引用位置标识替换所述原始引用位置标识以将所述待处理图片设置到对应的位置；以及

根据所述多张待处理图片及对应的新引用位置标识实时生成合并图并显示给用户。

根据本发明实施例的在Web前端进行合图的方法，可以在Web前端进行合图，即直接在开发调试阶段进行图片合并，解决了引用代码的自动化实时替换，合图的图片实时的生效，彻底规避了线上风险，而且提高了前端合图的开发效率。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为根据本发明实施例的在Web前端进行合图的方法的流程图；以及

图2为根据本发明实施例的合图的效果图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

下面参考图1描述本发明实施例的在Web前端进行合图的方法，包括如下步骤：

步骤S101，获得在Web页面中输入的多张待处理图片，并通过实时访问解析每张待处理图片设置原始引用位置标识。其中，原始引用位置标识与待处理图片一一对应。

具体地，原始引用位置标识包括每张待处理图片的原始引用坐标和原始引用地址，即该待处理图片的原始地址。新引用位置标识包括每张待处理图片对应的新引用坐标和最终生成的合并图的新引用地址。其中，待处理图片的新引用坐标可以包括待处理图片合并到Web页面的对应区域的横坐标x和纵坐标y。此外，进一步获得多张待处理图片的尺寸信息和内容信息，即获取待处理图片的尺寸大小和图片表述内容。其中，图片的尺寸大小可以为图片的存储容量大小或像素大小。

步骤S102，根据预设合并原则获得多张待处理图片的新引用位置标识，并并利用新引用位置标识替换原始引用位置标识以将待处理图片设置到对应的坐标的位置。

具体地，通过实时访问解析每张待处理图片在Web页面中的原始引用坐标，将待处理图片新坐标信息通过运算生成新引用坐标并取代原始引用坐标。

然后，将每一张待处理图片根据对应的唯一的KEY值，匹配获得合成的合并图的新引用地址，即合并得到的完整大图的地址，并通过实时访问将待处理图片的原始引用地址替换为新合成的合并图的新引用地址以将待处理图片设置到对应的位置。

在本发明的一个实施例中，进一步包括如下步骤：将实时生成的新坐标和新引用地址反馈显示给用户。

在本发明的一个实施例中，预设合并原则包括以下至少一种：

（1）根据待处理图片的尺寸信息逐次对多张待处理图片进行合图。

具体地，根据步骤S101中获取的待处理图片的尺寸信息，将尺寸较大的图片优先进行合图处理，尺寸较小的图片后进行合图处理。

（2）根据Web页面中的多个区域的用户关心程度和待处理图片的内容信息对多张待处理图片进行合图。

具体地，Web页面包括多个区域，例如：导航区、标题区、内容区、评论区等。根据用户对上述多个区域的关心程度的不同，可以对用户关心的区域优先进行合图处理。

例如，通过网站点击率及浏览时长的统计，发现用户对导航区最为关心，则在获得待处理图片后，根据图片的内容选择符合导航区的图片优先在该区域对图片进行合图处理，从而将用户最为关心的部分显示出来。

采用上述合并原则对多张待处理图片自动设置多张待处理图片的坐标，并将步骤S101中设置的每张待处理图片的原始引用位置标识与对应的坐标进行关联以将待处理图片设置到对应的坐标的位置。

步骤S103，根据多张待处理图片及对应的坐标的位置实时生成合并图并显示给用户。

用户在查看到实时生成的合并图后，如果发现对合并图并不满意，可以通过Web页面手动设置多张待处理图片的新引用位置标识，从而重新设置图片在Web页面的相应区域的位置，由此可以最大程度上的符合用户的使用习惯。

需要说明的是，本文上述的用户是指Web页面的开发工程师。具体地，本发明实施例的在Web前端进行合图的方法可以作为一项云服务提供给开发工程师，由开发工程师将实时合并的图片上线。相应地，可以理解为开发工程师即为本方案对应的用户。

根据本发明实施例的在Web前端进行合图的方法，可以在Web前端进行合图，即直接在开发调试阶段进行图片合并，解决了引用代码的自动化实时替换，合图的图片实时的生效通过简单便捷的可视化配置，用户可以实时查看图片合并效果，从而可以根据合并效果及时做出调整，彻底规避了线上风险，而且提高了前端合图的开发效率。

下面参考图2对本发明实施例的在Web前端进行合图的方法进行描述。

首先，获取输入的待处理图片P1、P2、P3和P4，并对每张待处理图片设置原始引用位置标识。具体地，待处理图片P1可以设为v1、待处理图片P2可以设为v2、待处理图片P3可以设为v3、待处理图片P4可以设为v4。

预设合并原则采用根据Web页面中的多个区域的用户关心程度和待处理图片的内容信息对多张待处理图片进行合图。其中，Web页面包括四个区域，A为导航区、B为标题区、C为内容区、D为评论区。通过统计发现导航区A为用户最关心的区域。

获取待处理图片P1、P2、P3和P4的内容信息，发现待处理图片P1适合导航区，P2适合标题区，P3适合内容区、P4适合评论区。根据合并原则，优先对导航区进行处理，即自动设置图片P1的坐标为（x1，y1），并将P1的原始引用位置标识v1与对应的坐标（x1，y1）进行关联以将P1设置到对应的坐标的位置，即导航区A。

以此类推，自动设置图片P2的坐标为（x2，y2），图片P3的坐标为（x3，y3），图片P4的坐标为（x4，y4），然后将图片相应的原始引用位置标识与对应的坐标进行关联以将P2、P3和P4分别设置到标题区B、内容区C和为评论区D。然后，根据四张待处理图片及对应的坐标的位置实时生成合并图并显示给用户。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备（如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统）使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例（非穷尽性列表）包括以下：具有一个或多个布线的电连接部（电子装置），便携式计算机盘盒（磁装置），随机存取存储器（RAM），只读存储器（ROM），可擦除可编辑只读存储器（EPROM或闪速存储器），光纤装置，以及便携式光盘只读存储器（CDROM）。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列（PGA），现场可编程门阵列（FPGA）等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在不脱离本发明的原理和宗旨的情况下在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (6)

1.一种在Web前端进行合图的方法，其特征在于，包括如下步骤：

获得在Web页面中输入的多张待处理图片及所述多张待处理图片的尺寸信息和内容信息，并通过实时访问解析每张所述待处理图片的原始引用位置标识，其中，所述原始引用位置标识与所述待处理图片一一对应；

根据预设合并原则获得所述多张待处理图片的新引用位置标识，并利用所述新引用位置标识替换所述原始引用位置标识以将所述待处理图片设置到对应的位置，其中，所述预设合并原则包括以下之一：

(1)根据所述待处理图片的尺寸信息逐次对所述多张待处理图片进行合图；

(2)根据Web页面中的多个区域的用户关心程度和所述待处理图片的内容信息对所述多张待处理图片进行合图；以及

根据所述多张待处理图片及对应的新引用位置标识实时生成合并图并显示给用户。

2.如权利要求1所述的在Web前端进行合图的方法，其特征在于，所述原始引用位置标识包括每张所述待处理图片的原始引用坐标和原始引用地址，

所述新引用位置标识包括每张所述待处理图片对应的新引用坐标和所述合并图的新引用地址。

3.如权利要求2所述的在Web前端进行合图的方法，其特征在于，所述利用所述新引用位置标识替换所述原始引用位置标识以将所述待处理图片设置到对应的位置，包括：

利用每张所述待处理图片的新引用坐标替换对应的待处理图片的原始引用坐标；

将每张所述待处理图片根据对应的唯一的KEY值，匹配获得合成的所述合并图的新引用地址，并通过实时访问将所述待处理图片的原始引用地址替换为所述合并图的新引用地址，以将所述待处理图片设置到对应的位置。

4.如权利要求2所述的在Web前端进行合图的方法，其特征在于，还包括如下步骤：将实时生成的新引用坐标和新引用地址反馈并显示给用户。

5.如权利要求2-4任一项所述的在Web前端进行合图的方法，其特征在于，所述待处理图片的新引用坐标包括所述待处理图片合并到所述Web页面的对应区域的横坐标和纵坐标。

6.如权利要求1所述的在Web前端进行合图的方法，其特征在于，还包括如下步骤：

所述用户通过Web页面手动设置多张所述待处理图片的新引用位置标识。