CN115408638A - webp格式背景图片浏览器兼容方法、装置及其相关设备 - Google Patents

Abstract

本申请属于研发人工智能领域，涉及一种webp格式背景图片浏览器兼容方法，包括获取目标网页中所有的webp格式背景图片以及对应的webp图片链接；将每个webp格式背景图片用层叠样式表css变量替换；将所有的css变量集合成目标对象简谱json文件，目标json文件中包括css变量与webp格式背景图片的对应关系；在浏览器访问目标网页时，获取目标json文件中对应的所有的webp格式背景图片；将webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接；根据目标json文件中css变量，将webp图片链接替换成blob图片链接。本申请利用css变量来实现webp格式的兼容问题，能够解决现有技术中webp格式背景图片浏览器兼容性较低的问题。

Description

webp格式背景图片浏览器兼容方法、装置及其相关设备

技术领域

本申请涉及研发及人工智能技术领域，尤其涉及webp格式背景图片浏览器兼容方法、装置及其相关设备。

背景技术

在网络中，图片仍然是占用流量较大的一部分，对于移动端更是如此，因此，如何在保证图片视觉不失真的前提下缩小体积，对于节省带宽和电池电量十分重要。然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致，因此Google于2010年提出了一种新的图片压缩格式webp。

然而现代浏览器还不能够100％的兼容webp格式的图片。对于不兼容的部分浏览器，现有技术中只能让这些浏览器去加载webp格式图片标签，但是却不能实现对webp背景图片的兼容。

目前，现有最好的兼容webp背景图片的方案就是利用浏览器的serviceWorker进程去拦截背景图片请求，然后利用WebAssembly在浏览器运行一个webp工具包libwebp的二进制字节码，来完成webp编译成base64格式内容流，最后返回给serviceWorker接口，以完成拦截->编译->替换的这个流程。但是这个流程的问题是：因为编译过程是在serviceWorker进程中进行的，但是libwebp编译webp格式图片需要用到canvas，这个只在浏览器主进程的dom接口去完成编译任务，所以就需要一个新特性OffscreenCanvas。只有这个新接口才能够满足现有方案的要求，在内存中离屏实现canvas。但是这个接口的兼容性不是很好，目前只有69％的浏览器能够实现这个接口(数据取于2022-04-13)，因此导致这个方案的兼容性不高。

发明内容

本申请实施例的目的在于提出一种webp格式背景图片浏览器兼容方法、装置及其相关设备，以解决现有技术中webp格式背景图片在浏览器中兼容性较低，不能满足用户需要的问题。

为了解决上述技术问题，本申请实施例提供一种webp格式背景图片浏览器兼容方法，采用了如下所述的技术方案：

获取目标网页中所有的webp格式背景图片以及对应的webp图片链接；

将每个所述webp格式背景图片用层叠样式表css变量替换；

将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；

在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；

将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接；

根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。

进一步的，获取目标网页中所有的webp格式背景图片以及对应的webp图片链接包括：

利用webpack插件获取所述目标网页内所有代码中的背景图片；

对所述背景图片进行识别；

将其中被识别为webp格式的背景图片确定为webp格式背景图片；

根据所述webp格式背景图片，获取对应的webp图片链接。

进一步的，将每个所述webp格式背景图片用层叠样式表css变量替换包括：

将每个所述webp格式背景图片生成对应的映射值；

将所述映射值用层叠样式表css变量替换。

进一步的，获取所述目标json文件中对应的所有的webp格式背景图片包括：

获取所述目标json文件；

根据所述目标json文件中css变量与webp格式背景图片的对应关系，下载所有的webp格式背景图片。

进一步的，将所述webp格式背景图片编译成base64格式内容流包括：

利用字节码格式WebAssembly，在所述浏览器中运行webp工具包源码库libwebp的二进制字节码，将所述webp格式背景图片编译成base64格式内容流。

进一步的，根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接包括：

根据所述目标json文件中css变量对应的css变量链接，将所述webp图片链接替换成blob图片链接。

