CN110750664B - 图片的显示方法及装置 - Google Patents

图片的显示方法及装置 Download PDF

Info

Publication number
CN110750664B
CN110750664B CN201910979987.9A CN201910979987A CN110750664B CN 110750664 B CN110750664 B CN 110750664B CN 201910979987 A CN201910979987 A CN 201910979987A CN 110750664 B CN110750664 B CN 110750664B
Authority
CN
China
Prior art keywords
picture
displayed
target area
size
area
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.)
Active
Application number
CN201910979987.9A
Other languages
English (en)
Other versions
CN110750664A (zh
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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201910979987.9A priority Critical patent/CN110750664B/zh
Publication of CN110750664A publication Critical patent/CN110750664A/zh
Application granted granted Critical
Publication of CN110750664B publication Critical patent/CN110750664B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/54Browsing; Visualisation therefor
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明提供了一种图片的显示方法及装置;方法包括:获取待显示图片的图片数据,及所述待显示图片中目标区域的区域信息;基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置;基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据;基于所述解码数据,渲染并显示所述待显示图片中的所述目标区域。通过本发明,能够避免额外的性能消耗,提高图片渲染速度。

Description

图片的显示方法及装置
技术领域
本发明涉及信息处理技术领域,尤其涉及一种图片的显示方法及装置。
背景技术
随着信息处理技术的快速发展,终端可以对各种类型的数据进行处理,如图片数据、文本数据等。对于图片数据,终端在显示网页或者应用中的某张图片之前,需要对该图片的图片数据进行解码及渲染。
相关技术中,终端获取到整张图片的图片数据后,会直接对整张图片的图片数据进行解码及渲染。而当仅需要显示完整图片中的部分区域时,对整张图片的图片数据进行解码及渲染,会造成额外的性能消耗,导致图片渲染速度慢。
发明内容
本发明实施例提供一种图片的显示方法及装置,能够避免额外的性能消耗,提高图片渲染速度。
本发明实施例的技术方案是这样实现的:
本发明实施例提供一种图片的显示方法,包括:
获取待显示图片的图片数据,及所述待显示图片中目标区域的区域信息;
基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置;
基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据;
基于所述解码数据,渲染并显示所述待显示图片中的所述目标区域。
本发明实施例提供一种图片的显示装置,包括:
获取模块,用于获取待显示图片的图片数据,及所述待显示图片中目标区域的区域信息;
确定模块,用于基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置;
解码模块,用于基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据;
渲染模块,用于基于所述解码数据,渲染并显示所述待显示图片中的所述目标区域。
上述方案中,所述获取模块,还用于发送所述待显示图片的第一获取请求,所述第一获取请求中携带用于图片显示的图片容器大小;
接收返回的所述图片数据及所述区域信息;
其中,所述区域信息为,当所述待显示图片的大小超过所述图片容器大小时所确定。
上述方案中,所述获取模块,还用于发送所述待显示图片的第二获取请求,所述待显示图片包含目标对象;
接收返回的所述图片数据及所述区域信息,所述区域信息对应所述目标对象,所述区域信息为,对所述待显示图片中的目标对象进行识别,基于所述目标对象在所述待显示图片中的位置所确定。
上述方案中,所述获取模块,还用于发送所述待显示图片的第三获取请求,所述第三获取请求中携带目标用户的用户标识;
接收返回的所述图片数据及所述区域信息;
其中,所述区域信息为,根据所述用户标识获取所述目标区域的配置参数,并基于所述配置参数所确定。
上述方案中,所述解码模块,还用于调用对应图片数据解码的接口;
通过所述接口,解码所述图片数据中对应所述目标区域的图片数据。
上述方案中,所述确定模块,还用于基于所述区域信息包括的起始点横坐标及终点横坐标,确定所述目标区域的宽度;
基于所述区域信息包括的起始点纵坐标及终点纵坐标,确定所述目标区域的高度;
基于所述目标区域的所述起始点横坐标、起始点纵坐标、宽度及高度,确定所述目标区域在所述待显示图片中的相对位置。
上述方案中,所述解码模块,还用于基于所述相对位置,从所述图片数据中确定对应所述目标区域的图片数据;
对所述对应所述目标区域的图片数据进行解码,得到对应所述目标区域的解码数据。
上述方案中,所述渲染模块,还用于获取用于图片显示的图片容器大小;
基于所述图片容器大小,渲染所述解码数据至所述图片容器,使得所述目标区域的大小与所述图片容器大小相适配。
本发明实施例提供一种终端,包括:
存储器,用于存储可执行指令;
处理器,用于执行所述存储器中存储的可执行指令时,实现本发明实施例提供的图片的显示方法。
本发明实施例提供一种存储介质,存储有可执行指令,用于引起处理器执行时,实现本发明实施例提供的图片的显示方法。
本发明实施例具有以下有益效果:
本发明通过基于待显示图片中目标区域的区域信息,确定目标区域在待显示图片中的相对位置;根据相对位置,解码图片数据中对应目标区域的图片数据,得到对应目标区域的解码数据;基于解码数据,渲染并显示待显示图片中的所述目标区域;如此,由于仅对图片数据中对应目标区域的图片数据进行解码及渲染,避免了在对无需显示的区域的图片数据进行解码及渲染时,产生额外的性能开销,提升了解码及渲染的速度及效率。
附图说明
图1为相关技术提供的对图片进行分割的示意图;
图2为相关技术提供的解码及渲染的过程的示意图;
图3为相关技术提供的图片显示的示意图;
图4为本发明实施例提供的图片的显示系统100的架构示意图;
图5为本发明实施例提供的终端400的结构示意图;
图6为本发明实施例提供的图片的显示方法的流程示意图;
图7为本发明实施例提供的人脸识别的界面示意图;
图8为本发明实施例提供的动物识别的界面示意图;
图9为本发明实施例提供的解码对应目标区域的图形数据的示意图;
图10为本发明实施例提供的显示待显示图片中的目标区域的示意图;
图11为本发明实施例提供的图片的显示方法的流程示意图;
图12为本发明实施例提供的图片的显示方法的流程示意图;
图13为本发明实施例提供的人像显示应用场景下的图片显示的示意图;
图14为本发明实施例提供的图片的显示装置455的组成结构示意图。
具体实施方式
为了使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明作进一步地详细描述,所描述的实施例不应视为对本发明的限制,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。
在以下的描述中,涉及到“一些实施例”,其描述了所有可能实施例的子集,但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集,并且可以在不冲突的情况下相互结合。
在以下的描述中,所涉及的术语“第一\第二\第三”仅仅是区别类似的对象,不代表针对对象的特定排序,可以理解地,“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序,以使这里描述的本发明实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义,本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本发明实施例的目的,不是旨在限制本发明。
对本发明实施例进行进一步详细说明之前,对本发明实施例中涉及的名词和术语进行说明,本发明实施例中涉及的名词和术语适用于如下的解释。
1)图片数据,指用数值表示的各像素的信息的集合;
2)图片容器,用于显示图片的容器,指用户实际上能通过终端看到的图片显示区域。
为了实现对图片数据进行解码及渲染,相关技术中提供一种基于图片瓦片加载的图片显示方法,通过将一张大尺寸的图片均匀分割成若干小尺寸的区域,即瓦片;然后依次解码及渲染对应这些瓦片的图片数据,以避免一次解码整张图片造成的较长耗时操作;最后显示渲染得到的图片。
例如,图1为相关技术提供的对图片进行分割的示意图,参见图1,将整张图片分为6个相同尺寸的区域,即6个瓦片;图2为相关技术提供的解码及渲染的过程的示意图,参见图2,终端依次解码及渲染对应6个瓦片的数据;最后对渲染得到的图片进行显示。
虽然图片瓦片加载的方法虽然能够避免一次解码整张图片造成的较长耗时操作,但其实际还是对整个图片的图片数据进行了解码及渲染。当用于图片显示的图片容器仅能显示图片的部分区域,或用户仅需要显示图片的部分区域时,对整个图片的图片数据进行解码及渲染,会造成不必要的额外性能消耗,导致图片渲染速度慢。例如,图3为相关技术提供的图片显示的示意图,参见图3,将图片按照原始尺寸居中显示在显示界面中,由于图片容器的尺寸小于图片的尺寸,实际仅能显示图片的部分区域,但在图片显示前对整个图片的图片数据都解码了,对未显示的部分区域进行解码和渲染而产生的内存消耗和时间消耗,是非必要的。
基于此,提出本发明实施例的图片的显示方法,基于获取的待显示图片中目标区域的区域信息,仅对图片数据中对应目标区域的图片数据进行解码及渲染,以避免因对无需显示的区域的图片数据进行解码及渲染,导致产生额外的性能开销,使得解码及渲染的速度及效率得到提升。
参见图4,图4为本发明实施例提供的图片的显示系统100的架构示意图,为实现支撑一个示例性应用,终端400(示例性示出了终端400-1和终端400-2)通过网络300连接服务器200,网络300可以是广域网或者局域网,又或者是二者的组合。
终端400(如终端400-1),用于发送待显示图片的获取请求;
服务器200,用于获取待显示图片的图片数据,及待显示图片中目标区域的区域信息,并返回给终端400;
终端400(如终端400-1),还用于基于区域信息,确定目标区域在待显示图片中的相对位置;基于相对位置,解码图片数据中对应目标区域的图片数据,得到对应目标区域的解码数据;基于解码数据,渲染并显示待显示图片中的所述目标区域。
在实际应用中,服务器200既可以为单独配置的支持各种业务的一个服务器,亦可以配置为一个服务器集群;终端可以为智能手机、平板电脑、笔记本电脑等各种类型的用户终端,还可以为可穿戴计算设备、个人数字助理(PDA)、台式计算机、蜂窝电话、媒体播放器、导航设备、游戏机、电视机、或者这些数据处理设备或其他数据处理设备中任意两个或多个的组合。
参见图5,图5是本发明实施例提供的终端400的结构示意图,图5所示的终端400包括:至少一个处理器410、存储器450、至少一个网络接口420和用户接口430。终端400中的各个组件通过总线系统440耦合在一起。可理解,总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图5中将各种总线都标为总线系统440。
处理器410可以是一种集成电路芯片,具有信号的处理能力,例如通用处理器、数字信号处理器(DSP,Digital Signal Processor),或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等,其中,通用处理器可以是微处理器或者任何常规的处理器等。
用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431,包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432,包括有助于用户输入的用户接口部件,比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器450可以是可移除的,不可移除的或其组合。示例性的硬件设备包括固态存储器,硬盘驱动器,光盘驱动器等。存储器450可选地包括在物理位置上远离处理器410的一个或多个存储设备。
存储器450包括易失性存储器或非易失性存储器,也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM,Read Only Me mory),易失性存储器可以是随机存取存储器(RAM,Random Access Memor y)。本发明实施例描述的存储器450旨在包括任意适合类型的存储器。
在一些实施例中,存储器450能够存储数据以支持各种操作,这些数据的示例包括程序、模块和数据结构或者其子集或超集,下面示例性说明。
操作系统451,包括用于处理各种基本系统服务和执行硬件相关任务的系统程序,例如框架层、核心库层、驱动层等,用于实现各种基础业务以及处理基于硬件的任务;
网络通信模块452,用于经由一个或多个(有线或无线)网络接口420到达其他计算设备,示例性的网络接口420包括:蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB,Universal Serial Bus)等;
呈现模块453,用于经由一个或多个与用户接口430相关联的输出装置431(例如,显示屏、扬声器等)使得能够呈现信息(例如,用于操作外围设备和显示内容和信息的用户接口);
输入处理模块454,用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中,本发明实施例提供的装置可以采用软件方式实现,图5示出了存储在存储器450中的图片的显示装置455,其可以是程序和插件等形式的软件,包括以下软件模块:获取模块4551、确定模块4552、解码模块4553和渲染模块4554,这些模块是逻辑上的,因此根据所实现的功能可以进行任意的组合或进一步拆分。
将在下文中说明各个模块的功能。
在另一些实施例中,本发明实施例提供的图片的显示装置可以采用硬件方式实现,作为示例,本发明实施例提供的装置可以是采用硬件译码处理器形式的处理器,其被编程以执行本发明实施例提供的图片的显示方法,例如,硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC,Appl ication Specific IntegratedCircuit)、DSP、可编程逻辑器件(PLD,Programma ble Logic Device)、复杂可编程逻辑器件(CPLD,Complex Programmable Lo gic Device)、现场可编程门阵列(FPGA,Field-Programmable Gate Array)或其他电子元件。
将结合本发明实施例提供的终端的示例性应用和实施,说明本发明实施例提供的图片的显示方法。参见图6,图6是本发明实施例提供的图片的显示方法的流程示意图,将结合图6示出的步骤进行说明。
步骤501:终端获取待显示图片的图片数据,及待显示图片中目标区域的区域信息。
在实际应用中,终端上设置有客户端,客户端可以为社交客户端,如即时通信客户端(微信/QQ)、微博客户端等,也可以为浏览器客户端。在待显示图片需要在客户端的显示界面中显示时,客户端向服务器发送待显示图片的图片数据的获取请求,以从服务器获取待显示图片的图片数据以及待显示图片中目标区域的区域信息。其中,图片数据可以是整个图片的图片数据,也可以是瓦片数据;目标区域为待显示图片中需要重点显示的区域。
这里,在一些实施例中,用户可以在客户端的显示界面中进行点击操作或滑动操作,以触发针对待显示图片的显示指令,使得客户端向服务器发送待显示图片的图片数据的获取请求;在另一些实施例中,在客户端检测到显示的界面中需要显示待显示图片时,主动向服务器发送待显示图片的图片数据的获取请求。
在一些实施例中,终端可以通过以下方式获取图片数据及区域信息:发送待显示图片的第一获取请求,第一获取请求中携带用于图片显示的图片容器大小;接收返回的所述图片数据及所述区域信息。其中,区域信息为当待显示图片的大小超过图片容器大小时所确定。
在实际应用中,终端将携带有图片容器大小的第一获取请求发送给服务器。服务器接收到终端发送的第一获取请求,对第一获取请求进行解析,得到用于图片显示的图片容器大小;然后从数据库中获取待显示图片的图片数据,根据图片数据确定待显示图片的大小;比较待显示图片的大小与图片容器大小,当待显示图片的大小超过图片容器大小,确定待显示图片中目标区域的区域信息;将待显示图片的图片数据,及待显示图片中目标区域的区域信息发送给终端。
这里,显示图片的大小与图片容器大小分别表示显示图片的尺寸大小以及图片容器的尺寸大小。图片数据包括待显示图片的像素和分辨率,根据待显示图片的像素和分辨率可以确定待显示图片的大小,即待显示图片的大小=待显示图片的像素/待显示图片的分辨率。
在一些实施例中,当待显示图片与图片容器均为矩形时,服务器比较待显示图片的大小与图片容器大小可以通过以下方式实现:服务器比较显示图片的宽度与图片容器的宽度,以及显示图片的高度与图片容器的高度,当显示图片的宽度大于图片容器的宽度、或显示图片的高度大于图片容器的高度时,均表示待显示图片的大小超过图片容器大小,即在显示时无法显示完整的待显示图片。
本发明实施例通过服务器在当待显示图片的大小超过图片容器大小时,返回区域信息,以使后续终端能够根据区域信息仅对目标区域进行解码及渲染,以避免在小尺寸的图片容器显示大尺寸的图片时,造成的解码整张图片的额外性能开销,实现渲染速度的优化。
在一些实施例中,终端可以通过以下方式获取图片数据及区域信息:发送待显示图片的第二获取请求,待显示图片包含目标对象;接收返回的图片数据及区域信息,区域信息对应目标对象,区域信息为,对待显示图片中的目标对象进行识别,基于目标对象在所述待显示图片中的位置所确定。
在实际应用中,终端将待显示图片的第二获取请求发送给服务器。服务器接收到第二获取请求,对待显示图片中的目标对象进行识别,以确定目标对象在待显示区域中的位置,根据目标对象所处的位置,确定对应目标对象的目标区域。其中,待显示图片中的目标区域至少包括目标对象。
在一些实施例中,服务器可以根据特征点确定目标对象所处的位置,所谓特征点就是在图片中能够反映对象的局部特征(如颜色特征、形状特征和纹理特征)的点,一般为多个像素点的集合。
在实际实施时,服务器对待显示图片进行特征点检测,识别出目标对象所包括的特征点,根据这些特征点所处的位置,确定包含这些特征点的图像区域,即目标区域。这里,目标对象可以为人脸、动物、建筑、风景等。
以人脸显示场景为例,即目标对象为人脸,图7为本发明实施例提供的人脸识别的界面示意图,参见图7,服务器对待显示图片中的人脸进行识别,虚线框为包含人脸的图像区域,即目标区域。
以动物显示场景为例,即目标对象为建筑,图8为本发明实施例提供的动物识别的界面示意图,参见图8,服务器对待显示图片中的动物进行识别,虚线框为包含牛的图像区域,即目标区域。
本发明实施例所确定的目标区域可以根据应用场景的不同进行调整,灵活度高;并且服务器通过识别的方式,确定区域信息,并返回给终端,后续终端能够根据区域信息仅对目标区域进行解码及渲染,以在仅需要重点显示对应目标对象的区域的情况下,能够避免解码整张图片的额外性能开销,实现渲染速度的优化。
在一些实施例中,终端可以通过以下方式获取图片数据及区域信息:发送待显示图片的第三获取请求,第三获取请求中携带目标用户的用户标识;接收返回的所述图片数据及所述区域信息;其中,区域信息为,根据用户标识获取目标区域的配置参数,并基于配置参数所确定。
在实际应用中,终端将待携带目标用户的用户标识的第三获取请求发送给服务器。服务器接收到第三获取请求,对第三获取请求进行解析,得到目标用户的用户标识;服务器根据目标用户的用户标识,确定对应目标用户设置的对应图片的配置参数,其中,配置参数为图片的显示参数,用于约束待显示图片的显示大小、显示范围等;服务器依据目标用户设置的对应图片的配置参数,确定目标区域的区域信息。
例如,用户登录至某个网站,该用户预先设置了图片的显示参数,那么,服务器依据用户的登录账号,获取用户所设置的显示参数,以用户所设置的显示参数,确定目标区域的区域信息。
本发明实施例通过终端发送待显示图片的第三获取请求,第三获取请求中携带目标用户的用户标识,使服务器根据用户标志获取目标区域的配置参数,并基于配置参数确定区域信息;如此,能够为不同用户确定不同的显示区域,以满足不同用户的需求;并且,能够避免解码整张图片的额外性能开销,实现渲染速度的优化。
步骤502:基于区域信息,确定目标区域在待显示图片中的相对位置。
在一些实施例中,区域信息包括目标区域在起始点坐标和终点坐标,终端可以通过以下方式确定目标区域在待显示图片中的相对位置:基于区域信息包括的起始点横坐标及终点横坐标,确定目标区域的宽度;基于区域信息包括的起始点纵坐标及终点纵坐标,确定目标区域的高度;基于目标区域的起始点横坐标、起始点纵坐标、宽度及高度,确定目标区域在待显示图片中的相对位置。
这里,在实际实施时,目标区域的宽度为终点横坐标与起始点横坐标的差值,高度为终点纵坐标与起始点纵坐标的差值,根据目标区域的起始点横坐标、起始点纵坐标、宽度及高度,确定一个相对于待显示图片内部的矩形区域,即目标区域。
在实际应用中,可以用CGRect(x,y,width,height)结构表示待显示图片内部的矩形区域,其中,CGRect用于定义一个矩形,x表示矩形起始点的横坐标,y表示矩形起始点的纵坐标,width表示矩形的宽度,height表示矩形的高度。
步骤503:基于相对位置,解码图片数据中对应目标区域的图片数据,得到对应目标区域的解码数据。
这里,通过对图片数据中对应目标区域的图片数据进行解码,得到对应目标区域的原始像素数据,即解码数据。解码数据可以用位图(Bitmap)的数据结构表示,即用点阵像素来表现图像数据的数据结构。
在实际实施时,通过负责解码的子线程,对图片数据中对应目标区域的图片数据进行解码,以避免占用主线程资源。得到对应目标区域的解码数据后,再调度到主线程,以通过主线程执行步骤504。
在一些实施例中,终端通过以下方式实现解码图片数据中对应目标区域的图片数据:调用对应图片数据解码的接口;通过接口,解码图片数据中对应目标区域的图片数据。
在实际实施时,终端不直接使用中央处理器(CPU,central processing uni t)解压图片数据,避免解码整张图片的图片数据,而是使用对应图片数据解码的接口,解码图片数据中对应目标区域的图片数据,如,通过imageIO提供的解码特定区域的图片数据的接口,解码图片数据中对应目标区域的图片数据。
在一些实施例中,终端通过以下方式实现解码图片数据中对应目标区域的图片数据:基于相对位置,从图片数据中确定对应目标区域的图片数据;对所述对应目标区域的图片数据进行解码,得到对应目标区域的解码数据。
在实际实施时,根据目标区域的起始点横坐标、起始点纵坐标、宽度及高度所确定矩形区域,确定对应目标区域的图片数据,以对对应目标区域的图片数据进行解码。
例如,图9为本发明实施例提供的解码对应目标区域的图形数据的示意图,参见图9,在图片数据中确定对应目标区域的图片数据,即虚线框所表示的部分,然后将该虚线框表示的部分提取出来,仅对该虚线框表示的部分进行解码操作。
步骤504:基于解码数据,渲染并显示待显示图片中的目标区域。
在实际实施时,终端可通过图形处理器(GPU,Graphics Processing Unit)渲染待显示图片中的目标区域。
在一些实施例中,终端通过以下方式实现渲染并显示待显示图片中的目标区域:获取用于图片显示的图片容器大小;基于图片容器大小,渲染解码数据至所述图片容器,使得目标区域的大小与图片容器大小相适配。
在实际实施时,将渲染出的待显示图片中的目标区域显示在图片容器中,按照最短宽高适配规则目标区域,使得目标区域能刚好填充满图片容器,例如,图10为本发明实施例提供的显示待显示图片中的目标区域的示意图,参见图10,显示的目标区域与图片容器的高度相同,目标区域的宽度略长于图片容器的宽度,即目标区域与图片容器的尺寸比较接近,避免了渲染不必要的图片数据。
本发明实施例通过基于待显示图片中目标区域的区域信息,确定目标区域在待显示图片中的相对位置;根据相对位置,解码图片数据中对应目标区域的图片数据,得到对应目标区域的解码数据;基于解码数据,渲染并显示待显示图片中的所述目标区域;如此,由于仅对图片数据中对应目标区域的图片数据进行解码及渲染,避免了在对无需显示的区域的图片数据进行解码及渲染时,产生额外的性能开销,提升了解码及渲染的速度及效率。
下面以在小尺寸图片容器中显示大尺寸图片为例,说明本发明实施例提供的图片的显示方法,图11为本发明实施例提供的图片的显示方法的流程示意图,参见图11,本发明实施例提供的表情的推荐方法包括:
步骤601:发送待显示图片的获取请求。
这里,用户基于客户端进行点击操作,以触发待显示图片的显示指令,客户端接收到待显示图片的显示指令,发送待显示图片的获取请求给服务器。其中,第一获取请求中携带用于图片显示的图片容器大小,待显示图片包括目标对象。
步骤602:解析客户端发送的获取请求,得到用于图片显示的图片容器大小。
这里,图片容器大小指的是图片容器的尺寸大小。
步骤603:获取待显示图片的大小,并比较待显示图片的大小与图片容器大小,得到比较结果。
这里,获取待显示图片的图片数据,根据图片数据中的像素及分辨率确定待显示图片的大小,将待显示图片的大小与图片容器大小进行比较。
步骤604:当比较结果表征待显示图片的大小超过图片容器大小时,对待显示图片中的人脸所包括的特征点进行检测,确定人脸所包括的特征点在待显示图片中的位置。
这里,特征点就是在图片中能够反映对象的局部特征的点,一般为多个像素点的集合。
步骤605:基于人脸特征点在待显示图片中的位置、以及图片容器大小,确定包含人脸的目标区域。
这里,目标区域包括待显示图片中的人脸,且目标区域的大小与图片容器大小相匹配。
步骤606:确定目标区域在待显示图片中的起始点坐标和终点坐标。
步骤607:将待显示图片的图片数据、及目标区域的起始点坐标和终点坐标返回给客户端。
步骤608:基于起始点横坐标及终点横坐标,确定目标区域的宽度,以及基于起始点纵坐标及终点纵坐标,确定所述目标区域的高度。
步骤609:基于目标区域的起始点坐标、宽度及高度,确定目标区域在待显示图片中的相对位置。
这里,得到一个相对于待显示图片内部的矩形区域,可以用CGRect(x,y,width,height)结构表示,其中,CGRect用于定义一个矩形,x表示矩形起始点的横坐标,y表示矩形起始点的纵坐标,width表示矩形的宽度,height表示矩形的高度。
步骤610:基于相对位置,从图片数据中确定对应目标区域的图片数据。
步骤611:调用对应图片数据解码的接口。
在实际实施时,终端不直接使用中央处理器(CPU,central processing uni t)解压图片数据,避免解码整张图片的图片数据,而是使用对应图片数据解码的接口,解码图片数据中对应目标区域的图片数据,如,通过imageIO提供的解码特定区域的图片数据的接口,解码图片数据中对应目标区域的图片数据。
步骤612:通过接口,对对应目标区域的图片数据进行解码,得到对应目标区域的解码数据。
步骤613:基于图片容器大小,渲染解码数据至图片容器,使得目标区域的大小与图片容器大小相适配。
在实际实施时,将渲染出的待显示图片中的目标区域显示在图片容器中,按照最短宽高适配规则调整图片显示区域,使得图片能刚好填充满图片容器。
图12为本发明实施例提供的图片的显示方法的流程示意图,参见图12,当待显示图片需要在客户端的显示界面中显示时,终端首先获取服务器下发的待显示图片的图片结构信息,然后根据图片结构信息可以得到待显示图片的图片数据和待显示图片中目标区域的区域信息。
需要说明的是,目标区域的区域信息可以根据应用场景的不同,而采用不同的方式确定的。例如,在某些运营应用场景下,区域信息可以是编辑编写某种运营活动图片时设置的;在某些人脸显示应用场景下,通过对待显示图片进行人脸识别,以确定需要显示的某个人脸在整张图片中的区域信息,图13为本发明实施例提供的人像显示应用场景下的图片显示的示意图,参见图13,通过图片容器,显示整张图片中的人脸区域。
在实际实施时,服务器下发的待显示图片的图片结构信息,可以采用以下结构:
Figure BDA0002234878590000151
Figure BDA0002234878590000161
这里,终端可以根据图片结构信息中图片的URL,将待显示图片的图片数据下载至磁盘。需要说明的是,通过负责下载的线程完成待显示图片的图片数据的下载,以避免主线程资源被占用。然后终端从磁盘读取图片数据,缓存到内存。
图片结构信息中的areaInfo表示待显示图片中目标区域的区域信息,包括目标区域的起始点坐标和终点坐标。根据目标区域的起始点坐标和终点坐标,计算目标区域的宽度和高度,宽度为endPoint的x减去startPoint的x,高度为endPoint的y减去startPoint的y。
然后,根据目标区域的起始点坐标、及目标区域的宽度和高度,确定目标区域在待显示图片中的相对位置。这里,可以得到一个相对于图片内部的钜形区域,用CGRect(x,y,width,height)结构表示,CGRect用于定义一个矩形,x表示矩形起始点的横坐标,y表示矩形起始点的纵坐标,width表示矩形的宽度,height表示矩形的高度,那么,目标区域可以表示为CGRect(startPoint.x,startPoint.y,endPoint.x-startPoint.x,endpoint.y-startPoint.y)。
在获取到目标区域在待显示图片中的相对位置后,根据相对位置,确定图片数据中对应目标区域的图片数据,并解码对应目标区域的图片数据,以得到解码数据。
在实际实施时,终端不直接使用CPU解压图片数据,以避免解码整张图片,而是使用imageIO提供的解码指定区域的图片数据的接口,解码对应目标区域的图片数据。参见图9,在图片数据中确定对应目标区域的图片数据,即虚线框所表示的部分,然后将该虚线框表示的部分提取出来,仅对该虚线框表示的部分进行解码操作。
需要说明的是,通过负责解码的子线程执行解码操作,以避免占用主线程资源,得到解码数据后,在调度到主线程,以通过主线程执行渲染操作。
最后,根据解码数据,渲染并显示待显示图片中的目标区域。
在实际实施时,渲染解码数据,生成frameBuffer帧缓存,显示在图片容器中。按照最短宽高适配规则调整待显示图片中的目标区域,使得待显示图片中的目标区域能刚好填充满图片容器。参见图10,实际解码渲染的图片数据和图片容器尺寸比较接近,避免了解码渲染不必要的数据。
下面继续说明本发明实施例提供的图片的显示装置455的实施为软件模块的示例性结构。参见图14,图14为本发明实施例提供的图片的显示装置455的组成结构示意图,参见图14,本公开实施例图片的显示装置455包括:
获取模块4551,用于获取待显示图片的图片数据,及所述待显示图片中目标区域的区域信息;
确定模块4552,用于基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置;
解码模块4553,用于基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据;
渲染模块4554,用于基于所述解码数据,渲染并显示所述待显示图片中的所述目标区域。
在一些实施例中,所述获取模块4551,还用于发送所述待显示图片的第一获取请求,所述第一获取请求中携带用于图片显示的图片容器大小;
接收返回的所述图片数据及所述区域信息;
其中,所述区域信息为,当所述待显示图片的大小超过所述图片容器大小时所确定。
在一些实施例中,所述获取模块4552,还用于发送所述待显示图片的第二获取请求,所述待显示图片包含目标对象;
接收返回的所述图片数据及所述区域信息,所述区域信息对应所述目标对象,所述区域信息为,对所述待显示图片中的目标对象进行识别,基于所述目标对象在所述待显示图片中的位置所确定。
在一些实施例中,所述获取模块4552,还用于发送所述待显示图片的第三获取请求,所述第三获取请求中携带目标用户的用户标识;
接收返回的所述图片数据及所述区域信息;
其中,所述区域信息为,根据所述用户标识获取所述目标区域的配置参数,并基于所述配置参数所确定。
在一些实施例中,所述解码模块4553,还用于调用对应图片数据解码的接口;
通过所述接口,解码所述图片数据中对应所述目标区域的图片数据。
在一些实施例中,所述确定模块4552,还用于基于所述区域信息包括的起始点横坐标及终点横坐标,确定所述目标区域的宽度;
基于所述区域信息包括的起始点纵坐标及终点纵坐标,确定所述目标区域的高度;
基于所述目标区域的所述起始点横坐标、起始点纵坐标、宽度及高度,确定所述目标区域在所述待显示图片中的相对位置。
在一些实施例中,所述解码模块4553,还用于基于所述相对位置,从所述图片数据中确定对应所述目标区域的图片数据;
对所述对应所述目标区域的图片数据进行解码,得到对应所述目标区域的解码数据。
在一些实施例中,所述渲染模块4554,还用于获取用于图片显示的图片容器大小;
基于所述图片容器大小,渲染所述解码数据至所述图片容器,使得所述目标区域的大小与所述图片容器大小相适配。
本发明实施例提供一种存储有可执行指令的存储介质,其中存储有可执行指令,当可执行指令被处理器执行时,将引起处理器执行本发明实施例提供的方法,例如,如图5示出的方法。
在一些实施例中,存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器;也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中,可执行指令可以采用程序、软件、软件模块、脚本或代码的形式,按任意形式的编程语言(包括编译或解释语言,或者声明性或过程性语言)来编写,并且其可按任意形式部署,包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例,可执行指令可以但不一定对应于文件系统中的文件,可以可被存储在保存其它程序或数据的文件的一部分,例如,存储在超文本标记语言(HTML,Hyper TextMarkup Language)文档中的一个或多个脚本中,存储在专用于所讨论的程序的单个文件中,或者,存储在多个协同文件(例如,存储一个或多个模块、子程序或代码部分的文件)中。
作为示例,可执行指令可被部署为在一个计算设备上执行,或者在位于一个地点的多个计算设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算设备上执行。
以上所述,仅为本发明的实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和范围之内所作的任何修改、等同替换和改进等,均包含在本发明的保护范围之内。

