CN109922368A - 一种基于网页页面的图片显示方法及智能电视 - Google Patents

Abstract

本发明公开了一种基于网页页面的图片显示方法，包括步骤1：智能电视框架层通过扩展接口接收请求，所述请求包含网页页面发送的图片URL地址；步骤2：所述智能电视框架层根据所述请求中的图片URL地址，读取图片；步骤3：所述智能电视框架层获取到用于在所述网页页面显示的所述图片对应的处理数据；步骤4：所述智能电视框架层向所述网页页面返回所述处理数据，以供所述网页页面进行显示。本发明可实现网页页面实时展示最新本地图片。

Description

一种基于网页页面的图片显示方法及智能电视

技术领域

本发明涉及到电视技术领域，具体介绍了一种基于网页页面的图片显示方法及智能电视。

背景技术

目前，智能电视多采用HTML技术实现UI（User Interface，用户界面）展示，以支持多种功能。示例性的，智能电视在显示屏上可以通过UI显示图片，其中，UI运行在浏览器之上，UI对应的网页页面文件和展示的图片存储在智能电视本地。

上述UI显示图片的具体过程为：UI向浏览器发送包含图片的URL（ UniformResource Locator，统一资源定位符）地址的请求；浏览器根据该请求中携带的图片的URL地址，从智能电视本地读取图片；浏览器对读取的图片进行解码，并将解码后的图片显示在UI上。上述URL地址也即图片的存储位置或路径。这里，浏览器具有缓存机制：浏览器会将上述已经请求过的URL地址对应的资源拷贝一份副本储存至浏览器缓存中；当再次向浏览器发送包含该URL地址的相同请求时，浏览器会直接使用缓存中的副本响应本次请求，以加快图片的加载和显示速度。

然而，在一些情况下，UI无法显示更新后的图片。例如：在上述图片内容被更新，但图片的文件名称和URL地址均不变的情况下，UI向浏览器发送包含该更新后的图片的URL地址的请求时，浏览器会直接使用缓存中已拷贝的副本响应本次请求，进而UI仍然展示更新前的图片。

通常，浏览器中可设置关闭浏览器后自动清除缓存，以释放其占用的智能电视的内存空间。所以为了使UI展示更新后的图片，相关技术中常用的手段是重启浏览器，也即重新启动浏览器后，浏览器会从智能电视本地读取更新后的图片，并对更新后的图片解码，进而将解码后的图片显示在UI上，导致UI不能实时展现更新图片。

因此，如何实现网页页面实时展现更新后的图片，是本发明急需解决的问题。

发明内容

本发明的目的在于提供了一种基于网页页面的图片显示方法及智能电视，用于解决相关技术中智能电视中网页页面不能实时展现更新图片的问题。

示例性实施例至少解决以上问题和/或缺点以及以上未描述的其他缺点。此外，示例性实施例可不需要克服上述缺点，并且示例性实施例可不克服上述任何问题。

第一方面，本发明提供一种基于网页页面的图片显示方法，该显示方法，包括：

智能电视框架层通过扩展接口接收请求，请求包含网页页面发送的图片URL地址；

智能电视框架层根据请求中的图片URL地址，读取图片；

智能电视框架层获取到用于在网页页面显示的图片对应的处理数据；

智能电视框架层向网页页面返回处理数据，以供网页页面进行显示。

第二方面，本发明提供一种智能电视，其特征在于，包括：存储器及处理器，存储器与处理器连接；

存储器用于存储程序指令；

处理器用于在程序指令被执行时，实现上述第一方面的基于网页页面的图片显示方法。

本发明与现有技术相比，其有益效果在于：

UI（即网页页面）通过扩展接口将图片URL地址传递给智能电视框架层，进而可以由智能电视框架层来读取图片，并对图片进行处理，以得到UI可以直接识别并展示的图片处理数据，之后再将图片处理数据返回给UI，通过浏览器处理显示在UI上。这样，网页页面中需要即时展示的图片由智能电视框架层来读取和处理，之后由浏览器来对图片处理数据进行显示，其中无需由浏览器自身来读取和解码，也就无需执行浏览器缓存机制。即使内容更新后的图片URL地址与内容更新前的URL地址相同的情况下，也无需因浏览器缓存机制而重启浏览器，以显示内容更新后的图片。

附图说明

图1为一种智能电视展示包含电视信息图片的示意图；

图2A为本发明实施例1提供的一种基于网页页面的图片显示方法流程图；

图2B为图2A中S7的详细步骤流程图；