为了解决上述技术问题，本申请实施例还提供一种webp格式背景图片浏览器兼容装置，采用了如下所述的技术方案：

获取模块，用于获取目标网页中所有的webp格式背景图片以及对应的webp图片链接；

替换模块，用于将每个所述webp格式背景图片用层叠样式表css变量替换；

集合模块，用于将所有的css变量集合成目标json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；

所述获取模块，还用于在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；

处理模块，用于将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接；

所述替换模块，还用于根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。

进一步的，获取模块包括获取单元、识别单元以及确定单元；

所述获取单元，用于利用webpack插件获取所述目标网页内所有代码中的背景图片；

所述识别单元，用于对所述背景图片进行识别；

所述确定单元，用于将其中被识别为webp格式的背景图片确定为webp格式背景图片；

所述获取单元，还用于根据所述webp格式背景图片，获取对应的webp图片链接。

进一步的，所述替换模块包括生成单元和替换单元；

所述生成单元，用于将每个所述webp格式背景图片生成对应的映射值；

所述替换单元，用于将所述映射值用层叠样式表css变量替换。

进一步的，所述获取单元还用于获取所述目标json文件；

所述获取模块还包括下载单元，用于根据所述目标json文件中css变量与webp格式背景图片的对应关系，下载所有的webp格式背景图片。

进一步的，所述处理模块具体用于利用字节码格式WebAssembly，在所述浏览器中运行webp工具包源码库libwebp的二进制字节码，将所述webp格式背景图片编译成base64格式内容流。

进一步的，所述替换模块还用于根据所述目标json文件中css变量对应的css变量链接，将所述webp图片链接替换成blob图片链接。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

提供一种计算机设备，包括，一个或多个处理器；存储器，用于存储一个或多个程序，使得一个或多个处理器实现上述任意一项所述的webp格式背景图片浏览器兼容方法。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的webp格式背景图片浏览器兼容方法。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请通过以上步骤，获取目标网页中所有的webp格式背景图片以及对应的webp图片链接，以实现对webp格式背景图片及链接的获取；将每个所述webp格式背景图片用层叠样式表css变量替换，以实现将webp格式背景图片替换为css变量；将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接，以实现将浏览器中不兼容的webp格式背景图片编译成兼容的base64格式内容流；最后根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。本申请利用css变量来实现webp格式的兼容问题。css变量基本上所有的浏览器已经兼容，对于不兼容的浏览器也有相应的兼容插件，能够解决现有技术中webp格式背景图片浏览器兼容性较低的问题。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请可以应用于其中的示例性系统架构图；

图2根据本申请的webp格式背景图片浏览器兼容方法的一个实施例的流程图；

图3是根据本申请的webp格式背景图片浏览器兼容装置的一个实施例的结构示意图；

图4是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的webp格式背景图片浏览器兼容方法一般由服务器/终端设备执行，相应地，webp格式背景图片浏览器兼容装置一般设置于服务器/终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的webp格式背景图片浏览器兼容方法的一个实施例的流程图。所述的webp格式背景图片浏览器兼容方法，包括以下步骤：

步骤201，获取目标网页中所有的webp格式背景图片以及对应的webp图片链接。

实际使用中，可以利用webpack插件找到浏览器所有代码中的背景图片，识别是否是webp格式背景图片，若是，则获取对应的webp图片链接。

步骤202，将每个所述webp格式背景图片用层叠样式表css变量替换。

在本实施例中，将webp格式背景图片生成一个图片id，来定义这个webp图片，然后用css变量替换它。

步骤203，将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系。

步骤204，在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片。

本实施例中，在浏览器访问这个网页时，会首先找到步骤203中的json文件，把所有的webp格式背景图片下载下来。

步骤205，将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接。

实际使用中，可以利用WebAssembly在浏览器运行一个webp工具包libwebp的二进制字节码，来完成webp编译成base64格式内容流，最后生成一个blob图片链接。

步骤206，根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。

在本实施例中，把所有原先的webp图片链接替换成blob浏览器可以展示的链接。