Claims (10)

1.一种图片的显示方法,其特征在于,所述方法包括:
获取服务器发送的待显示图片的图片数据,及所述待显示图片中目标区域的区域信息,其中,所述区域信息为当所述待显示图片的大小超过图片容器大小时所确定;或所述区域信息为,根据用户标识获取所述目标区域的配置参数,并基于所述配置参数所确定;
基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置;
基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据;
获取用于图片显示的图片容器尺寸;
基于所述图片容器尺寸,渲染所述解码数据至所述图片容器;
在所述图片容器中显示所述待显示图片中的所述目标区域,其中,所述目标区域的尺寸与所述图片容器尺寸一致。
2.如权利要求1所述的方法,其特征在于,所述获取服务器发送的待显示图片的图片数据,及所述待显示图片中目标区域的区域信息,包括:
发送所述待显示图片的第一获取请求,所述第一获取请求中携带用于图片显示的图片容器尺寸;
接收返回的所述图片数据及所述区域信息;
其中,所述区域信息为,当所述待显示图片的尺寸超过所述图片容器尺寸时所确定。
3.如权利要求1所述的方法,其特征在于,所述获取服务器发送的待显示图片的图片数据,及所述待显示图片中目标区域的区域信息,包括:
发送所述待显示图片的第二获取请求,所述待显示图片包含目标对象;
接收返回的所述图片数据及所述区域信息,所述区域信息对应所述目标对象,所述区域信息为,对所述待显示图片中的目标对象进行识别,基于所述目标对象在所述待显示图片中的位置所确定。
4.如权利要求1所述的方法,其特征在于,所述获取服务器发送的待显示图片的图片数据,及所述待显示图片中目标区域的区域信息,包括:
发送所述待显示图片的第三获取请求,所述第三获取请求中携带目标用户的用户标识;
接收返回的所述图片数据及所述区域信息;
其中,所述区域信息为,根据所述用户标识获取所述目标区域的配置参数,并基于所述配置参数所确定。
5.如权利要求1所述的方法,其特征在于,所述解码所述图片数据中对应所述目标区域的图片数据,包括:
调用对应图片数据解码的接口;
通过所述接口,解码所述图片数据中对应所述目标区域的图片数据。
6.如权利要求1所述的方法,其特征在于,所述基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置,包括:
基于所述区域信息包括的起始点横坐标及终点横坐标,确定所述目标区域的宽度;
基于所述区域信息包括的起始点纵坐标及终点纵坐标,确定所述目标区域的高度;
基于所述目标区域的所述起始点横坐标、起始点纵坐标、宽度及高度,确定所述目标区域在所述待显示图片中的相对位置。
7.如权利要求1所述的方法,其特征在于,所述基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据,包括:
基于所述相对位置,从所述图片数据中确定对应所述目标区域的图片数据;
对所述对应所述目标区域的图片数据进行解码,得到对应所述目标区域的解码数据。
8.一种图片的显示装置,其特征在于,所述装置包括:
获取模块,用于获取服务器发送的待显示图片的图片数据,及所述待显示图片中目标区域的区域信息,其中,所述区域信息为当所述待显示图片的大小超过图片容器大小时所确定;或所述区域信息为,根据用户标识获取所述目标区域的配置参数,并基于所述配置参数所确定;
确定模块,用于基于所述区域信息,确定所述目标区域在所述待显示图片中的相对位置;
解码模块,用于基于所述相对位置,解码所述图片数据中对应所述目标区域的图片数据,得到对应所述目标区域的解码数据;
渲染模块,用于获取用于图片显示的图片容器尺寸;基于所述图片容器尺寸,渲染所述解码数据至所述图片容器;在所述图片容器中显示所述待显示图片中的所述目标区域,其中,所述目标区域的尺寸与所述图片容器尺寸一致。
9.一种计算机可读存储介质,其特征在于,存储有可执行指令,用于引起处理器执行时,实现如权利要求1至7任一项所述的图片的显示方法。
10.一种图片的显示设备,其特征在于,包括:
存储器,用于存储可执行指令;
处理器,用于执行所述存储器中存储的可执行指令时,实现权利要求1至7任一项所述的图片的显示方法。
CN201910979987.9A 2019-10-15 2019-10-15 图片的显示方法及装置 Active CN110750664B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910979987.9A CN110750664B (zh) 2019-10-15 2019-10-15 图片的显示方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910979987.9A CN110750664B (zh) 2019-10-15 2019-10-15 图片的显示方法及装置