图3A为本发明实施例2提供的一种基于网页页面的图片显示方法流程图；

图3B为图3A中A4的详细步骤流程图；

图4为本发明实施例提供的智能电视示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要指出的是，本实施例中的UI运行在浏览器之上，即UI基于浏览器启动，也就是说，智能电视开机时，启动浏览器，浏览器根据UI（网页页面）的URL地址而启动。

还需指出的是，本实施例中智能电视中的浏览器（或浏览器模块）与框架层是智能电视操作系统中两个不同的进程或服务。

在一些场景中，例如，商场操作人员通过智能电视中安装的图片应用程序向顾客展示当前电视的机型、价格及新特性等信息，这些信息通常以图片的形式展现。如图1所示，智能电视显示屏中显示正在播放的电视内容，显示屏右侧部分11中显示的多个图片，反应了电视的机型、价格和各种相应的功能参数。

在实际应用中，商场中的电视的机型、价格及功能参数等信息会随商场的优惠活动或电视厂家的策略活动而变化，此时，通过图片应用程序向顾客展示的图片就需要进行内容更新。而为了方便操作人员更新这些图片，通常更新前后的图片存储在智能电视本地磁盘的同一位置，更新前后的图片的URL地址、图片名称均相同，也就是说，将更新后的图片直接覆盖更新前的图片。

例如，若电视的价格发送变化，那么其更新的具体过程是：商场销售人员先将包含价格更新的图片的U盘插入电视机USB（Universal Serial Bus，通用串行总线）接口中，然后按照原先价格的图片的存储路径拷贝价格更新的图片，以使价格更新的图片覆盖原先价格的图片，最后商场销售人员完成该操作后，图片应用程序需要通过UI将更新后的图片展示出来。

然而，在上述过程中，实际上图片应用程序仍然展示的是原先价格的图片，而非价格更新后的图片。造成这种现象的原因是：图片应用程序采用HTML技术且运行在浏览器之上，且浏览器同时具有缓存机制；进而在UI向浏览器发送价格更新后的图片的URL地址的请求时，使得浏览器从其缓存中已拷贝的副本来响应本次请求，所以UI仍然展示原先价格的图片。

因此，为解决上述问题，本发明提供一种基于网页页面的图片显示方法，具体如下：

实施例1：

一种基于网页页面的图片显示方法，包括：

步骤S1：UI调用JavaScript扩展接口，向智能电视框架层发送包含图片的URL地址的请求；

该URL地址即为图片在智能电视本地的存储路径，例如file://dir1/abc.jpg。

其中，可以在浏览器中设置一个JavaScript扩展接口，提供给UI调用，达到通知智能电视框架层需要获取本地图片URL地址请求的目的。该JavaScript扩展接口传输的参数即是图片在智能电视本地的存储的路径。

步骤S2：智能电视框架层通过该JavaScript扩展接口，接收该请求；

这里，步骤S2具体包括：

步骤S21：JavaScript扩展接口将包含图片的URL地址的请求传递给智能电视框架层；同时，JavaScript扩展接口将传递结果反馈给UI，若传递成功，则智能电视框架层开始进行步骤S3；若传递失败，则JavaScript扩展接口将重新传递请求至智能电视框架层。

步骤S3：智能电视框架层从该请求中获取图片的URL地址；

步骤S4：智能电视框架层根据该图片的URL地址，从智能电视本地读取图片，智能电视框架层对读取的图片进行编解码处理；

具体地，智能电视框架层选择一种浏览器标准支持的图片编解码方式。智能电视框架层可以此编解码方式对图片进行编解码，得到浏览器可以直接识别并使用的图片编解码数据。

例如，此图片编解码方式可选择Base64或者其他浏览器标准支持的编解码方式。

步骤S5：智能电视框架层将处理后的图片数据返回至浏览器；

具体地，浏览器中的扩展层获取来自智能电视框架层处理后的图片数据。

步骤S6：浏览器向UI发送获取到处理后的图片数据的消息；

具体地，浏览器扩展层中，得到智能电视框架层返回的处理后的图片数据后，发送浏览器消息给到UI，消息中带有所请求的智能电视框架层处理后的图片数据。

步骤S7：UI接收到该消息后通过浏览器显示处理后的图片数据。

这里，步骤S7具体包括：

步骤S71：UI中的消息监听器收到消息后，将智能电视框架层处理后的图片数据应用到UI的图片节点；

步骤S72：通过浏览器显示处理后的图片数据。