本申请通过以上步骤，获取目标网页中所有的webp格式背景图片以及对应的webp图片链接，以实现对webp格式背景图片及链接的获取；将每个所述webp格式背景图片用层叠样式表css变量替换，以实现将webp格式背景图片替换为css变量；将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接，以实现将浏览器中不兼容的webp格式背景图片编译成兼容的base64格式内容流；最后根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。本申请利用css变量来实现webp格式的兼容问题。css变量基本上所有的浏览器已经兼容，对于不兼容的浏览器也有相应的兼容插件，能够解决现有技术中webp格式背景图片浏览器兼容性较低的问题。

在本实施例的一些可选的实现方式中，上述步骤201获取目标网页中所有的webp格式背景图片以及对应的webp图片链接，上述电子设备还可以执行以下步骤：

利用webpack插件获取所述目标网页内所有代码中的背景图片；

对所述背景图片进行识别；

将其中被识别为webp格式的背景图片确定为webp格式背景图片；

根据所述webp格式背景图片，获取对应的webp图片链接。

本申请通过webpack插件找到浏览器目标网页内所有代码中的背景图片，然后识别背景图片是否是webp格式，并获取其中被识别为webp格式背景图片的webp图片链接。

在一些可选的实现方式中，上述步骤202将每个所述webp格式背景图片用层叠样式表css变量替换，上述电子设备可以执行以下步骤：

将每个所述webp格式背景图片生成对应的映射值；

将所述映射值用层叠样式表css变量替换。

