CN110851749A - 图片展示方法、装置、电子设备及可读介质 - Google Patents

图片展示方法、装置、电子设备及可读介质 Download PDF

Info

Publication number
CN110851749A
CN110851749A CN201810824058.6A CN201810824058A CN110851749A CN 110851749 A CN110851749 A CN 110851749A CN 201810824058 A CN201810824058 A CN 201810824058A CN 110851749 A CN110851749 A CN 110851749A
Authority
CN
China
Prior art keywords
displayed
pictures
mode
picture
width
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810824058.6A
Other languages
English (en)
Inventor
王小梅
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201810824058.6A priority Critical patent/CN110851749A/zh
Publication of CN110851749A publication Critical patent/CN110851749A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • Controls And Circuits For Display Device (AREA)

Abstract

本申请提供一种图片展示方法、装置、电子设备及可读介质,该方法包括:根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式;根据所述图片展示方式确定多个待展示图片的图片位尺寸;根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例;以及基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。本申请的图片展示的方法、装置、电子设备及可读介质,能够快速提供适配方案,节约了人力成本与沟通成本,并保证完美适配。

Description

图片展示方法、装置、电子设备及可读介质
技术领域
本申请涉及互联网技术领域,尤其涉及一种图片展示方法、装置、电子设备及计算机可读介质。
背景技术
在互联网网站中,页面广告位寸土寸金,商品宣传图的大小和个数都会影响广告位的点击量。然而,信息流页面广告位的尺寸变化多样,并无统一规格。而研发人员调取的商品宣传图尺寸通常为1:1的正方图。因此,当面对特定的页面广告位时,如何配置商品宣传图使其在广告位中填满以完美适配,是十分重要的。
针对上述问题,现有技术通常需要专业的设计人员人工做图适配,在确定了应放入多少商品宣传图去填满后,对其进行坐标标注,再通过研发人员写样式适配,才能更合理更完美地适配页面广告位。
然而,当面对数量巨大的信息流广告时,每一个广告位都需要设计人员做图适配,那么每次新的广告的上线都将伴随着研发、产品和设计的重复性工作。综上,现有技术采取的适配方式有如下缺点:
(1)浪费人力、物力以及沟通成本,且需花费大量时间,影响了工作效率。
(2)设计人员不够专业、设计不合理、研发人员样式写的不细致,可能造成广告位留白过多,浪费了广告位的使用面积,给用户点击也带来影响。
发明内容
有鉴于此,本申请提供一种图片展示方法、装置、电子设备及计算机可读介质,可以快速提供适配方案,节约了人力成本与沟通成本,并保证完美适配。
本申请的其他特性和优点将通过下面的详细描述变得显然,或部分地通过本申请的实践而习得。
根据本申请实施例的第一方面,提出一种图片展示方法,该方法包括:根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式;根据所述图片展示方式确定多个待展示图片的图片位尺寸;根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例;以及基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。
在本申请的一种示例性实施例中,根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式包括:在所述待展示广告位的宽度大于高度,且宽高比大于阈值时,确定图片展示方式为第一方式;在所述待展示广告位的宽度大于高度,且宽高比小于阈值时,确定图片展示方式为第二方式;在所述待展示广告位的宽度小于高度,且宽高比大于阈值时,确定图片展示方式为第三方式;以及在所述待展示广告位的宽度小于高度,且宽高比小于阈值时,确定图片展示方式为第四方式。
在本申请的一种示例性实施例中,第一展示方式为将所述多个待展示图片在所述待展示广告位中横向排列,且所述多个待展示图片间采用纵向留白方式。
在本申请的一种示例性实施例中,第二展示方式为将所述多个待展示图片在所述待展示广告位中横向排列,且所述多个待展示图片间采用横向留白方式。
在本申请的一种示例性实施例中,第三展示方式为将所述多个待展示图片在所述待展示广告位中纵向排列,且所述多个待展示图片间采用横向留白方式。
在本申请的一种示例性实施例中,第四展示方式为将所述多个待展示图片在所述待展示广告位中纵向排列,且所述多个待展示图片间采用纵向留白方式。
在本申请的一种示例性实施例中,所述多个待展示图片间采用纵向留白方式,根据所述图片展示方式确定多个待展示图片的图片位尺寸包括:根据待展示广告位的尺寸确定待展示图片数量;确定所述图片位的宽度;以及基于所述宽度在所述广告位中纵向分散所述多个待展示图片,以确定所述图片位的位置与尺寸。
在本申请的一种示例性实施例中,所述多个待展示图片间采用横向留白方式,根据所述图片展示方式确定多个待展示图片的图片位尺寸包括:根据待展示广告位的尺寸确定待展示图片数量;确定所述图片位的宽度;以及基于所述宽度在所述广告位中横向分散所述多个待展示图片,以确定所述图片位的位置与尺寸。
在本申请的一种示例性实施例中,还包括:在所述待展示广告位的宽度等于高度时,根据经验确定图片展示方式;以及在所述待展示广告位的宽高比等于阈值时,根据经验确定图片展示方式。
根据本申请实施例的第二方面,提出一种图片展示装置,该装置包括:展示方式模块,用于根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式;图片位模块,用于根据所述图片展示方式确定多个待展示图片的图片位尺寸;缩放模块,用于根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例;以及展示模块,用于基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。
根据本申请实施例的第三方面,提出一种电子设备,该电子设备包括:一个或多个处理器;存储装置,用于存储一个或多个程序;当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现上述任一项所述的图片展示方法。
根据本申请实施例的第四方面,提出一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如上述任一项所述的图片展示方法。
根据本申请的图片展示方法、装置、电子设备及计算机可读介质,能够快速提供适配方案,节约了人力成本与沟通成本,并保证完美适配。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。下面描述的附图仅仅是本申请的一些实施例,对于本领域的普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是根据一示例性实施例示出的一种图片展示方法及装置的系统框图。
图2是根据一示例性实施例示出的一种图片展示方法的流程图。
图3是根据一示例性实施例示出的待展示广告位的示意图。
图4是根据一示例性实施例示出的一种图片展示方法的流程图。
图5是根据一示例性实施例示出的一种图片展示方法的流程图。
图6是根据一示例性实施例示出的一种图片展示方法的流程图。
图7是根据一示例性实施例示出的一种图片展示方法的流程图。
图8是根据一示例性实施例示出的待展示广告位的示意图。
图9是根据一示例性实施例示出的待展示广告位的示意图。
图10是根据一示例性实施例示出的一种图片展示方法的流程图。
图11是根据一示例性实施例示出的一种图片展示装置的框图。
图12是根据一示例性实施例示出的一种用于图片展示的电子设备的框图。
具体实施方式
现在将参考附图更全面地描述示例实施例。然而,示例实施例能够以多种形式实施,且不应被理解为限于在此阐述的实施例;相反,提供这些实施例使得本发明将全面和完整,并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分,因而将省略对它们的重复描述。
所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中,提供许多具体细节从而给出对本发明的实施方式的充分理解。然而,本领域技术人员将意识到,可以实践本发明的技术方案而省略特定细节中的一个或更多,或者可以采用其它的方法、组元、装置、步骤等。在其它情况下,不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。
附图仅为本发明的示意性图解,图中相同的附图标记表示相同或类似的部分,因而将省略对它们的重复描述。附图中所示的一些方框图不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体,或在一个或多个硬件模块或集成电路中实现这些功能实体,或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
附图中所示的流程图仅是示例性说明,不是必须包括所有的内容和步骤,也不是必须按所描述的顺序执行。例如,有的步骤还可以分解,而有的步骤可以合并或部分合并,因此实际执行的顺序有可能根据实际情况改变。
下面结合附图对本发明示例实施方式进行详细说明。
图1是根据一示例性实施例示出的一种图片展示方法及装置的系统框图。
服务器105可以是提供各种服务的服务器,例如对用户利用终端设备101、102、103所进行操作的图片展示系统提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的图片展示请求等数据进行分析等处理,并将处理结果(例如待展示图片的个数、缩放比例--仅为示例)反馈给终端设备。
服务器105可例如根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式;服务器105可例如根据所述图片展示方式确定多个待展示图片的图片位尺寸;服务器105可例如根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例;服务器105可例如基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。
服务器105可以是一个实体的服务器,还可例如为多个服务器组成,服务器105中的一部分可例如作为本申请中的图片展示任务提交系统,用于获取将要执行图片展示命令的任务;以及服务器105中的一部分还可例如作为本申请中的图片展示系统,用于获取所述待展示广告位的尺寸,以根据所述尺寸确定图片展示方式;根据所述图片展示方式确定多个待展示图片的图片位尺寸;所述图片位尺寸分别确定多个待展示图片的多个缩放比例;基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。
需要说明的是,本申请实施例所提供的图片展示的方法可以由服务器105执行,相应地,图片展示的装置可以设置于服务器105中。而提供给用户用于提交图片展示任务与获取图片展示结果的请求端一般位于终端设备101、102、103中。
图2是根据一示例性实施例示出的一种图片展示方法的流程图。根据图2示出的图片展示的方法,可以快速提供适配方案,节约了人力成本与沟通成本,并保证完美适配。下面,将参照图2,对本申请示例性实施例中的图片展示方法进行说明。
在步骤S210中,根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式。例如,可以通过比较待展示广告位的宽与高来确定待展示图片适合横向放置还是纵向放置的方式。又例如,可以通过比较待展示广告位宽与高的比例来确定待展示图片适合横向留白还是纵向留白的方式。
根据示例实施例,第一展示方式为将多个待展示图片在待展示广告位中横向排列,且多个待展示图片间采用纵向留白方式。
根据示例实施例,第二展示方式为将多个待展示图片在待展示广告位中横向排列,且多个待展示图片间采用横向留白方式。
根据示例实施例,第三展示方式为将多个待展示图片在待展示广告位中纵向排列,且多个待展示图片间采用横向留白方式。
根据示例实施例,第四展示方式为将多个待展示图片在待展示广告位中纵向排列,且多个待展示图片间采用纵向留白方式。
根据示例实施例,在待展示广告位的宽度大于高度,且宽高比大于阈值时,确定图片展示方式为第一方式;在待展示广告位的宽度大于高度,且宽高比小于阈值时,确定图片展示方式为第二方式;在待展示广告位的宽度小于高度,且宽高比大于阈值时,确定图片展示方式为第三方式;在待展示广告位的宽度大于高度,且宽高比小于阈值时,确定图片展示方式为第四方式。例如,如图3所示,待展示广告位的宽度为680px,高度为200px,由于680>200,确定该待展示广告位适合横向放置待展示图片。又设定宽高比阈值为0.5,根据宽高比680/200=3.4,其小数点0.4<0.5,确定为左右留白方式。应该理解,本发明中宽高比小数点部分的阈值并不以0.5为限定,其具体数值应根据实际情况进行设定。
根据示例实施例,还可根据待展示广告位的宽高比确定待展示图片的数量。例如上述例子中,由于宽高比680/200=3.4,且其小数部分0.4<0.5,则可据此确定待展示图片的数量为3。又例如,当宽高比为3.6,其小数部分大于0.5时,待展示图片的数量可考虑为3+1=4个。且当宽高比为3.6时,由于其小数部分0.6>0.5,留白方式则应选择为上下留白方式。
在步骤S220中,根据图片展示方式确定多个待展示图片的图片位尺寸。
根据示例实施例,当多个待展示图片间采用纵向留白方式时,步骤S220可以包括:根据待展示广告位的尺寸确定待展示图片数量;确定图片位的宽度;以及基于宽度在所述广告位中纵向分散多个待展示图片,以确定图片位的位置与尺寸。其中,待展示图片可以通过待展示广告位的宽高比的整数部分确定。
根据示例实施例,当多个待展示图片间采用横向留白方式时,步骤S220可以包括:根据待展示广告位的尺寸确定待展示图片数量;确定图片位的宽度;以及基于宽度在广告位中横向分散多个待展示图片,以确定图片位的位置与尺寸。其中,待展示图片可以通过待展示广告位的宽高比的整数部分确定,例如,如图3所示,当宽高比为680/200=3.4时,其待展示图片数量为宽高比的整数部分,即待展示图片数量为3。当确定图片位宽度时,待展示广告位可在垂直方向上与广告位上下边缘考虑最小间隔,例如2px,则图3中待展示广告位纵向上留给广告图的总高度=待展示广告位高200-2*最小间隔2=196px。确定了待展示图片宽高之后,将待展示图片在待展示广告位中左右平分几个,待展示图片的间隔距离=(待展示广告位总宽680-商品总宽度196*待展示图片数量3)/(待展示图片数量3+1)=23px。
根据示例实施例,在确定多个待展示图片的图片位尺寸时,待展示图片的尺寸可以除去待展示图片下方的价格标签的高度。当待展示图片在待展示广告位中纵向排列时,待展示广告位的尺寸可以除去竖版广告位底部滑动换页的banner高度。还可根据实际应用场景添加其他干扰因素以确定待展示图片的图片位尺寸,本发明的技术方案对此不作特殊限定。
在步骤S230中,根据图片位尺寸分别确定多个待展示图片的多个缩放比例。其中,可以通过待展示图片原尺寸与图片位尺寸的比值确定缩放比例。例如,如图3所示,若待展示图片原尺寸为400px,则其缩放比例为400/196。
在步骤S240中,基于所述多个缩放比例将多个待展示图片在待展示广告位中展示。
根据示例实施例,图片展示方法还可以包括:在待展示广告位的宽度等于高度时,根据经验确定图片展示方式;以及在待展示广告位的宽高比等于阈值时,根据经验确定图片展示方式。
根据本申请的图片展示方法,通过对待展示广告位宽高的比较与计算,能够快速提供适配方案,节约了人力成本与沟通成本,并保证完美适配。
图4是根据一示例性实施例示出的一种图片展示方法的流程图。参照图4,图片展示方法可以包括:
步骤S410,判断待展示广告位的宽度是否大于高度。若是,执行步骤S420,否则执行步骤S430。
步骤S420,判断待展示广告位宽高比是否大于阈值,若是,执行步骤S440,否则执行步骤S450。例如,可以判断待展示广告位的宽高比的小数部分是否大于0.5,但本发明的技术方案对阈值的具体数值并不作特殊限定。
步骤S430,判断待展示广告位宽高比是否小于阈值,若是,执行步骤S460,否则执行步骤S470。例如,可以判断待展示广告位的宽高比的小数部分是否小于0.5,但本发明的技术方案对阈值的具体数值并不作特殊限定。
步骤S440,确定图片展示方式为第一方式。根据示例实施例,第一展示方式为将多个待展示图片在待展示广告位中横向排列,且多个待展示图片间采用纵向留白方式。
步骤S450,确定图片展示方式为第二方式。根据示例实施例,第二展示方式为将多个待展示图片在待展示广告位中横向排列,且多个待展示图片间采用横向留白方式。
步骤S460,确定图片展示方式为第三方式。根据示例实施例,第三展示方式为将多个待展示图片在待展示广告位中纵向排列,且多个待展示图片间采用横向留白方式。
步骤S470,确定图片展示方式为第四方式。根据示例实施例,第四展示方式为将多个待展示图片在待展示广告位中纵向排列,且多个待展示图片间采用纵向留白方式。
图5是根据一示例性实施例示出的一种图片展示方法的流程图。参照图5,当多个待展示图片间采用纵向留白方式时,图片展示方法可以包括如下步骤:
步骤S510,根据待展示广告位的尺寸确定待展示图片数量。例如,待展示图片的数量可以为待展示广告位宽高比的整数部分。当待展示图片在待展示广告位中横向排列时,由于待展示广告位的宽高比大于阈值(例如0.5),其待展示图片数量可以确定为待展示广告位宽高比整数部分+1。当待展示图片在待展示广告位中纵向排列时,由于待展示广告位的宽高比小于阈值(例如0.5),其待展示图片数量可以确定为待展示广告位宽高比的整数部分。
步骤S520,确定图片位的宽度。例如,当待展示图片在待展示广告位中横向排列时,其横向上所有待展示图片间仅保留最小间隔,例如2px。则待展示图片总宽度为待展示广告位宽度-(待展示图片数量+1)*最小间隔2px。待展示图片位的宽度为待展示图片总宽度/待展示图片数量。其中,当上述商值无法整除时,图片位宽度可依据四舍五入法或直接舍弃小数部分的办法取整,剩余像素平分到水平间距中。又例如,当待展示图片在待展示广告位中纵向排列时,其与待展示广告位左右边缘可以仅保留最小间隔,例如2px,则待展示图片的宽度可以计算为:待展示广告位宽度-2*最小间隔2px。其中,当纵向排列广告图中每个广告下方需要添加价格标签时,待展示图片的宽度还可以出去价格标签高度以及其与价格标签的间隔距离。
步骤S530,基于所述宽度在广告位中纵向分散多个待展示图片,以确定图片位的位置与尺寸。例如,当待展示图片在待展示广告位中横向排列时,其横向上所有待展示图片间可以仅保留最小间隔,纵向上居中摆放。又例如,当待展示图片在待展示广告位中纵向排列时,其与待展示广告位左右边缘可以仅保留最小间隔,纵向上均匀分布。
图6是根据一示例性实施例示出的一种图片展示方法的流程图。参照图7,当多个待展示图片间采用横向留白方式时,图片展示方法可以包括如下步骤:
步骤S610,根据待展示广告位的尺寸确定待展示图片数量。例如,待展示图片的数量可以为待展示广告位宽高比的整数部分。当待展示图片在待展示广告位中横向排列时,由于待展示广告位的宽高比小于阈值(例如0.5),其待展示图片数量可以确定为待展示广告位宽高比整数部分。当待展示图片在待展示广告位中纵向排列时,由于待展示广告位的宽高比大于阈值(例如0.5),其待展示图片数量可以确定为待展示广告位宽高比整数部分+1。
步骤S620,确定图片位的宽度。例如,当待展示图片在待展示广告位中横向排列时,其与待展示广告位上限边缘可以只保留最小间隔,例如2px。则待展示图片的宽度可以计算为:待展示广告位高度-2*最小间隔2px。又例如,当待展示图片在待展示广告位中纵向排列时,其纵向上所有待展示图片间仅保留最小间隔,例如2px。则待展示图片总宽度为待展示广告位高度-(待展示图片数量+1)*最小间隔2px。待展示图片位的宽度为待展示图片总宽度/待展示图片数量。其中,当上述商值无法整除时,图片位宽度可依据四舍五入法或直接舍弃小数部分的办法取整,剩余像素平分到水平间距中。其中,当纵向排列广告图中每个广告下方需要添加价格标签时,待展示图片的宽度还可以出去价格标签高度以及其与价格标签的间隔距离。
步骤S630,基于所述宽度在广告位中横向分散多个待展示图片,以确定所述图片位的位置与尺寸。例如,当待展示图片在待展示广告位中横向排列时,其与待展示广告位上下边缘可以仅保留最小间隔,水平方向上均匀分布。又例如,当待展示图片在待展示广告位中纵向排列时,其纵向上所有待展示图片间可以仅保留最小间隔,水平方向居中摆放。
图7是根据一示例性实施例示出的一种图片展示方法的流程图。参照图7,当待展示广告位宽度大于高度,待展示图片在待展示广告位中横向排列时,图片展示方法可以包括如下步骤:
步骤S701,判断待展示广告位宽高比picCnt的小数部分是否大于0.5。若是,执行步骤702,否则执行步骤S707。其中,宽高比可以通过下式得到:float picCnt=adWidth/adHeight,adWidth为待展示广告位宽度,adHeight为待展示广告位高度。0.5为宽高比阈值,但本发明对宽高比阈值的具体数值并不作特殊限定。
步骤S702,待展示广告位纵向留白、水平居中摆放,待展示图片数量可以通过下式得到:picCnt=picCnt+1。其待展示广告位示意图如图9所示,图9中待展示广告位宽度adWidth=720px,高度adHeight=200px,宽度>高度,选择待展示图片横向排列方式,宽高比720/200=3.6,小数部分0.6>0.5,选择纵向留白方式。
步骤S703,待展示图片之间间隔2px,计算待展示广告位横向上所有待展示图片之间间隔总和totalHorizontalMargin。其数值可以通过下式计算得到:inttotalHorizontalMargin=2*(picCnt+1)。应该理解,本发明的技术方案对待展示图片之间间隔的具体数值并不作特殊限定,此处只是示例。
步骤S704,计算待展示广告位留给多个待展示图片的总宽度retainTotalWidth。其数值可以通过下式计算得到:float retainTotalWidth=adWidth-totalHorizontalMargin。
步骤S705,计算每个待展示图片适配后的宽(宽高相等)。待展示图片适配后的宽adjustPiclen可以通过下式计算得到:float adjustPiclen=retainTotalWidth/picCnt。
步骤S706,计算待展示图片缩放比。待展示图片缩放比picScale可以通过下式计算得到:float picScalt=piclen/adjustPiclen。
步骤S707,待展示广告位横向留白,水平均匀分布,其待展示图片数量就是picCnt。其待展示广告位示意图如图10所示,图10中待展示广告位宽度adWidth=680px,高度adHeight=200px,宽度>高度,选择待展示图片横向排列方式,宽高比680/200=3.4,小数部分0.4<0.5,选择横向留白方式。
步骤S708,待展示图片与待展示广告位上下边缘只留最小间隔2px,待展示图片适配后的宽度为待展示广告位高度-2*最小间隔2px。其中,待展示图片适配后的长(宽高相等)可以通过下式计算得到:float adjustPiclen=adHeight-2*2px。
步骤S709,计算待展示图片缩放比。待展示图片缩放比picScale可以通过下式计算得到:float picScalt=piclen/adjustPiclen。
图8是根据一示例性实施例示出的一种图片展示方法的流程图。参照图8,当待展示广告位宽度小于高度,待展示图片在待展示广告位中纵向排列时,图片展示方法可以包括如下步骤:
步骤S801,判断待展示广告位宽高比picCnt的小数部分是否大于0.5。若是,执行步骤802,否则执行步骤S807。其中,宽高比可以通过下式得到:float picCnt=adWidth/adHeight,adWidth为待展示广告位宽度,adHeight为待展示广告位高度。0.5为宽高比阈值,但本发明对宽高比阈值的具体数值并不作特殊限定。
步骤S802,待展示广告位横向留白,水平居中分布,待展示图片数量可以通过下式得到:picCnt=picCnt+1。
步骤S803,待展示图片之间间隔2px,待展示广告位纵向上所有待展示图片之间间隔总和totalVerticalMargin。其数值可以通过下式计算得到:int totalVerticalMargin=2*(picCnt+1)。应该理解,本发明的技术方案对待展示图片之间间隔的具体数值并不作特殊限定,此处只是示例。
步骤S804,纵向广告位底部滑动换页banner高20px,计算待展示广告位留给多个待展示图片的总宽度retainTotalWidth。其数值可以通过下式计算得到:floatretainTotalHeight=adWidth-totalVerticallMargin-20。应该理解,滑动换页banner高度20px仅为示例性数值本发明的技术方案对其具体数值并不作特殊限定。
步骤S805,计算每个待展示图片适配后的高(宽高相等)。待展示图片适配后的高adjustPicHeight可以通过下式计算得到:float adjustPicHeight=retainTotalHeight/picCnt。
步骤S806,计算待展示图片缩放比。例如,当纵向排列的每一待展示图片下方有价格标签高20px,价格标签与待展示图片间隔6px时,待展示图片缩放比picScale可以通过下式计算得到:float picScalt=piclen/(adjustPicHeight-20-6)。
步骤S807,待展示广告位纵向留白,垂直方向均匀分布,其待展示图片数量就是picCnt。
步骤S808,待展示图片与待展示广告位左右边缘只留最小间隔2px,待展示图片适配后的宽度为待展示广告位宽度-2*最小间隔2px。其中,待展示图片适配后的宽(宽高相等)可以通过下式计算得到:float adjustPicHeight=adwidth-2*2px。
步骤S809,计算待展示图片缩放比。待展示图片缩放比picScale可以通过下式计算得到:float picScalt=picHeight/adjustPicHeight。例如,当纵向排列的每一待展示图片下方有价格标签高20px,价格标签与待展示图片间隔6px时,待展示图片缩放比picScale可以通过下式计算得到:float picScalt=piclen/(adjustPicHeight-20-6)。
根据本申请的图片展示方法,可通过对待展示广告位的宽高比较以及比例计算,快速得出此广告位最适合放入的待展示图片数量、排列方式以及尺寸。具体地,通过计算待展示广告位的宽高比,得出商品图的数量,小数点小于0.5时选择横向留白的适配方案,大于0.5时选择纵向留白的适配方案。再依据图片最小间隔、价格标签高度、换页banner高度等计算待展示图片的缩放比例、展示的具体位置。通过上述方法,能够快速提供适配方案,节约了人力成本与沟通成本,并保证完美适配。
图11是根据一示例性实施例示出的一种图片展示装置的框图。参照图11,参照图11,图片展示装置至少可以包括:展示方式模块1110、图片位模块1120、缩放模块1130以及展示模块1140。
在图片展示装置中,展示方式模块1110,用于根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式。
根据示例实施例,在待展示广告位的宽度大于高度,且宽高比大于阈值时,确定图片展示方式为第一方式;在待展示广告位的宽度大于高度,且宽高比小于阈值时,确定图片展示方式为第二方式;在待展示广告位的宽度小于高度,且宽高比大于阈值时,确定图片展示方式为第三方式;以及在待展示广告位的宽度小于高度,且宽高比小于阈值时,确定图片展示方式为第四方式。
其中,第一展示方式为将多个待展示图片在待展示广告位中横向排列,且多个待展示图片间采用纵向留白方式。第二展示方式为将多个待展示图片在待展示广告位中横向排列,且多个待展示图片间采用横向留白方式。第三展示方式为将多个待展示图片在待展示广告位中纵向排列,且多个待展示图片间采用横向留白方式。第四展示方式为将多个待展示图片在待展示广告位中纵向排列,且多个待展示图片间采用纵向留白方式。
图片位模块1120用于根据所述图片展示方式确定多个待展示图片的图片位尺寸。例如,当多个待展示图片间采用纵向留白方式时,图片位模块1120可用于根据待展示广告位的尺寸确定待展示图片数量;图片位模块1120可用于确定图片位的宽度;图片位模块1120可用于基于宽度在广告位中纵向分散多个待展示图片,以确定图片位的位置与尺寸。又例如,当多个待展示图片间采用横向留白方式时,图片位模块1120可用于根据待展示广告位的尺寸确定待展示图片数量;图片位模块1120可用于确定图片位的宽度;图片位模块1120可用于基于宽度在广告位中横向分散多个待展示图片,以确定图片位的位置与尺寸。
缩放模块1130用于根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例。其中,可以通过待展示图片原尺寸与图片位尺寸的比值确定缩放比例。例如,若待展示图片原尺寸为400px,则其缩放比例为400/196。
展示模块1140用于基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。其中,在待展示广告位的宽度等于高度时,根据经验确定图片展示方式;以及在待展示广告位的宽高比等于阈值时,根据经验确定图片展示方式。
根据本申请的图片展示装置,可通过对待展示广告位的宽高比较以及比例计算,快速得出此广告位最适合放入的待展示图片数量、排列方式以及尺寸,保证完美适配。此外,还节约了人力成本与沟通成本。
图12是根据一示例性实施例示出的一种用于图片展示的电子设备的框图。
下面参照图12来描述根据本申请的这种实施方式的电子设备1200。图12显示的电子设备1200仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图12所示,计算机系统1200包括中央处理单元(CPU)1201,其可以根据存储在只读存储器(ROM)1202中的程序或者从储存部分1208加载到随机访问存储器(RAM)1203中的程序而执行各种适当的动作和处理。例如,中央处理单元1201可以执行如图2、图4至图8中所示的步骤。
在RAM 1203中,还存储有系统操作所需的各种程序和数据,例如待展示广告位尺寸、待展示图片尺寸等。CPU 1201、ROM 1202以及RAM 1203通过总线1204彼此相连。输入/输出(I/O)接口1205也连接至总线1204。
以下部件连接至I/O接口1205:包括触摸屏、键盘等的输入部分1206;包括诸如液晶显示器(LCD)等以及扬声器等的输出部分1207;包括闪存等的储存部分1208;以及包括诸如无线网卡、高速网卡等的通信部分1209。通信部分1209经由诸如因特网的网络执行通信处理。驱动器1210也根据需要连接至I/O接口1205。可拆卸介质1211,诸如半导体存储器、磁盘等,根据需要安装在驱动器1210上,以便于从其上读出的计算机程序根据需要被安装入储存部分1208。
通过以上的实施方式的描述,本领域的技术人员易于理解,这里描述的示例实施方式可以通过软件实现,也可以通过软件结合必要的硬件的方式来实现。因此,本发明实施例的技术方案可以以软件产品的形式体现出来,该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM,U盘,移动硬盘等)中,包括若干指令用以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者智能设备等)执行根据本发明实施例的方法,例如图2、图4至图8中所示的步骤。
此外,上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明,而不是限制目的。易于理解,上述附图所示的处理并不表明或限制这些处理的时间顺序。另外,也易于理解,这些处理可以是例如在多个模块中同步或异步执行的。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本申请的其他实施例。本申请旨在涵盖本发明的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未申请的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本发明的真正范围和精神由权利要求指出。
应当理解的是,本发明并不限于这里已经示出的详细结构、附图方式或实现方法,相反,本发明意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (12)

1.一种图片展示方法,其特征在于,包括:
根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式;
根据所述图片展示方式确定多个待展示图片的图片位尺寸;
根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例;以及
基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。
2.如权利要求1所述的方法,其特征在于,根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式包括:
在所述待展示广告位的宽度大于高度,且宽高比大于阈值时,确定图片展示方式为第一方式;
在所述待展示广告位的宽度大于高度,且宽高比小于阈值时,确定图片展示方式为第二方式;
在所述待展示广告位的宽度小于高度,且宽高比大于阈值时,确定图片展示方式为第三方式;以及
在所述待展示广告位的宽度小于高度,且宽高比小于阈值时,确定图片展示方式为第四方式。
3.如权利要求2所述的方法,其特征在于,第一展示方式为将所述多个待展示图片在所述待展示广告位中横向排列,且所述多个待展示图片间采用纵向留白方式。
4.如权利要求2所述的方法,其特征在于,第二展示方式为将所述多个待展示图片在所述待展示广告位中横向排列,且所述多个待展示图片间采用横向留白方式。
5.如权利要求2所述的方法,其特征在于,第三展示方式为将所述多个待展示图片在所述待展示广告位中纵向排列,且所述多个待展示图片间采用横向留白方式。
6.如权利要求2所述的方法,其特征在于,第四展示方式为将所述多个待展示图片在所述待展示广告位中纵向排列,且所述多个待展示图片间采用纵向留白方式。
7.如权利要求3或6所述的方法,其特征在于,所述多个待展示图片间采用纵向留白方式,
根据所述图片展示方式确定多个待展示图片的图片位尺寸包括:
根据待展示广告位的尺寸确定待展示图片数量;
确定所述图片位的宽度;以及
基于所述宽度在所述广告位中纵向分散所述多个待展示图片,以确定所述图片位的位置与尺寸。
8.如权利要求4或5所述的方法,其特征在于,所述多个待展示图片间采用横向留白方式,
根据所述图片展示方式确定多个待展示图片的图片位尺寸包括:
根据待展示广告位的尺寸确定待展示图片数量;
确定所述图片位的宽度;以及
基于所述宽度在所述广告位中横向分散所述多个待展示图片,以确定所述图片位的位置与尺寸。
9.如权利要求1所述的方法,其特征在于,还包括:
在所述待展示广告位的宽度等于高度时,根据经验确定图片展示方式;以及
在所述待展示广告位的宽高比等于阈值时,根据经验确定图片展示方式。
10.一种图片展示装置,其特征在于,包括:
展示方式模块,用于根据待展示广告位的尺寸确定图片展示方式,图片展示方式包括第一方式、第二方式、第三方式与第四方式;
图片位模块,用于根据所述图片展示方式确定多个待展示图片的图片位尺寸;
缩放模块,用于根据所述图片位尺寸分别确定多个待展示图片的多个缩放比例;以及
展示模块,用于基于所述多个缩放比例将所述多个待展示图片在待展示广告位中展示。
11.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-9中任一所述的方法。
12.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-9中任一所述的方法。
CN201810824058.6A 2018-07-25 2018-07-25 图片展示方法、装置、电子设备及可读介质 Pending CN110851749A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810824058.6A CN110851749A (zh) 2018-07-25 2018-07-25 图片展示方法、装置、电子设备及可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810824058.6A CN110851749A (zh) 2018-07-25 2018-07-25 图片展示方法、装置、电子设备及可读介质