UI中增加对浏览器消息的监听，当浏览器收到来自智能电视框架层处理后的图片数据消息后，UI可以监听到该消息，并将处理后的图片数据设置到UI的图片节点中，最后再传递给浏览器显示模块，将处理后的图片数据显示到UI中。上述实施例中，在智能电视中本地图片的URL不变、而本地图片的内容更新的情况下，UI通过扩展接口将本地图片的URL地址传递给智能电视框架层，进而可以由智能电视框架层来对本地图片进行读取和处理，再将处理后的图片数据返回给浏览器，以显示在UI上；这样，能够使用于显示本地图片的UI实时显示更新内容后的图片。

与相关技术中“由浏览器根据图片的URL地址读取并解码图片”相比，本实施例中，由智能电视框架层根据图片的URL地址读取并处理图片、由浏览器负责展示处理后的图片，能够使得基于HTML技术实现且运行在浏览器之上的UI，可以实时刷新显示更新内容后的图片，无需因为浏览器缓存机制而重启浏览器。

进一步的，上述实施例方案可单独针对UI中需要即时更新的图片节点实施，其他图片节点仍然可以通过浏览器的缓存机制达到加快展示的效果。

需要说明的是，本实施例中的JavaScript扩展接口是面向对象编程的基础，它是一组包含了函数型方法的数据结构，与类一样，都是编程语言中比较抽象的概念。比如生活中的接口，机顶盒，人们利用它来实现收看不同频道和信号的节目，它犹如对不同类型的信息进行集合和封装的设备，最后把各种不同类型的信息转换为电视能够识别的信息。在编程语言中的接口，实际上是不同类的封装并提供统一的外部联系通道，这样其他对象就可以利用接口来调用不同类的成员了。

构造函数(类)是具体的实现，接口是类的约定。API接口(应用程序接口)、人机交互接口、电源接口、USB接口等虽然用途不同，功能各异，但是都包含一个共同的特性：约定、规范。可以说，接口就是一张契约和合同，它约定了设计者和使用者都必须遵循的要求。接口承诺了具体类应该事先的功能。

接口只能定义成员，不能给定义的成员赋值。而接口作为它的继承类或派生类的约定，继承类或派生类共同完成接口属性、方法、事件、类型的实现。在接口和实现类之间，不管是方法名还是属性调用顺序上都应保持一致。

接口的目的就是约束编码，促使代码规范，对于强类型语言是必须的，也是非常重要的环节。但是对于JavaScript弱类型语言来说，严格的类型检查会束缚JavaScript的灵活性。很多前端开发人员根本不用接口，但不会影响脚本的设计。

使用接口的好处：降低对象间的耦合度，提高代码的灵活性。学会使用接口，能够让手中的函数变得灵巧，这在大型开发中是很重要的。

对于JavaScript来说，本身不支持接口功能，没有提供内置方法。但是人工设计一个额外的接口程序，又会对程序的性能产生影响。项目越大，这种开销越大。所以，用不用接口可以遵循两个条件：

1.项目大小，如果是一个框架，使用接口在一定程度上会提高程序的性能。如果是简单的应用，就不必使用接口了。

2.如果对JavaScript接口比较熟练，多用接口也可以，如果担心过多使用接口影响性能，则可以在考虑产品发布前，清除接口功能模块，或者设置接口的执行条件。防止它被频繁执行，影响性能。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

实施例2：

一种基于网页页面的图片显示方法，包括：

步骤A1：UI调用JavaScript扩展接口，向智能电视框架层发送包含图片的URL地址的请求；

该URL地址即为图片在智能电视本地的存储路径，例如file://dir1/abc.jpg。

步骤A2：智能电视框架层通过该JavaScript扩展接口，接收该请求；

步骤A3：智能电视框架层从该请求中获取图片的URL地址；

步骤A4：智能电视框架层根据该图片的URL地址，判断智能电视框架层预设的缓存中是否存在与该URL地址对应的编解码后的图片数据；

这里，步骤A4具体包括：

步骤A41：在智能电视框架层中设置一个数据缓存器，以本地图片的存储路径+图片名称+更新时间为索引，存储编解码后的图片数据；

步骤A42：智能电视框架层根据传入的本地图片的存储路径，得到本地图片的最后更新时间；

步骤A43：智能电视框架层根据存储路径、图片名称及最后更新时间从缓存器中检索已缓存的编解码后的图片数据。

步骤A5：若是，则从智能电视框架层的缓存中获取与该URL地址对应的编解码后的图片数据；