Publications (2)

Publication Number Publication Date
CN110750664A CN110750664A (zh) 2020-02-04
CN110750664B true CN110750664B (zh) 2023-03-28

Family

ID=69278400

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910979987.9A Active CN110750664B (zh) 2019-10-15 2019-10-15 图片的显示方法及装置

Country Status (1)

Country Link
CN (1) CN110750664B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112115392B (zh) * 2020-08-18 2023-08-25 北京奇艺世纪科技有限公司 图像显示方法、装置、电子设备以及可读存储介质
CN112507257B (zh) * 2020-12-07 2024-03-26 北京达佳互联信息技术有限公司 一种网页显示方法、装置、设备以及存储介质
CN112700507A (zh) * 2020-12-28 2021-04-23 统信软件技术有限公司 一种图片显示方法、计算设备和存储介质
CN114022590B (zh) * 2020-12-30 2023-03-24 万翼科技有限公司 图片渲染方法及相关设备
CN114217758A (zh) * 2021-12-01 2022-03-22 深圳Tcl新技术有限公司 图像显示方法、装置、电子设备及计算机可读存储介质

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104753883B (zh) * 2013-12-30 2017-01-25 腾讯科技(深圳)有限公司 界面显示方法、装置和系统
CN103914689B (zh) * 2014-04-09 2017-03-15 百度在线网络技术(北京)有限公司 基于人脸识别的图片裁剪方法及装置
KR102444920B1 (ko) * 2014-11-20 2022-09-19 삼성전자주식회사 윈도우의 크기를 변경하는 디바이스 및 그 제어 방법
CN105607793B (zh) * 2014-11-25 2021-08-17 联想(北京)有限公司 调整窗口的方法和电子设备
CN104504649A (zh) * 2014-12-30 2015-04-08 百度在线网络技术(北京)有限公司 图片的裁剪方法和装置
CN104899060B (zh) * 2015-05-20 2017-12-15 天脉聚源(北京)教育科技有限公司 一种图片加载处理方法和装置
CN106095884A (zh) * 2016-06-03 2016-11-09 深圳码隆科技有限公司 一种基于图片的相关物品信息处理方法及装置