具体的，css变量可以让css样式中的某个属性用变量的方式替换，给变量赋值就会给所有用到这个变量的地方统一替换，(例：var(--webp1,url(https://abc.com/test1.webp))这里的webp1就是变量，var函数的第二个值是默认值，找不到webp1这个变量时就会使用默认值)。作用是给背景图片一个定位，如果浏览器已经兼容了webp则不编译这个图片，就不会给变量webp1赋值，这个时候就会使用默认值。但是如果不兼容则会编译webp图片，生成结果后，会在根元素上赋值这个变量root{--webp1:url(blob:https://abc.com/xxxxx1)}，这个时候webp1就被赋值了。之前那个用到这个变量的地方就会使用这个新值。

在一些可选的实现方式中，上述步骤204获取所述目标json文件中对应的所有的webp格式背景图片，上述电子设备可以执行以下步骤：

获取所述目标json文件；

根据所述目标json文件中css变量与webp格式背景图片的对应关系，下载所有的webp格式背景图片。

在一些可选的实现方式中，上述步骤205将所述webp格式背景图片编译成base64格式内容流，上述电子设备还可以执行以下步骤：

利用字节码格式WebAssembly，在所述浏览器中运行webp工具包源码库libwebp的二进制字节码，将所述webp格式背景图片编译成base64格式内容流。

具体的，libwebp为google开发的webp工具包，是c++编写的。该工具包可以利用canvas把webp格式编译成其他浏览器可以展示的格式。其中，Canvas是一个在浏览器主进程用来绘图的特性，可以用来解析webp格式。

在一些可选的实现方式中，上述步骤206根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接，上述电子设备还可以执行以下步骤：

根据所述目标json文件中css变量对应的css变量链接，将所述webp图片链接替换成blob图片链接。

具体的，根据css变量链接，利用变量的赋值替换webp链接成可以展示的blob链接。

需要强调的是，为进一步保证上述blob图片链接数据的私密和安全性，上述blob图片链接数据还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种webp格式背景图片浏览器兼容装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图3所示，本实施例所述的webp格式背景图片浏览器兼容装置300包括：获取模块301、替换模块302、集合模块303以及处理模块304。其中：

获取模块301，用于获取目标网页中所有的webp格式背景图片以及对应的webp图片链接；

替换模块302，用于将每个所述webp格式背景图片用层叠样式表css变量替换；

集合模块303，用于将所有的css变量集合成目标json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；

所述获取模块301，还用于在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；

处理模块304，用于将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接；

所述替换模块302，还用于根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。

在本实施例中，获取模块301获取目标网页中所有的webp格式背景图片以及对应的webp图片链接，以实现对webp格式背景图片及链接的获取；替换模块302将每个所述webp格式背景图片用层叠样式表css变量替换，以实现将webp格式背景图片替换为css变量；集合模块303将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；获取模块301还在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；处理模块304将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接，以实现将浏览器中不兼容的webp格式背景图片编译成兼容的base64格式内容流；最后替换模块302还根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。本申请利用css变量来实现webp格式的兼容问题。css变量基本上所有的浏览器已经兼容，对于不兼容的浏览器也有相应的兼容插件，能够解决现有技术中webp格式背景图片浏览器兼容性较低的问题。

在本实施例的一些可选的实现方式中，所述获取模块301包括获取单元3011、识别单元3012以及确定单元3013；

所述获取单元3011，用于利用webpack插件获取所述目标网页内所有代码中的背景图片；

所述识别单元3012，用于对所述背景图片进行识别；

所述确定单元3013，用于将其中被识别为webp格式的背景图片确定为webp格式背景图片；

所述获取单元3011，还用于根据所述webp格式背景图片，获取对应的webp图片链接。

本申请通过webpack插件找到浏览器目标网页内所有代码中的背景图片，然后识别背景图片是否是webp格式，并获取其中被识别为webp格式背景图片的webp图片链接。

在本实施例的一些可选的实现方式中，替换模块302包括生成单元3021和替换单元3022；

所述生成单元3021，用于将每个所述webp格式背景图片生成对应的映射值；

所述替换单元3022，用于将所述映射值用层叠样式表css变量替换。

具体的，css变量可以让css样式中的某个属性用变量的方式替换，给变量赋值就会给所有用到这个变量的地方统一替换，(例：var(--webp1,url(https://abc.com/test1.webp))这里的webp1就是变量，var函数的第二个值是默认值，找不到webp1这个变量时就会使用默认值)。作用是给背景图片一个定位，如果浏览器已经兼容了webp则不编译这个图片，就不会给变量webp1赋值，这个时候就会使用默认值。但是如果不兼容则会编译webp图片，生成结果后，会在根元素上赋值这个变量root{--webp1:url(blob:https://abc.com/xxxxx1)}，这个时候webp1就被赋值了。之前那个用到这个变量的地方就会使用这个新值。

在本实施例的一些可选的实现方式中，获取单元3011还用于获取所述目标json文件；

所述获取模块301还包括下载单元3014，用于根据所述目标json文件中css变量与webp格式背景图片的对应关系，下载所有的webp格式背景图片。

在本实施例的一些可选的实现方式中，上述处理模块304具体用于利用字节码格式WebAssembly，在所述浏览器中运行webp工具包源码库libwebp的二进制字节码，将所述webp格式背景图片编译成base64格式内容流。

具体的，libwebp为google开发的webp工具包，是c++编写的。该工具包可以利用canvas把webp格式编译成其他浏览器可以展示的格式。其中，Canvas是一个在浏览器主进程用来绘图的特性，可以用来解析webp格式。

在本实施例的一些可选的实现方式中，替换模块302还用于根据所述目标json文件中css变量对应的css变量链接，将所述webp图片链接替换成blob图片链接。

具体的，根据css变量链接，利用变量的赋值替换webp链接成可以展示的blob链接。

需要强调的是，为进一步保证上述blob图片链接数据的私密和安全性，上述blob图片链接数据还可以存储于一区块链的节点中。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。

所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件，例如webp格式背景图片浏览器兼容方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器62通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器62用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述webp格式背景图片浏览器兼容方法的计算机可读指令。

所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。

本申请计算机设备通过获取目标网页中所有的webp格式背景图片以及对应的webp图片链接，以实现对webp格式背景图片及链接的获取；将每个所述webp格式背景图片用层叠样式表css变量替换，以实现将webp格式背景图片替换为css变量；将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接，以实现将浏览器中不兼容的webp格式背景图片编译成兼容的base64格式内容流；最后根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。本申请利用css变量来实现webp格式的兼容问题。css变量基本上所有的浏览器已经兼容，对于不兼容的浏览器也有相应的兼容插件，能够解决现有技术中webp格式背景图片浏览器兼容性较低的问题。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的webp格式背景图片浏览器兼容方法的步骤。

本申请计算机可读存储介质通过获取目标网页中所有的webp格式背景图片以及对应的webp图片链接，以实现对webp格式背景图片及链接的获取；将每个所述webp格式背景图片用层叠样式表css变量替换，以实现将webp格式背景图片替换为css变量；将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接，以实现将浏览器中不兼容的webp格式背景图片编译成兼容的base64格式内容流；最后根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。本申请利用css变量来实现webp格式的兼容问题。css变量基本上所有的浏览器已经兼容，对于不兼容的浏览器也有相应的兼容插件，能够解决现有技术中webp格式背景图片浏览器兼容性较低的问题。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种webp格式背景图片浏览器兼容方法，其特征在于，包括下述步骤：

获取目标网页中所有的webp格式背景图片以及对应的webp图片链接；

将每个所述webp格式背景图片用层叠样式表css变量替换；

将所有的css变量集合成目标对象简谱json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；

在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；

将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接；

根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。

2.根据权利要求1所述的webp格式背景图片浏览器兼容方法，其特征在于，所述获取目标网页中所有的webp格式背景图片以及对应的webp图片链接包括：

利用webpack插件获取所述目标网页内所有代码中的背景图片；

对所述背景图片进行识别；

将其中被识别为webp格式的背景图片确定为webp格式背景图片；

根据所述webp格式背景图片，获取对应的webp图片链接。

3.根据权利要求1所述的webp格式背景图片浏览器兼容方法，其特征在于，所述将每个所述webp格式背景图片用层叠样式表css变量替换包括：

将每个所述webp格式背景图片生成对应的映射值；

将所述映射值用层叠样式表css变量替换。

4.根据权利要求1所述的webp格式背景图片浏览器兼容方法，其特征在于，所述获取所述目标json文件中对应的所有的webp格式背景图片包括：

获取所述目标json文件；

根据所述目标json文件中css变量与webp格式背景图片的对应关系，下载所有的webp格式背景图片。

5.根据权利要求1所述的webp格式背景图片浏览器兼容方法，其特征在于，所述将所述webp格式背景图片编译成base64格式内容流包括：

利用字节码格式WebAssembly，在所述浏览器中运行webp工具包源码库libwebp的二进制字节码，将所述webp格式背景图片编译成base64格式内容流。

6.根据权利要求1所述的webp格式背景图片浏览器兼容方法，其特征在于，所述根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接包括：

根据所述目标json文件中css变量对应的css变量链接，将所述webp图片链接替换成blob图片链接。

7.一种webp格式背景图片浏览器兼容装置，其特征在于，包括：

获取模块，用于获取目标网页中所有的webp格式背景图片以及对应的webp图片链接；

替换模块，用于将每个所述webp格式背景图片用层叠样式表css变量替换；

集合模块，用于将所有的css变量集合成目标json文件，所述目标json文件中包括css变量与webp格式背景图片的对应关系；

所述获取模块，还用于在浏览器访问所述目标网页时，获取所述目标json文件中对应的所有的webp格式背景图片；

处理模块，用于将所述webp格式背景图片编译成base64格式内容流，并生成对应的blob图片链接；

所述替换模块，还用于根据所述目标json文件中css变量，将所述webp图片链接替换成blob图片链接。

8.根据权利要求7所述的webp格式背景图片浏览器兼容装置，其特征在于，所述获取模块包括获取单元、识别单元以及确定单元；

所述获取单元，用于利用webpack插件获取所述目标网页内所有代码中的背景图片；

所述识别单元，用于对所述背景图片进行识别；

所述确定单元，用于将其中被识别为webp格式的背景图片确定为webp格式背景图片；

所述获取单元，还用于根据所述webp格式背景图片，获取对应的webp图片链接。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至6中任一项所述的webp格式背景图片浏览器兼容方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至6中任一项所述的webp格式背景图片浏览器兼容方法的步骤。

Images