步骤A6：若否，则智能电视框架层根据该图片的URL地址，从智能电视本地读取图片，智能电视框架层对读取的图片进行实时编解码处理，并将编解码后的图片数据保存到缓存器中。

步骤A7：智能电视框架层将编解码后的图片数据返回至浏览器；

步骤A8：浏览器向UI发送获取到编解码后的图片数据的消息；

步骤A9：UI接收到该消息后通过浏览器进行显示编解码后的图片数据。

关于本实施例的其它步骤的详细说明，可以参照实施例1，这里不再赘述。

示例性的，在1月1号，商场操作人员将表示电视价格的图片拷贝入智能电视本地，智能电视可以得到该图片的更新时间为1月1号；那么智能电视框架层根据该图片的URL地址从智能电视本地读取到图片后，对该图片进行编解码处理；然后将编解码后的数据返回至UI，以供图片应用程序展示，同时将编解码后的数据按照URL地址+价格图片+1月1日为索引存储至数据缓存器中。

继续沿用上例，在1月3号，图片应用程序通过UI展示1月1号拷贝入智能电视本地的电视价格的图片的过程中，商场操作人员将表示电视价格改变后的图片，按照原先电视价格的图片的存储路径和图片名称拷贝入智能电视本地，智能电视可以得到该图片的更新时间为1月3号；那么智能电视框架层根据该图片的URL地址从智能电视本地读取到图片后，对该图片进行编解码处理；然后将编解码后的数据返回至UI，以供图片应用程序实时刷新展示，同时将编解码后的数据按照URL地址+价格图片+1月3日为索引存储至数据缓存器中。

继续沿用上例，在1月4号，商场销售人员打开图片应用程序，以向顾客展示电视价格的图片时，智能电视框架层根据该图片的URL地址，获取到该图片的最后更新时间为1月3号；那么智能电视框架层首先从数据缓存器中查找是否存在与该最后更新时间匹配的图片编解码后的数据；若存在，则从数据缓存器中直接获取到编解码后的数据，这样能够使图片应用程序快速展示图片；否则，智能电视框架层对读取的图片进行实时编解码处理以得到编解码后的数据；最后，将编解码后的数据返回至UI，以供图片应用程序展示。

在上述实施例中，由于在智能电视框架层中设置缓存机制，即在智能电视中设置存储编解码后的图片数据的缓存器，这样UI需要展示图片时，智能电视框架层不必实时对本地图片进行编解码处理，能够加快智能电视框架层向浏览器返回编解码后的图片数据的时间，进而UI可以快速展示图片。

图4为本发明实施例提供的智能电视的结构示意图。如图4所示，智能电视包括：存储器21和处理器22。其中，存储器21通过总线与处理器902连接。

存储器21，用于存储程序指令。

处理器22，用于在程序指令被执行时，执行上述实施例中的基于网页页面的图片显示方法。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims (6)

1.一种基于网页页面的图片显示方法，其特征在于，包括：

智能电视框架层通过扩展接口接收请求，所述请求包含网页页面发送的图片URL地址；

所述智能电视框架层根据所述请求中的图片URL地址，读取图片；

所述智能电视框架层获取到用于在所述网页页面显示的所述图片对应的处理数据；

所述智能电视框架层向所述网页页面返回所述处理数据，以供所述网页页面进行显示。

2.根据权利要求1所述的一种基于网页页面的图片显示方法，其特征在于，所述扩展接口是JavaScript扩展接口。

3.根据权利要求1所述的一种基于网页页面的图片显示方法，其特征在于，

所述智能电视框架层获取到用于在所述网页页面显示的所述图片对应的处理数据，具体包括：

所述智能电视框架层对所述图片进行实时编解码，得到用于在所述网页页面展示的编解码后的数据。

4.根据权利要求1所述的一种基于网页页面的图片显示方法，其特征在于，

所述智能电视框架层获取到用于在所述网页页面显示的所述图片对应的处理数据，具体包括：

所述智能电视框架层从预设的数据缓存器中查找到用于在所述网页页面展示的所述图片对应的编解码后的数据。

5.根据权利要求4所述的一种基于网页页面的图片显示方法，其特征在于，所述方法还包括：

所述智能电视框架层根据所述图片URL地址，得到所述图片的更新时间；

根据所述更新时间，从所述预设的数据缓存器中查找到与所述更新时间匹配的编解码后的数据。

6.一种智能电视，其特征在于，包括：存储器及处理器；所述存储器与所述处理器连接；

所述存储器，用于存储程序指令；

所述处理器，用于在程序指令被执行时，实现权利要求1-5中任一项所述的方法。