图像显示方法、装置、计算机可读存储介质和计算机设备与流程

文档序号:24646397发布日期:2021-04-13 15:20阅读:53来源:国知局
1.本申请涉及图像处理
技术领域
:,特别是涉及一种图像显示方法、装置、计算机可读存储介质和计算机设备。
背景技术
::2.随着互联网技术的不断发展,各种各样的应用也应运而生,受到广大用户的喜爱。尤其是网页应用,用户可以浏览文本、图像、视频和视频等信息,以及接听音频信息,网页应用以其灵活性和标准性等特点,使得在当前的互联网
技术领域
:中大放光彩。3.用户在查看包含图像的信息时,可以通过网页应用向服务器发送查看请求,从而从服务器处下载对应的图像进行显示。由于图像的清晰程度与图像尺寸成正比,而随着图像的尺寸增大,使得图像的传输效率低,而具有尺寸小、质量高的格式图像许多平台都不兼容,从而降低了网页应用显示图像的效率。技术实现要素:4.基于此,有必要针对网页应用显示图像的效率低的技术问题,提供一种图像方法、装置、计算机可读存储介质和计算机设备。5.一种图像显示方法,包括:6.获取第一图像格式的图像数据;7.当通过网页应用加载图像转码文件时,调用所述图像转码文件的图像转码算法;所述图像转码文件为编译图像转码算法所得的文件;8.基于调用的所述图像转码算法,将所述图像数据转码为第二图像格式的目标图像数据;9.渲染所述第二图像格式的目标图像数据并进行显示。10.一种图像显示装置,所述装置包括:11.数据获取模块,用于获取第一图像格式的图像数据;12.调用模块,用于当通过网页应用加载图像转码文件时,调用所述图像转码文件的图像转码算法;所述图像转码文件为编译图像转码算法所得的文件;13.转码模块,用于基于调用的所述图像转码算法,将所述图像数据转码为第二图像格式的目标图像数据;14.显示模块,用于渲染所述第二图像格式的目标图像数据并进行显示。15.一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行所述图像显示方法的步骤。16.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行所述图像显示方法的步骤。17.上述图像显示方法、装置、计算机可读存储介质和计算机设备,由于预先配置了编译图像转码算法所得的图像转码文件,可通过网页应用加载该图像转码文件,在需要对第一图像格式的图像数据进行转码时,网页应用可直接调用经过编译的图像转码算法,从而在网页应用便可实现对图像数据的转码,得到网页应用支持的第二图像格式的目标图像数据,使得网页应用可以正常显示特定格式的图像,提高了图像显示效率。18.一种图像显示方法,包括:19.当检测到图像加载事件时,从服务器下载经过压缩的图像数据;20.当编译解压缩算法所得的解压缩算法文件加载完成时,通过网页应用调用解压缩算法;所述解压缩算法为所述网页应用与所述服务器约定的算法;21.采用所述解压缩算法对所述图像数据进行解压处理;22.对解压处理所得的图像数据进行渲染并显示。23.一种图像显示装置,所述装置包括:24.下载模块,用于当检测到图像加载事件时,从服务器下载经过压缩的图像数据;25.调用模块,用于当编译解压缩算法所得的解压缩算法文件加载完成时,通过网页应用调用解压缩算法;所述解压缩算法为所述网页应用与所述服务器约定的算法;26.解压模块,用于采用所述解压缩算法对所述图像数据进行解压处理;27.显示模块,用于对解压处理所得的图像数据进行渲染并显示。28.一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行所述图像显示方法的步骤。29.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行所述图像显示方法的步骤。30.上述图像显示方法、装置、计算机可读存储介质和计算机设备,由于预先配置了编译解压缩算法所得的解压缩算法文件,该解压缩算法是网页应用与服务器约定的算法,网页应用可直接识别该解压缩算法文件,因此在需要对经过压缩的图像数据进行解压时,网页应用可以直接调用经过编译的解压缩算法,在网页应用中实现对图像数据进行解码,以便网页应用正常显示该解码后的图像。此外,由于图像数据经过了压缩,使得在传输过程中提高了传输效率,缩短了图像显示的等待时间,进而提高了图像显示效率。附图说明31.图1为一个实施例中图像显示方法的应用环境图;32.图2为一个实施例中图像显示方法的流程示意图;33.图3为一个实施例中对图像数据进行转码步骤的流程示意图;34.图4为一个实施例中在社交应用程序中展示转码后的图像数据、用户基础信息和距离信息步骤的流程示意图;35.图5为一个实施例中社交应用程序中展示转码后的图像数据、用户基础信息和距离信息的界面示意图;36.图6为一个实施例中webpack插件的模块示意图;37.图7为一个实施例中图像转码算法编译过程的示意图;38.图8为一个实施例中对图像压缩文件进行解压步骤的流程示意图;39.图9为一个实施例中传输图像的检测界面示意图;40.图10为另一个实施例中图像显示方法的流程示意图;41.图11为另一个实施例中图像显示方法的流程示意图;42.图12为一个实施例中图像显示装置的结构框图;43.图13为另一个实施例中图像显示装置的结构框图;44.图14为另一个实施例中图像显示装置的结构框图;45.图15为一个实施例中计算机设备的结构框图。具体实施方式46.为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。47.图1为一个实施例中图像显示方法的应用环境图。参照图1,该图像显示方法应用于图像显示系统。该图像显示系统包括终端110和服务器120。终端110和服务器120通过网络连接。终端110从服务器120获取第一图像格式的图像数据;当通过网页应用加载图像转码文件时,调用图像转码文件的图像转码算法;图像转码文件为网页应用直接识别的、且为编译图像转码算法所得的文件;基于调用的图像转码算法,将图像数据转码为第二图像格式的目标图像数据;渲染第二图像格式的目标图像数据并进行显示。48.其中,终端110具体可以是台式终端或移动终端,移动终端具体可以手机、平板电脑、笔记本电脑等中的至少一种。服务器120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。49.如图2所示,在一个实施例中,提供了一种图像显示方法。本实施例主要以该方法应用于上述图1中的终端110来举例说明。参照图2,该图像显示方法具体包括如下步骤:50.s202,获取第一图像格式的图像数据。51.其中,第一图像格式可以是具有尺寸小、质量高等特点的图像格式,包括但不限于webp格式、av1(aomediavideo,开放联盟媒体视频)格式和heif(highefficiencyimageformat,高效图像文件格式)格式。图像数据可以是图像文件,也可以是图像的数据,该数据包括但不限于:像素、分辨率、大小、颜色、位深、色调、饱和度、亮度、色彩通道、图像格式和图像压缩比。在后续实施例中,以第一图像格式为webp格式为例进行说明。52.在一个实施例中,终端实时检测网页应用的图像加载事件,根据该图像加载事件生成图像加载请求,向服务器发送该图像加载请求,以请求服务器向终端返回与图像加载请求对应的第一图像格式的图像数据。53.其中,网页应用可以是独立形式存在的浏览器,也可以是内置于应用程序的内置网页,通过该内置网页可以向服务器发送图像加载请求,以从服务器获取对应的图像数据并进行显示。该图像加载请求可以包含有图像链接,也可以不包含图像链接。图像链接可以指从一个网页指向一个目标的连接关系,所指向的目标可以是另一个网页,也可以是一个文件,通过该图像链接可以获得对应的图像数据。图像加载事件可以是用于加载图像的操作或指令,包括但不限于:点击网页应用的信息展示页面中的链接标识,也可以是启动网页应用的完成指令,也可以是点击进入网页应用的信息展示页面的指令等。54.在一个实施例中,当图像加载请求中携带有图像链接时,服务器根据图像链接获取第一图像格式的图像数据,将获取的图像数据发送至终端。55.具体地,终端检测网页应用的图像加载事件;当检测到图像加载事件时,获取图像加载事件对应的图像链接;根据图像链接从对应服务器下载第一图像格式的图像数据。其中,图像加载事件可以是用于加载图像的操作或指令,包括但不限于:点击网页应用的信息展示页面中的链接标识,也可以是启动网页应用的完成指令,也可以是点击进入网页应用的信息展示页面的指令等。56.在另一个实施例中,当图像加载请求中未携带有图像链接时,服务器根据配置的推荐算法获取待推荐的第一图像格式的图像数据,将获取的图像数据发送至终端。57.例如,用户在浏览网页时,看到一则关于美食的图像链接,当用户点击该链接时,一方面进入对应的信息展示页面,另一方面根据该图像链接从服务器获取对应的webp图像,以便在信息展示页面展示该webp图像。58.s204,当通过网页应用加载图像转码文件时,调用图像转码文件的图像转码算法。59.其中,图像转码文件可以是编译图像转码算法所得的文件,且能够被网页应用直接识别并调用其中的图像转码算法。该图像转码文件的程序代码可以与javascript(脚本语言)在同一环境中运行,该程序代码以类汇编语言所构成,其格式为wasm(webassembly)格式,wasm格式是网页应用所支持的格式,可以在网页应用中执行,当图像转码文件加载完成后,图像转码文件中的图像转码算法被挂在在全局实例中,网页应用可直接调用该图像转码算法。wasm是一种新的字节码格式,wasm字节码与底层机器码相似可以快速运行。60.图像转码算法可用于将不能在网页应用显示的图像数据转换为能够显示的图像数据。具体地,图像转码算法可用于将第一图像格式的图像数据转换成能够在网页应用显示的第二图像格式的目标图像数据。61.在一个实施例中,网页应用插入了文件加载逻辑,终端通过该网页应用中的文件加载逻辑加载图像转码文件。其中,文件加载逻辑具体可以包括文件预加载逻辑和文件懒加载逻辑。62.具体地,若文件加载逻辑为文件预加载逻辑,当检测到网页应用启动完成、或进入网页应用的信息展示页面时,对图像转码文件进行预加载,可以提高加载效率。或者,若文件加载逻辑为文件懒加载逻辑,当检测到图像转码事件时,异步加载图像转码文件。其中,该图像转码事件可以是获取到格式为第一图像格式的图像数据,也可以是点击链接标识或向服务器发送图像加载请求。63.在一个实施例中,图像转码算法在编译之前,可以是由所有支持llvm(lowlevelvirtualmachine,底层虚拟机)的语言所构建的算法。其中,支持llvm的语言包括但不限于c、c++、rust和go等。终端通过编译工具,将图像转码算法编译成能被网页应用直接识别的类汇编语言图像转码文件。其中,该编译工具包括emscripten和asm2wasm插件。emscripten的底层是llvm编译器,任何可以生成llvmir(intermediaterepresentation,中间代码)的语言,都可以编译生成asm.js。生成llvmir的语言包括但不限于c++、rust或go语言。asm2wasm插件可以分析asm.js格式文件并将其转换成wasm格式的图像转码文件。64.s206,基于调用的图像转码算法,将图像数据转码为第二图像格式的目标图像数据。65.在一个实施例中,图像转码算法可以由支持llvm的语言对以下步骤进行构建而成:将第一图像格式的图像数据转码成第二图像格式的目标图像数据。因此,通过调用的图像转码算法,终端可以将图像数据转码为第二图像格式的目标图像数据。66.在另一个实施例中,图像转码算法可以由支持llvm的语言对以下步骤进行构建而成:将图像数据转换为二进制图像数据;将二进制图像数据转换成色彩空间数据;对色彩空间数据进行转码,得到第二图像格式的目标图像数据。因此,通过调用的图像转码算法,终端可以将图像数据转转换为第二图像格式的目标图像数据。67.例如,图像转码算法的构建步骤包括:webp图片数据转换为二进制图像数据,然后将二进制图像数据转换成rgba数据,然后将转换完成的rgba数据转成jepg(jointphotographicexpertsgroup,联合图像专家小组)格式数据、或png(portablenetworkgraphics,便携式网络图像)格式数据、或bmp(bitmap,位图)格式数据。68.在另一个实施例中,图像转码算法可以由支持llvm的语言对以下步骤进行构建而成:读取二进制图像数据的图像属性信息,按照配置的期望参数调整二进制图像数据的图像属性信息;对二进制图像数据进行色彩空间转换,得到色彩空间数据,对色彩空间数据进行转码得到第二图像格式的目标图像数据。因此,通过调用的图像转码算法,终端可以将图像数据转转换为第二图像格式的目标图像数据。69.s208,渲染第二图像格式的目标图像数据并进行显示。70.在一个实施例中,终端调用渲染工具对第二图像格式的目标图像数据进行渲染,得到渲染数据,然后将该渲染数据进行上屏显示。71.例如,终端调用webgl(webgraphicslibrary,网络图形库),或opengles(opengraphicslibraryforembeddedsystems,嵌入式系统开放式图形库),或opengles2.0版本对第二图像格式的目标图像数据进行渲染,然后将渲染所得的渲染数据进行上屏。72.上述实施例中,由于预先配置了编译图像转码算法所得的图像转码文件,可通过网页应用加载该图像转码文件,在需要对第一图像格式的图像数据进行转码时,网页应用可直接调用经过编译的图像转码算法,从而在网页应用便可实现对图像数据的转码,得到网页应用支持的第二图像格式的目标图像数据,使得网页应用可以正常显示特定格式的图像,提高了图像显示效率。73.在一个实施例中,如图3所示,s206具体可以包括:74.s302,将图像数据转换为二进制图像数据。75.在一个实施例中,终端将图像数据转换为二进制图像数据,将二进制图像数据保存于类型化数组中。其中,类型化数组可以是arraybuffer,arraybuffer可以是通用的、固定长度的原始二进制数据缓冲区,arraybuffer中的数据不能直接操作,可以通过类型数组对象或数据视图(dataview)对象来操作,类型数组对象或dataview对象会将数据缓冲区中的数据表示为特定格式,并通过这些格式来读写数据缓冲区的数据。76.s304,将二进制图像数据转换成色彩空间数据。77.其中,色彩空间是指red(红色)green(绿色)blue(蓝色)和alpha四通道的色彩空间,即rgba色彩空间。alpha通道数值用作不透明度参数,当一个像素的alpha通道数值为0%,则该像素是完全透明的;当一个像素的alpha通道数值为100%,则该像素是完全不透明的。在0%和100%之间的值则使得像素可以透过背景显示出来,即半透明性。78.在s304之前,该方法还可以包括:终端读取二进制图像数据的图像属性信息;s304具体可以包括:终端按照配置的期望参数调整二进制图像数据的图像属性信息;对二进制图像数据进行色彩空间转换,得到色彩空间数据。79.其中,图像属性信息可以包括图像的尺寸、图像压缩比和亮度等。期望参数可以是设定的关于图像属性信息的期望值,例如图像的期望尺寸、期望压缩比和期望亮度。80.在一个实施例中,终端按照输入的配置操作配置期望参数。当调整图像属性信息时,终端读取配置的期望参数,根据该期望参数调整二进制图像数据的图像属性信息。具体地,终端读取配置的期望尺寸,按照期望尺寸调整二进制图像数据的尺寸;读取配置的期望压缩比,按照期望压缩比对二进制图像数据进行压缩;读取配置的期望亮度,按照期望亮度调整二进制图像数据的亮度。81.s306,对色彩空间数据进行转码,得到第二图像格式的目标图像数据。82.在一个实施例中,终端将色彩空间数据转码成平台所支持的第二图像格式的目标二进制图像数据,然后将目标二进制图像数据转换成目标图像数据。83.例如,终端将rgba数据进行转码,输出平台所支持的jepg格式、或png格式、或bmp格式的arraybuffer,然后再转成base64格式的目标图像数据。84.在一个实施例中,终端调用图像显示方法对目标图像数据进行渲染,然后将渲染所得的目标图像数据显示于网页应用的信息展示页面。85.上述实施例中,将第一图像格式的图像数据转码为第二图像格式的目标图像数据,从而可以使得原本无法在网页应用显示的图像数据可以在网页应用中正常显示,提高了图像显示的效率。此外,按照期望参数调整图像属性信息,从而可以在显示图像数据时,可以按照用户期望进行显示,从而使图像显示达到最佳显示效果。86.在一个实施例中,网页应用包括社交应用程序的内置网页应用;图像数据为预设距离范围内社交人群的图像数据;如图4所示,该方法还包括:87.s402,获取预设距离范围内社交人群的基础信息和距离信息。88.其中,预设距离范围是指其它终端距离本地终端一定范围内,可以是1至n千米,n为大于1的正数。社交人群是指当前或历史登录社交应用的用户。预设距离范围内社交人群是指当前或历史登录社交应用、且在预设距离范围的用户,如登录社交应用的附近人,如图5所示。距离信息可以包括终端(即本地终端)与其它终端之间的距离值。89.在一个实施例中,当登录社交应用程序时,终端会获取当前的位置信息,并将该位置信息发送至服务器,以便服务器根据该终端的位置信息和其它终端发送的位置信息计算距离信息。当检测到查询用户信息的触发事件时,终端向服务器发送用户信息查询指令,以便服务器查找预设距离范围内社交人群的基础信息和距离信息,将查找到的基础信息和距离信息返回终端。90.在一个实施例中,终端除了获取预设距离范围内社交人群的基础信息和距离信息之外,还可以从服务器处获取该社交人群的动态信息以及针对该动态信息的关联信息。该关联信息可以包括动态信息的评论信息和/或点赞信息,如图5(a)所示。91.在一个实施例中,终端通过内置网页应用可以向服务器发送图像加载请求,以从服务器获取对应的图像数据并进行显示。例如,如图5(a)所示,用户点击“附近动态”时,内置网页应用向服务器发送图像加载请求,从而可以从服务器获取附近人的基础信息、距离信息、动态信息以及针对该动态信息的关联信息。92.s208具体可以包括:s404,对第二图像格式的目标图像数据进行渲染。93.在一个实施例中,终端调用渲染工具对第二图像格式的目标图像数据进行渲染,得到渲染数据,以便将该渲染数据进行上屏显示。94.例如,终端调用webgl,或opengles,或opengles2.0版本对第二图像格式的目标图像数据进行渲染,以便将渲染所得的渲染数据进行上屏。95.s406,在内置网页应用的信息展示页面,显示经过渲染的目标图像数据、基础信息和距离信息。96.在一个实施例中,在内置网页应用的信息展示页面,以列表形式显示各预设距离范围内用户的经过渲染的目标图像数据、基础信息和距离信息。97.例如,如图5(b)所示,当用户点击“附近人”时,内置网页应用向服务器发送获取附近人信息请求,以便获取附近人的图像数据、用户名、年龄、旅游的城市、兴趣爱好和距离信息等。当获取到服务器发送的信息时,对图像数据进行转码得到可在内置网页应用的信息展示页面显示的目标图像数据,将目标图像数据、用户名、年龄、旅游的城市、兴趣爱好和距离信息等进行显示。98.在一个实施例中,在内置网页应用的信息展示页面,以列表形式显示各预设距离范围内用户的经过渲染的目标图像数据、基础信息、距离信息、动态信息以及针对该动态信息的关联信息。99.例如,如图5(a)所示,当用户点击“附近动态”时,内置网页应用向服务器发送获取附近人动态信息请求,以便获取附近人的图像数据、用户名、年龄、旅游的城市、兴趣爱好、距离信息、动态信息以及针对该动态信息的关联信息等。当获取到服务器发送的信息时,对图像数据进行转码得到可在内置网页应用的信息展示页面显示的目标图像数据,将目标图像数据、用户名、年龄、旅游的城市、兴趣爱好、距离信息、动态信息以及针对该动态信息的关联信息等进行显示。100.上述实施例中,在社交应用程序中,可以将第一图像格式的图像数据转码为第二图像格式的目标图像数据,与基础信息和距离信息一起进行显示,由于第一图像格式的图像数据在尺寸小、画面质量高,从而可以提高图像数据的传输速率,降低社交应用程序显示图像数据、基础信息和距离信息的等待时间,提高了显示效率。101.在一个实施例中,该方法还可以包括:终端利用加载器构建代码编译工具;将代码编译工具集成于网页应用;通过代码编译工具加载图像转码文件。具体地,终端通过网页应用中的代码编译工具,当检测到图像转码事件时,异步加载图像转码文件;或者,当网页应用启动或进入网页应用的信息展示页面时,对图像转码文件进行预加载。102.其中,该图像转码事件可以是获取到格式为第一图像格式的图像数据,也可以是点击链接标识或向服务器发送图像加载请求。代码编译工具可以是webpack插件,即为在网页应用中集成wasm的插件工具。103.在一个实施例中,终端通过前端构建工具对图像转码文件的代码进行静态分析,获得静态变量类型;通过静态变量类型和加载器构建代码编译工具;将代码编译工具集成于网页应用;通过代码编译工具加载图像转码文件。104.例如,在开发环境下,通过webpack插件对wasm格式的图像转码文件进行处理,使得生产环境代码可以正常加载wasm格式的图像转码文件,如图6所示,加载器可以是babel-loader、less-loader、file-loader和wasm-loader,其中,wasm-loader是用于加载wasm格式的图像转码文件。使用该webpack插件可以自动加载和打包wasm相关的文件,此外还可以支持开发环境和生产环境的区分。105.上述实施例中,通过构建代码编译工具,并将该代码编译工具集成于网页应用中,当需要对第一图像格式的图像数据进行转码时,通过集成于网页应用中的代码编译工具加载图像转码文件,通过加载的图像转码文件可以实现对第一图像格式的图像数据的转码,从而使相应平台兼容第一图像格式的图像数据并进行显示,提高了网页应用显示图像的效率。106.在一个实施例中,图像转码文件的编译步骤包括:终端将由源代码编写的图像转码算法转换为中间代码图像转码算法;对中间代码图像转码算法进行编译,得到底层代码图像转码文件;将底层代码图像转码文件转换成目标格式的图像转码文件。107.其中,中间代码是指源代码编写的图像转码算法编译为底层代码图像转码文件过程中形成的代码。该中间代码可以是底层虚拟机中间代码。108.例如,如图7所示,当采用c语言源代码构建图像转码算法之后,终端通过底层虚拟机运行该图像转码算法,得到底层虚拟机中间代码的图像转码算法。终端通过emscripten将底层虚拟机中间代码的图像转码算法,编译成asm.js格式的底层代码图像转码文件,然后通过asm2wasm插件将asm.js格式的底层代码图像转码文件转换成wasm格式的图像转码文件。其中,emscripten的底层是llvm编译器,任何可以生成底层虚拟机中间代码的语言都可以编译生成asm.js格式文件。生成底层虚拟机中间代码的语言包括但不限于c++、rust或go语言。asm2wasm插件可以分析asm.js格式文件并将其转换成wasm格式的图像转码文件。109.上述实施例中,将源代码构建的图像转码算法编译成网页应用可直接识别的图像转码文件,从而网页应用可以在转码图像数据时加载图像转码文件,从而可以调用目标格式的图像转码算法进行转码,使得网页应用可以正常显示特定格式的图像,提高了图像显示效率。110.在一个实施例中,如图8所示,s202具体可以包括:111.s802,检测网页应用的图像加载事件。112.其中,网页应用可以是独立形式存在的浏览器,也可以是内置于应用程序的内置网页,通过该内置网页可以向服务器发送图像加载请求,以从服务器获取对应的图像数据并进行显示。该图像加载请求可以包含有图像链接,也可以不包含图像链接。图像链接可以指从一个网页指向一个目标的连接关系,所指向的目标可以是另一个网页,也可以是一个文件,通过该图像链接可以获得对应的图像数据。图像加载事件可以是用于加载图像的操作或指令,包括但不限于:点击网页应用的信息展示页面中的链接标识,也可以是启动网页应用的完成指令,也可以是点击进入网页应用的信息展示页面的指令等。113.在一个实施例中,终端实时检测网页应用的图像加载事件,根据该图像加载事件生成图像加载请求,该图像加载请求可携带图像链接,也可不携带图像链接。114.s804,响应于图像加载事件,从服务器下载图像压缩文件。115.其中,图像压缩文件可以是服务器对第一图像格式的图像数据进行压缩所得的文件。其中,服务器可以是采用无损压缩方式对第一图像格式的图像数据进行压缩,也可以是采用有损压缩方式对第一图像格式的图像数据进行压缩。116.在一个实施例中,终端在根据图像加载事件生成图像加载请求后,向服务器发送该图像加载请求,以请求服务器向终端返回图像压缩文件。117.在一个实施例中,当图像加载请求中携带有图像链接时,服务器根据图像链接获取图像压缩文件,将获取的图像压缩文件发送至终端。当图像加载请求中未携带有图像链接时,服务器根据配置的推荐算法获取待推荐的图像压缩文件,将获取的图像压缩文件发送至终端。118.例如,用户在浏览网页时,看到一则关于美食的图像链接,当用户点击该链接时,一方面进入对应的信息展示页面,另一方面根据该图像链接从服务器获取对应的webp图像,以便在信息展示页面展示该webp图像。119.s806,当编译解压缩算法所得的解压缩算法文件加载完成时,通过网页应用调用解压缩算法;解压缩算法为网页应用与服务器约定的算法。120.其中,解压缩算法文件可以是编译解压缩算法所得的文件,且能够被网页应用直接识别并调用其中的解压缩算法。该解压缩算法文件的程序代码可以与javascript在同一环境中运行,该程序代码以类汇编语言所构成,其格式为wasm格式,wasm格式是网页应用所支持的格式,可以在网页应用中执行,当图像转码文件加载完成后,图像转码文件中的图像转码算法被挂在在全局实例中,网页应用可直接调用该图像转码算法。wasm是一种新的字节码格式,wasm字节码与底层机器码相似可以快速运行。121.在一个实施例中,网页应用插入了文件加载逻辑,终端通过该网页应用中的文件加载逻辑加载解压缩算法文件。其中,文件加载逻辑具体可以包括文件预加载逻辑和文件懒加载逻辑。122.具体地,文件加载逻辑为文件预加载逻辑时,当检测到网页应用启动完成、或进入网页应用的信息展示页面时,终端对解压缩算法文件进行预加载,可以提高加载效率。或者,当检测到图像解压缩事件时,终端异步加载解压缩算法文件。其中,该图像解压缩事件可以是获取到图像压缩文件,也可以是点击链接标识或向服务器发送图像加载请求。123.在一个实施例中,解压缩算法在编译之前,可以是由所有支持llvm的语言所构建的算法。其中,支持llvm的语言包括但不限于c、c++、rust和go等。通过编译工具,终端将解压缩算法编译成能被网页应用直接识别的类汇编语言解压缩算法文件。124.s808,采用解压缩算法对图像压缩文件进行解压处理,得到第一图像格式的图像数据。125.上述实施例中,在获取第一图像格式的图像数据时,以图像压缩文件的形式从服务器获取,由于是对图像数据进行了压缩,在传输过程中可以提高图像的传输效率。此外,通过网页应用加载解压缩算法文件,可以直接调用解压缩算法文件中的解压缩算法,无需使用桥接方式,提高了图像压缩文件的解压效率。126.作为一个实例,如图9所示,以第一图像格式的图像数据为webp图像为例,采用wasm格式的图像转码文件中的图像转码算法对webp图像进行转码,如图9(a)所示,传输非webp图像需要41毫秒(ms);如图9(b)所示,传输webp图像只需24ms,因此采用webp图像可以使图像传输效率提高40%以上。127.如图10所示,在一个实施例中,提供了一种图像显示方法。本实施例主要以该方法应用于上述图1中的终端110来举例说明。参照图2,该图像显示方法具体包括如下步骤:128.s1002,当检测到图像加载事件时,从服务器下载经过压缩的图像数据。129.其中,图像加载事件可以是用于加载图像的操作或指令,包括但不限于:点击网页应用的信息展示页面中的链接标识,也可以是启动网页应用的完成指令,也可以是点击进入网页应用的信息展示页面的指令等。网页应用可以是独立形式存在的浏览器,也可以是内置于应用程序的内置网页,通过该内置网页可以向服务器发送图像加载请求,以从服务器获取对应的图像数据并进行显示。130.在一个实施例中,服务器可以是采用无损压缩方式对图像数据进行压缩,也可以是采用有损压缩方式对图像数据进行压缩。131.在一个实施例中,终端实时检测网页应用的图像加载事件,根据该图像加载事件生成图像加载请求。终端在根据图像加载事件生成图像加载请求后,向服务器发送该图像加载请求,以请求服务器向终端返回经过压缩的图像数据。132.其中,该图像加载请求可以包含有图像链接,也可以不包含图像链接。图像链接可以指从一个网页指向一个目标的连接关系,所指向的目标可以是另一个网页,也可以是一个文件,通过该图像链接可以获得对应的图像数据。图像加载事件可以是用于加载图像的操作或指令,包括但不限于:点击网页应用的信息展示页面中的链接标识,也可以是启动网页应用的完成指令,也可以是点击进入网页应用的信息展示页面的指令等。133.在一个实施例中,当图像加载请求中携带有图像链接时,服务器根据图像链接获取经过压缩的图像数据,将获取的图像数据发送至终端。134.在另一个实施例中,当图像加载请求中未携带有图像链接时,服务器根据配置的推荐算法获取待推荐的经过压缩的图像数据,将获取的图像数据发送至终端。135.例如,用户在浏览网页时,看到一则关于美食的图像链接,当用户点击该链接时,一方面进入对应的信息展示页面,另一方面根据该图像链接从服务器获取对应的webp图像,以便在信息展示页面展示该webp图像。136.s1004,当编译解压缩算法所得的解压缩算法文件加载完成时,通过网页应用调用解压缩算法;所述解压缩算法为所述网页应用与所述服务器约定的算法。137.其中,解压缩算法文件可以是编译解压缩算法所得的文件,且能够被网页应用直接识别并调用其中的解压缩算法。该解压缩算法文件的程序代码可以与javascript在同一环境中运行,该程序代码以类汇编语言所构成,其格式为wasm格式,wasm格式是网页应用所支持的格式,可以在网页应用中执行,当图像转码文件加载完成后,图像转码文件中的图像转码算法被挂在在全局实例中,网页应用可直接调用该图像转码算法。wasm是一种新的字节码格式,wasm字节码与底层机器码相似可以快速运行。138.在一个实施例中,网页应用插入了文件加载逻辑,终端通过该网页应用中的文件加载逻辑加载解压缩算法文件。其中,文件加载逻辑具体可以包括文件预加载逻辑和文件懒加载逻辑。139.具体地,若文件加载逻辑为文件预加载逻辑,当检测到网页应用启动完成、或进入网页应用的信息展示页面时,终端对解压缩算法文件进行预加载,可以提高加载效率。或者,若文件加载逻辑为文件懒加载逻辑,当检测到图像解压缩事件时,终端异步加载解压缩算法文件。其中,该图像解压缩事件可以是获取到经过压缩的图像数据,也可以是点击链接标识或向服务器发送图像加载请求。140.在一个实施例中,解压缩算法在编译之前,可以是由所有支持llvm的语言所构建的算法。其中,支持llvm的语言包括但不限于c、c++、rust和go等。通过编译工具,终端将解压缩算法编译成能被网页应用直接识别的类汇编语言解压缩算法文件。其中,该编译工具包括emscripten和asm2wasm插件。emscripten的底层是llvm编译器,任何可以生成llvmir的语言,都可以编译生成asm.js。生成llvmir的语言包括但不限于c++、rust或go语言。asm2wasm插件可以分析asm.js格式文件并将其转换成wasm格式的解压缩算法文件。141.s1006,采用所述解压缩算法对所述图像数据进行解压处理。142.s1008,对解压处理所得的图像数据进行渲染并显示。143.在一个实施例中,终端调用渲染工具对图像数据进行渲染,得到渲染数据,然后将该渲染数据进行上屏显示。144.例如,终端调用webgl,或opengles,或opengles2.0版本对图像数据进行渲染,然后将渲染所得的渲染数据进行上屏。145.例如,网页应用与服务端约定文件的解压缩算法,由服务端对图像数据进行无损压缩。当检测到图像加载事件时,终端向服务端发送图像加载请求,以便服务端获取对应的经过压缩的图像数据,然后通过网络传输到终端。终端通过网页应用,根据wasm格式的解压缩算法文件对接收的图像数据进行解压处理,然后将解压后的图像数据进行渲染,并显示在网页应用。146.上述实施例中,由于预先配置了编译解压缩算法所得的解压缩算法文件,该解压缩算法是网页应用与服务器约定的算法,网页应用可直接识别该解压缩算法文件,因此在需要对经过压缩的图像数据进行解压时,网页应用可以直接调用经过编译的解压缩算法,在网页应用中实现对图像数据进行解码,以便网页应用正常显示该解码后的图像。此外,由于图像数据经过了压缩,使得在传输过程中提高了传输效率,缩短了图像显示的等待时间,进而提高了图像显示效率。147.作为一个示例,在网页应用中集成了用于图像转码的wasm文件,此外,还构建了webp图像组件,直接传入webp格式的图像链接,在webp图像组件内自动下载webp图像,然后对下载的webp图像进行转码并显示,如图11所示,具体步骤包括:148.(1)启动网页应用。149.(2)加载wasm文件。150.其中,加载方式包括:预加载方式与懒加载方式。151.预加载方式是在网页应用中插入wasm文件预加载逻辑,与其他应用资源并行加载,提高加载效率。152.懒加载方式是在需要进行webp转码时,异步拉取wasm文件。153.当加载失败时,重新进行加载。当加载成功时,将wasm文件中的图像转码算法挂在到全局实例中(如window.wasm)。154.(3)当启动网页应用时,启动webp图像组件。155.(4)webp图像组件监听图像加载(onload)事件,当监听到图像onload事件时,向服务器发送图像加载请求,以便服务器获取图像并向终端进行发送。156.(5)webp图像组件判断从服务器接收的图像是否为webp图像,若否,则直接对该图像进行渲染并进行显示。若是,则进行步骤(6)。157.(6)webp图像组件将webp图像转换为二进制图像数据。158.(7)webp图像组件调用图像转码算法,对二进制图像数据进行转码得到可以在网页应用显示的图像,该图像可以是jpeg、或png或bmp格式图像。159.在一个实施例中,对webp图像进行转码得到可以在网页应用显示的图像的步骤,具体可以包括:1)通过配置的期望参数(图像尺寸、压缩比等)对二进制图像数据进行算法处理;2)将处理过的二进制图像数据转换成rgba数据;3)将转换完成的rgba转成jepg、png或bmp格式数据。160.(8)对转码所得的图像进行渲染,以将渲染的图像显示于网页应用的信息展示页面。161.此外,除了使用wasm技术,还可以使用chrome的pnacl,pnacl技术与wasm类似。162.通过wasm技术来对webp图像进行转码,可以降低图像的大小,能有效提高传输效率。163.图2-4、8、11为一个实施例中图像显示方法的流程示意图。应该理解的是,虽然图2-4、8、11的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,图2-4、8、11中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些子步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。164.如图12所示,在一个实施例中,提供了一种图像显示装置,该图像显示装置具体包括:数据获取模块1202、调用模块1204、转码模块1206和显示模块1208;其中:165.数据获取模块1202,用于获取第一图像格式的图像数据;166.调用模块1204,用于当通过网页应用加载图像转码文件时,调用图像转码文件的图像转码算法;图像转码文件为编译图像转码算法所得的文件;167.转码模块1206,用于基于调用的图像转码算法,将图像数据转码为第二图像格式的目标图像数据;168.显示模块1208,用于渲染第二图像格式的目标图像数据并进行显示。169.上述实施例中,由于预先配置了编译图像转码算法所得的图像转码文件,可通过网页应用加载该图像转码文件,在需要对第一图像格式的图像数据进行转码时,网页应用可直接调用经过编译的图像转码算法,从而在网页应用便可实现对图像数据的转码,得到网页应用支持的第二图像格式的目标图像数据,使得网页应用可以正常显示特定格式的图像,提高了图像显示效率。170.在一个实施例中,转码模块1206还用于:将图像数据转换为二进制图像数据;将二进制图像数据转换成色彩空间数据;对色彩空间数据进行转码,得到第二图像格式的目标图像数据。171.在一个实施例中,数据获取模块1202还用于在将二进制图像数据转换成色彩空间数据之前,读取二进制图像数据的图像属性信息;172.转码模块1206还用于按照配置的期望参数调整二进制图像数据的图像属性信息;对二进制图像数据进行色彩空间转换,得到色彩空间数据。173.在一个实施例中,数据获取模块1202还用于:检测网页应用的图像加载事件;当检测到图像加载事件时,获取图像加载事件对应的图像链接;根据图像链接从对应服务器下载第一图像格式的图像数据。174.上述实施例中,将第一图像格式的图像数据转码为第二图像格式的目标图像数据,从而可以使得原本无法在网页应用显示的图像数据可以在网页应用中正常显示,提高了图像显示的效率。此外,按照期望参数调整图像属性信息,从而可以在显示图像数据时,可以按照用户期望进行显示,从而使图像显示达到最佳显示效果。175.在一个实施例中,网页应用包括社交应用程序的内置网页应用;图像数据为预设距离范围内社交人群的图像数据;176.数据获取模块1202还用于获取预设距离范围内社交人群的基础信息和距离信息;177.显示模块1208还用于对第二图像格式的目标图像数据进行渲染;在内置网页应用的信息展示页面,显示经过渲染的目标图像数据、基础信息和距离信息。178.上述实施例中,在社交应用程序中,可以将第一图像格式的图像数据转码为第二图像格式的目标图像数据,与基础信息和距离信息一起进行显示,由于第一图像格式的图像数据在尺寸小、画面质量高,从而可以提高图像数据的传输速率,降低社交应用程序显示图像数据、基础信息和距离信息的等待时间,提高了显示效率。179.在一个实施例中,如图13所示,该装置还可以包括:加载模块1210;其中:180.加载模块1210,用于当检测到图像转码事件时,异步加载图像转码文件;或者,当网页应用启动或进入网页应用的信息展示页面时,对图像转码文件进行预加载。181.在一个实施例中,如图13所示,该装置还包括:编译模块1212;其中:182.编译模块1212,用于利用加载器构建代码编译工具;将代码编译工具集成于网页应用;183.加载模块1210,还用于通过代码编译工具加载图像转码文件。184.上述实施例中,通过构建代码编译工具,并将该代码编译工具集成于网页应用中,当需要对第一图像格式的图像数据进行转码时,通过集成于网页应用中的代码编译工具加载图像转码文件,通过加载的图像转码文件可以实现对第一图像格式的图像数据的转码,从而使相应平台兼容第一图像格式的图像数据并进行显示,提高了网页应用显示图像的效率。185.在一个实施例中,编译模块1212还用于:将由源代码编写的图像转码算法转换为中间代码图像转码算法;对中间代码图像转码算法进行编译,得到底层代码图像转码文件;将底层代码图像转码文件转换成目标格式的图像转码文件。186.上述实施例中,将源代码构建的图像转码算法编译成网页应用可直接识别的图像转码文件,从而网页应用可以在转码图像数据时加载图像转码文件,从而可以调用目标格式的图像转码算法进行转码,使得网页应用可以正常显示特定格式的图像,提高了图像显示效率。187.在一个实施例中,数据获取模块1202还用于:检测网页应用的图像加载事件;响应于图像加载事件,从服务器下载图像压缩文件;当编译解压缩算法所得的解压缩算法文件加载完成时,通过网页应用调用解压缩算法;解压缩算法为网页应用与服务器约定的算法;采用解压缩算法对图像压缩文件进行解压处理,得到第一图像格式的图像数据。188.上述实施例中,在获取第一图像格式的图像数据时,以图像压缩文件的形式从服务器获取,由于是对图像数据进行了压缩,在传输过程中可以提高图像的传输效率。此外,通过网页应用加载解压缩算法文件,可以直接调用解压缩算法文件中的解压缩算法,无需使用桥接方式,提高了图像压缩文件的解压效率。189.如图14所示,在一个实施例中,提供了一种图像显示装置,该图像显示装置具体包括:下载模块1402、调用模块1404、解压模块1406和显示模块1408;其中:190.下载模块1402,用于当检测到图像加载事件时,从服务器下载经过压缩的图像数据;191.调用模块1404,用于当编译解压缩算法所得的解压缩算法文件加载完成时,通过网页应用调用解压缩算法;所述解压缩算法为所述网页应用与所述服务器约定的算法;192.解压模块1406,用于采用所述解压缩算法对所述图像数据进行解压处理;193.显示模块1408,用于对解压处理所得的图像数据进行渲染并显示。194.在一个实施例中,如图14所示,该图像还包括:加载模块1410;其中:195.加载模块1410,用于当检测到图像解压缩事件时,异步加载所述解压缩算法文件;或者,当所述网页应用启动或进入所述网页应用的信息展示页面时,对所述解压缩算法文件进行预加载。196.上述实施例中,由于预先配置了编译解压缩算法所得的解压缩算法文件,该解压缩算法是网页应用与服务器约定的算法,网页应用可直接识别该解压缩算法文件,因此在需要对经过压缩的图像数据进行解压时,网页应用可以直接调用经过编译的解压缩算法,在网页应用中实现对图像数据进行解码,以便网页应用正常显示该解码后的图像。此外,由于图像数据经过了压缩,使得在传输过程中提高了传输效率,缩短了图像显示的等待时间,进而提高了图像显示效率。197.图15示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端110。如图15所示,该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中,存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统,还可存储有计算机程序,该计算机程序被处理器执行时,可使得处理器实现图像显示方法。该内存储器中也可储存有计算机程序,该计算机程序被处理器执行时,可使得处理器执行图像显示方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。198.本领域技术人员可以理解,图15中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。199.在一个实施例中,本申请提供的图像显示装置可以实现为一种计算机程序的形式,计算机程序可在如图15所示的计算机设备上运行。计算机设备的存储器中可存储组成该图像显示装置的各个程序模块,比如,图12所示的数据获取模块1202、调用模块1204、转码模块1206和显示模块1208。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的图像显示方法中的步骤。200.例如,图15所示的计算机设备可以通过如图12所示的图像处理装置中的数据获取模块1202执行s202。计算机设备可通过调用模块1204执行s204。计算机设备可通过转码模块1206执行s206。计算机设备可通过显示模块1208执行s208。201.在一个实施例中,提供了一种计算机设备,包括存储器和处理器,存储器存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述图像处理方法的步骤。此处图像处理方法的步骤可以是上述各个实施例的图像处理方法中的步骤。202.在一个实施例中,提供了一种计算机可读存储介质,存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述图像处理方法的步骤。此处图像处理方法的步骤可以是上述各个实施例的图像处理方法中的步骤。203.在另一个实施例中,本申请提供的图像显示装置可以实现为一种计算机程序的形式,计算机程序可在如图15所示的计算机设备上运行。计算机设备的存储器中可存储组成该图像显示装置的各个程序模块,比如,图14所示的下载模块1402、调用模块1404、解压模块1406和显示模块1408。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的图像显示方法中的步骤。204.例如,图15所示的计算机设备可以通过如图14所示的图像处理装置中的下载模块1402执行s1002。计算机设备可通过调用模块1404执行s1004。计算机设备可通过解压模块1406执行s1006。计算机设备可通过显示模块1408执行s1008。205.在一个实施例中,提供了一种计算机设备,包括存储器和处理器,存储器存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述图像处理方法的步骤。此处图像处理方法的步骤可以是上述各个实施例的图像处理方法中的步骤。206.在一个实施例中,提供了一种计算机可读存储介质,存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述图像处理方法的步骤。此处图像处理方法的步骤可以是上述各个实施例的图像处理方法中的步骤。207.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一非易失性计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限,ram以多种形式可得,诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。208.以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。209.以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。当前第1页1 2 3 当前第1页1 2 3 
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1