Also Published As

Publication number Publication date
CN110750664A (zh) 2020-02-04

Similar Documents

Publication Publication Date Title
CN110750664B (zh) 图片的显示方法及装置
US8913068B1 (en) Displaying video on a browser
KR101952983B1 (ko) 콘텐트의 타일-기반 렌더링을 위한 방법 및 콘텐트를 렌더링하기 위한 시스템
CN112770188B (zh) 一种视频播放方法及装置
CN111930442B (zh) 页面视图的加载方法、装置、存储介质和电子设备
WO2023197762A1 (zh) 图像渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品
CN111951356B (zh) 基于json数据格式的动画渲染方法
CN110825467B (zh) 渲染方法、装置、硬件装置和计算机可读存储介质
CN113778604A (zh) 一种操作界面的展示方法、装置、电子设备和存储介质
CN110865863B (zh) 快应用的界面显示方法、装置及存储介质
CN110471700B (zh) 图形处理方法、装置、存储介质及电子设备
CN111580808A (zh) 页面生成方法、装置、计算机设备及存储介质
JP2021006982A (ja) 文字の色を決定する方法および装置
CN106293658B (zh) 一种界面组件生成方法及其设备
CN117611703A (zh) 弹幕字符的渲染方法、装置、设备、存储介质及程序产品
CN115495175A (zh) 图片展示方法、装置、终端设备和计算机介质
CN112419456B (zh) 一种特效画面生成方法和装置
CN113538502A (zh) 图片裁剪方法、装置、电子设备及存储介质
CN111460342B (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN111476858A (zh) 一种基于WebGL的2d引擎渲染方法、装置及设备
CN116596748A (zh) 图像风格化处理方法、装置、设备、存储介质和程序产品
CN113282852A (zh) 编辑网页的方法和装置
CN113888684A (zh) 图形渲染方法、设备及计算机存储介质
CN113763552A (zh) 三维地理模型的展示方法、装置、计算机设备和存储介质
CN112328940A (zh) 网页嵌入过渡页的方法、装置、计算机设备及存储介质

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
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 40020849

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant