在Web前端进行合图的方法技术

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

【技术实现步骤摘要】
在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适合导航本文档来自技高网...

【技术保护点】
一种在Web前端进行合图的方法，其特征在于，包括如下步骤：获得在Web页面中输入的多张待处理图片，并通过实时访问解析每张所述待处理图片的原始引用位置标识，其中，所述原始引用位置标识与所述待处理图片一一对应；根据预设合并原则获得所述多张待处理图片的新引用位置标识，并利用所述新引用位置标识替换所述原始引用位置标识以将所述待处理图片设置到对应的位置；以及根据所述多张待处理图片及对应的新引用位置标识实时生成合并图并显示给用户。

【技术特征摘要】
1.一种在Web前端进行合图的方法，其特征在于，包括如下步骤：获得在Web页面中输入的多张待处理图片及所述多张待处理图片的尺寸信息和内容信息，并通过实时访问解析每张所述待处理图片的原始引用位置标识，其中，所述原始引用位置标识与所述待处理图片一一对应；根据预设合并原则获得所述多张待处理图片的新引用位置标识，并利用所述新引用位置标识替换所述原始引用位置标识以将所述待处理图片设置到对应的位置，其中，所述预设合并原则包括以下之一：(1)根据所述待处理图片的尺寸信息逐次对所述多张待处理图片进行合图；(2)根据Web页面中的多个区域的用户关心程度和所述待处理图片的内容信息对所述多张待处理图片进行合图；以及根据所述多张待处理图片及对应的新引用位置标识实时生成合并图并显示给用户。2.如权利要求1所述的在Web前端进行合图的方法，其特征在于，所述原始引用位置标识包括每张所述待处理图片的原始引用坐标和原始引用地址，所述新引用位置标识包括每张所述待处理图片对应的新引用坐标和所述合并...

【专利技术属性】
技术研发人员：骆勤，张袁炜，
申请(专利权)人：百度在线网络技术北京有限公司，
类型：发明
国别省市：北京;11