Publications (1)

Publication Number Publication Date
CN110851749A true CN110851749A (zh) 2020-02-28

Family

ID=69594362

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810824058.6A Pending CN110851749A (zh) 2018-07-25 2018-07-25 图片展示方法、装置、电子设备及可读介质

Country Status (1)

Country Link
CN (1) CN110851749A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112256221A (zh) * 2020-10-20 2021-01-22 北京字跳网络技术有限公司 信息显示方法、装置和电子设备
CN112598453A (zh) * 2020-12-29 2021-04-02 上海硬通网络科技有限公司 广告投放方法、装置及电子设备
CN112633930A (zh) * 2020-12-25 2021-04-09 上海硬通网络科技有限公司 页面资源投放方法、装置及电子设备
CN112862693A (zh) * 2021-04-08 2021-05-28 上海哔哩哔哩科技有限公司 图片处理方法及装置
CN113449222A (zh) * 2021-06-17 2021-09-28 青岛海尔科技有限公司 图片展示方法、图片展示装置和电子设备
CN117950787B (zh) * 2024-03-22 2024-05-31 成都赛力斯科技有限公司 广告展示方法、装置、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2008108096A1 (ja) * 2007-03-05 2008-09-12 Japan Tobacco Inc. データ処理装置、コンピュータプログラム、データ記憶媒体
CN104615400A (zh) * 2015-02-10 2015-05-13 解庶 展示可视信息的方法与设备
CN105335111A (zh) * 2014-05-26 2016-02-17 阿里巴巴集团控股有限公司 一种图像的展示处理方法和装置
CN105988793A (zh) * 2015-02-11 2016-10-05 阿里巴巴集团控股有限公司 用于屏幕显示设备的图像展示方法及装置
CN107562862A (zh) * 2017-08-29 2018-01-09 合肥尚西网络科技有限公司 一种广告展示装置
CN108228074A (zh) * 2018-02-02 2018-06-29 联想(北京)有限公司 展示控制方法、展示系统、电子设备和计算机可读介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2008108096A1 (ja) * 2007-03-05 2008-09-12 Japan Tobacco Inc. データ処理装置、コンピュータプログラム、データ記憶媒体
CN105335111A (zh) * 2014-05-26 2016-02-17 阿里巴巴集团控股有限公司 一种图像的展示处理方法和装置
CN104615400A (zh) * 2015-02-10 2015-05-13 解庶 展示可视信息的方法与设备
CN105988793A (zh) * 2015-02-11 2016-10-05 阿里巴巴集团控股有限公司 用于屏幕显示设备的图像展示方法及装置
CN107562862A (zh) * 2017-08-29 2018-01-09 合肥尚西网络科技有限公司 一种广告展示装置
CN108228074A (zh) * 2018-02-02 2018-06-29 联想(北京)有限公司 展示控制方法、展示系统、电子设备和计算机可读介质

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112256221A (zh) * 2020-10-20 2021-01-22 北京字跳网络技术有限公司 信息显示方法、装置和电子设备
CN112633930A (zh) * 2020-12-25 2021-04-09 上海硬通网络科技有限公司 页面资源投放方法、装置及电子设备
CN112598453A (zh) * 2020-12-29 2021-04-02 上海硬通网络科技有限公司 广告投放方法、装置及电子设备
CN112862693A (zh) * 2021-04-08 2021-05-28 上海哔哩哔哩科技有限公司 图片处理方法及装置
CN113449222A (zh) * 2021-06-17 2021-09-28 青岛海尔科技有限公司 图片展示方法、图片展示装置和电子设备
CN117950787B (zh) * 2024-03-22 2024-05-31 成都赛力斯科技有限公司 广告展示方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN110851749A (zh) 图片展示方法、装置、电子设备及可读介质
CN108021626B (zh) 页面排版方法、装置及设备
CN112380859A (zh) 舆情信息的推荐方法、装置、电子设备及计算机存储介质
CN110008450B (zh) 图片的生成方法、装置、设备和介质
CN111209721A (zh) 位图字体实现方法、装置、电子设备及存储介质
CN103605716A (zh) 用于网页页面点击展现的数据处理方法和装置
CN109636885B (zh) 一种用于h5页面的序列帧动画制作方法和系统
CN109815424A (zh) 网页图片显示方法及终端设备
CN113434755A (zh) 页面的生成方法、装置、电子设备及存储介质
CN114610295A (zh) 一种页面容器的布局方法、装置、设备及介质
US9035972B2 (en) Intelligent axis labels
US20090135214A1 (en) Raster data creation device, computer-readable medium storing raster data creation program, and display device
US11929049B2 (en) Output content generation apparatus, output content generation method and program
CN115878935B (zh) 一种图表的局部刷新方法、系统、装置、设备及介质
CN111985194A (zh) 数据存储方法、装置、电子设备及存储介质
CN105474267A (zh) 硬件字形缓存
CN113297313B (zh) 表格数据展示方法、装置、电子设备及存储介质
CN110825989A (zh) 图片展示方法、装置、电子设备及可读介质
CN116311300A (zh) 表格生成方法、装置、电子设备以及存储介质
CN114882283A (zh) 样本图像生成方法、深度学习模型的训练方法和装置
CN110187881B (zh) 一种异形窗口创建方法、系统、装置及计算机存储介质
CN112800373A (zh) 网页资源数据生成方法、装置、计算机设备及存储介质
US20180275941A1 (en) Display control system, display data generation system, display control method, and computer program product
CN115758013B (zh) 智能化可视办公方法及装置
CN111523288B (zh) Pdf文档的鸟瞰视图的显示方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination