WebP format background image browser compatibility method, device and related equipment

Abstract

This application belongs to the field of artificial intelligence research and development, and relates to a browser compatibility method for webp format background images, including obtaining all webp format background images and corresponding webp image links in a target web page; replacing each webp format background image with a cascading style sheet (CSS) variable; grouping all CSS variables into a target object notation (JSON) file, wherein the target JSON file includes a correspondence between CSS variables and webp format background images; when a browser accesses a target web page, obtaining all corresponding webp format background images in the target JSON file; compiling the webp format background images into a base64 format content stream and generating corresponding blob image links; and replacing the webp image links with blob image links based on the CSS variables in the target JSON file. This application utilizes CSS variables to achieve webp format compatibility, which can solve the problem of low browser compatibility of webp format background images in the prior art.

Description

Technical Field

[0001] The present application relates to the fields of research and development and artificial intelligence technology, and in particular to methods, devices and related equipment for browser compatibility of background images in webp format. Background Art

[0002] Images still occupy a significant portion of network traffic, especially on mobile devices. Therefore, minimizing image size while preserving visual quality is crucial for saving bandwidth and battery life. However, optimization of common image formats like JPEG, PNG, and GIF has reached near-limited performance, leading Google to propose a new image compression format, WebP, in 2010.

[0003] However, modern browsers are not 100% compatible with webp format images. For some incompatible browsers, the prior art can only allow these browsers to load webp format image tags, but cannot achieve compatibility with webp background images.

[0004] Currently, the best solution for supporting WebP background images is to use the browser's ServiceWorker process to intercept background image requests. Using WebAssembly, the browser then runs the binary bytecode of libwebp, a WebP toolkit, to compile the WebP image into a Base64 content stream. This code is then returned to the ServiceWorker interface, completing the interception-compilation-replacement process. However, this process is problematic: while the compilation process occurs within the ServiceWorker process, libwebp requires canvas for WebP formatting, which is only handled within the DOM interface of the main browser process. Therefore, a new feature, OffscreenCanvas, is required. This new interface meets the requirements of existing solutions and implements canvas off-screen in memory. However, this interface is not very compatible: currently, only 69% of browsers implement it (data collected as of April 13, 2022), resulting in limited compatibility. Summary of the Invention

[0005] The purpose of the embodiments of the present application is to propose a browser compatibility method, device and related equipment for webp format background images to solve the problem in the prior art that webp format background images have low compatibility in browsers and cannot meet user needs.

[0006] In order to solve the above technical problems, the embodiment of the present application provides a browser compatibility method for background images in webp format, which adopts the following technical solutions:

[0007] Get all webp format background images and corresponding webp image links in the target web page;

[0008] Replace each webp format background image with a cascading style sheet css variable;

[0009] All CSS variables are collected into a target object notation json file, wherein the target json file includes the correspondence between CSS variables and background images in webp format;

[0010] When the browser accesses the target web page, all the webp format background images corresponding to the target json file are obtained;

[0011] Compile the webp format background image into a base64 format content stream and generate a corresponding blob image link;

[0012] According to the css variables in the target json file, the webp image link is replaced with a blob image link.

[0013] Furthermore, obtaining all webp format background images and corresponding webp image links in the target webpage includes:

[0014] Use the webpack plug-in to obtain the background image in all codes in the target web page;

[0015] Identifying the background image;

[0016] Determine the background image identified as being in webp format as the background image in webp format;

[0017] According to the webp format background image, obtain the corresponding webp image link.

[0018] Furthermore, each of the webp format background images is replaced with a cascading style sheet (CSS) variable, including:

[0019] Generate a corresponding mapping value for each webp format background image;

[0020] The mapped values ​​are replaced with cascading style sheet (CSS) variables.

[0021] Furthermore, obtaining all the webp format background images corresponding to the target json file includes:

[0022] Get the target json file;

[0023] Download all webp format background images according to the correspondence between the css variables and the webp format background images in the target json file.

[0024] Furthermore, compiling the webp format background image into a base64 format content stream includes:

[0025] The bytecode format WebAssembly is used to run the binary bytecode of the webp toolkit source code library libwebp in the browser to compile the webp format background image into a base64 format content stream.

[0026] Further, according to the css variable in the target json file, replacing the webp image link with a blob image link includes:

[0027] According to the CSS variable link corresponding to the CSS variable in the target JSON file, the webp image link is replaced with a blob image link.

[0028] In order to solve the above technical problems, the embodiment of the present application further provides a browser-compatible device for background images in webp format, which adopts the following technical solution:

[0029] The acquisition module is used to obtain all webp format background images and corresponding webp image links in the target web page;

[0030] A replacement module, used to replace each of the webp format background images with cascading style sheet (CSS) variables;

[0031] The collection module is used to collect all CSS variables into a target JSON file, wherein the target JSON file includes the correspondence between CSS variables and background images in webp format;

[0032] The acquisition module is further configured to acquire all webp format background images corresponding to the target json file when the browser accesses the target web page;

[0033] A processing module, configured to compile the webp format background image into a base64 format content stream and generate a corresponding blob image link;

[0034] The replacement module is further used to replace the webp image link with a blob image link according to the css variable in the target json file.

[0035] Furthermore, the acquisition module includes an acquisition unit, an identification unit, and a determination unit;

[0036] The acquisition unit is used to use the webpack plug-in to acquire the background image in all codes in the target webpage;

[0037] The recognition unit is used to recognize the background image;

[0038] The determining unit is configured to determine the background image identified as being in the webp format as the background image in the webp format;

[0039] The acquisition unit is further configured to acquire a corresponding webp image link according to the webp format background image.

[0040] Furthermore, the replacement module includes a generation unit and a replacement unit;

[0041] The generating unit is configured to generate a corresponding mapping value for each webp format background image;

[0042] The replacement unit is used to replace the mapping value with a cascading style sheet (CSS) variable.

[0043] Furthermore, the acquisition unit is further configured to acquire the target json file;

[0044] The acquisition module also includes a downloading unit for downloading all webp format background images according to the correspondence between the css variables and the webp format background images in the target json file.

[0045] Furthermore, the processing module is specifically used to use the bytecode format WebAssembly to run the binary bytecode of the webp toolkit source code library libwebp in the browser to compile the webp format background image into a base64 format content stream.

[0046] Furthermore, the replacement module is also used to replace the webp image link with a blob image link according to the css variable link corresponding to the css variable in the target json file.

[0047] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:

[0048] Provided is a computer device comprising one or more processors and a memory for storing one or more programs, so that the one or more processors implement any one of the above-described methods for browser compatibility of webp format background images.

[0049] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:

[0050] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements any one of the above-mentioned methods for browser compatibility of webp format background images.

[0051] Compared with the prior art, the embodiments of the present application have the following beneficial effects:

[0052] This application obtains all webp format background images and corresponding webp image links in the target web page through the above steps to achieve the acquisition of webp format background images and links; replaces each webp format background image with a cascading style sheet CSS variable to achieve the replacement of webp format background images with CSS variables; aggregates all CSS variables into a target object notation json file, and the target json file includes the correspondence between CSS variables and webp format background images; when the browser accesses the target web page, obtains all corresponding webp format background images in the target json file; compiles the webp format background image into a base64 format content stream, and generates a corresponding blob image link to achieve the compilation of incompatible webp format background images in the browser into a compatible base64 format content stream; finally, according to the CSS variables in the target json file, replaces the webp image link with a blob image link. This application uses CSS variables to solve the compatibility problem of the webp format. CSS variables are compatible with almost all browsers, and there are corresponding compatible plug-ins for incompatible browsers, which can solve the problem of low browser compatibility of webp format background images in the existing technology. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] In order to more clearly illustrate the solutions in this application, a brief introduction will be given below to the drawings required for use in the description of the embodiments of this application. Obviously, the drawings described below are some embodiments of this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0054] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;

[0055] Figure 2 A flowchart of an embodiment of a method for browser compatibility of a background image in webp format according to the present application;

[0056] Figure 3 This is a structural diagram of an embodiment of a webp format background image browser compatible device according to the present application;

[0057] Figure 4 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION

[0058] Unless otherwise defined, all technical and scientific terms used herein have the same meanings as commonly understood by those skilled in the art to which this application belongs. The terms used in the specification of the application are for the purpose of describing specific embodiments only and are not intended to limit this application. The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of this application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0059] References herein to "embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it constitute an independent or alternative embodiment that is mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0060] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0061] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. Network 104 is a medium for providing communication links between terminal devices 101, 102, 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0062] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0063] Terminal devices 101, 102, and 103 can be various electronic devices with display screens and support web browsing, including but not limited to smartphones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 (Moving Picture Experts Group Audio Layer IV), laptop computers, desktop computers, etc.

[0064] The server 105 may be a server that provides various services, such as a background server that provides support for web pages displayed on the terminal devices 101 , 102 , and 103 .

[0065] It should be noted that the webp format background image browser compatibility method provided in the embodiment of the present application is generally executed by a server / terminal device, and accordingly, the webp format background image browser compatibility device is generally set in the server / terminal device.

[0066] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0067] Continue to refer Figure 2 , shows a flowchart of an embodiment of a method for browser compatibility of a webp format background image according to the present application. The method for browser compatibility of a webp format background image includes the following steps:

[0068] Step 201: Obtain all webp format background images and corresponding webp image links in the target web page.

[0069] In actual use, you can use the webpack plug-in to find the background image in all browser codes and identify whether it is a webp format background image. If so, get the corresponding webp image link.

[0070] Step 202: Replace each of the webp format background images with a cascading style sheet (CSS) variable.

[0071] In this embodiment, a picture ID is generated for the webp format background picture to define the webp picture, and then it is replaced with a CSS variable.

[0072] Step 203: All CSS variables are aggregated into a target object notation JSON file, wherein the target JSON file includes a correspondence between CSS variables and a background image in a webp format.

[0073] Step 204: When the browser accesses the target web page, all the corresponding background images in the webp format in the target json file are obtained.

[0074] In this embodiment, when the browser accesses this webpage, it will first find the json file in step 203 and download all the background images in webp format.

[0075] Step 205: compile the webp format background image into a base64 format content stream and generate a corresponding blob image link.

[0076] In actual use, WebAssembly can be used to run the binary bytecode of a webp toolkit libwebp in the browser to compile webp into a base64 format content stream, and finally generate a blob image link.

[0077] Step 206: Replace the webp image link with a blob image link according to the css variable in the target json file.

[0078] In this embodiment, all original webp image links are replaced with links that can be displayed by the blob browser.

[0079] This application obtains all webp format background images and corresponding webp image links in the target web page through the above steps to achieve the acquisition of webp format background images and links; replaces each webp format background image with a cascading style sheet CSS variable to achieve the replacement of webp format background images with CSS variables; aggregates all CSS variables into a target object notation json file, and the target json file includes the correspondence between CSS variables and webp format background images; when the browser accesses the target web page, obtains all corresponding webp format background images in the target json file; compiles the webp format background image into a base64 format content stream, and generates a corresponding blob image link to achieve the compilation of incompatible webp format background images in the browser into a compatible base64 format content stream; finally, according to the CSS variables in the target json file, replaces the webp image link with a blob image link. This application uses CSS variables to solve the compatibility problem of the webp format. CSS variables are compatible with almost all browsers, and there are corresponding compatible plug-ins for incompatible browsers, which can solve the problem of low browser compatibility of webp format background images in the existing technology.

[0080] In some optional implementations of this embodiment, in step 201 of obtaining all webp format background images and corresponding webp image links in the target web page, the electronic device may further perform the following steps:

[0081] Use the webpack plug-in to obtain the background image in all codes in the target web page;

[0082] Identifying the background image;

[0083] Determine the background image identified as being in webp format as the background image in webp format;

[0084] According to the webp format background image, obtain the corresponding webp image link.

[0085] This application uses the webpack plug-in to find the background images in all codes in the browser's target web page, then identifies whether the background images are in webp format, and obtains the webp image links that are identified as webp format background images.

[0086] In some optional implementations, in step 202, each of the webp format background images is replaced with a cascading style sheet (CSS) variable. The electronic device may perform the following steps:

[0087] Generate a corresponding mapping value for each webp format background image;

[0088] The mapped values ​​are replaced with cascading style sheet (CSS) variables.

[0089] Specifically, CSS variables allow a certain attribute in a CSS style to be replaced with a variable. Assigning a value to a variable will uniformly replace it in all places where the variable is used. (For example: var(--webp1,url(https: / / abc.com / test1.webp)) Here, webp1 is a variable, and the second value of the var function is the default value. If the webp1 variable cannot be found, the default value will be used.) Its function is to give a location to the background image. If the browser is already compatible with webp, the image will not be compiled, and the variable webp1 will not be assigned a value. In this case, the default value will be used. However, if it is not compatible, the webp image will be compiled, and after the result is generated, the variable root{--webp1:url(blob:https: / / abc.com / xxxxx1)} will be assigned to the root element. At this time, webp1 will be assigned a value. The previous place where this variable was used will use this new value.

[0090] In some optional implementations, in step 204, to obtain all corresponding background images in the target JSON file in the webp format, the electronic device may perform the following steps:

[0091] Get the target json file;

[0092] Download all webp format background images according to the correspondence between the css variables and the webp format background images in the target json file.

[0093] In some optional implementations, in step 205, the webp format background image is compiled into a base64 format content stream, and the electronic device may further perform the following steps:

[0094] The bytecode format WebAssembly is used to run the binary bytecode of the webp toolkit source code library libwebp in the browser to compile the webp format background image into a base64 format content stream.

[0095] Specifically, libwebp is a WebP toolkit developed by Google, written in C++. This toolkit uses canvas to compile WebP files into a format that other browsers can display. Canvas is a feature used for drawing in the browser's main process, and can be used to parse the WebP format.

[0096] In some optional implementations, in step 206, the webp image link is replaced with a blob image link according to the css variable in the target json file. The electronic device may further perform the following steps:

[0097] According to the CSS variable link corresponding to the CSS variable in the target JSON file, the webp image link is replaced with a blob image link.

[0098] Specifically, according to the CSS variable link, the variable assignment is used to replace the webp link with a blob link that can be displayed.

[0099] It should be emphasized that in order to further ensure the privacy and security of the above-mentioned blob image link data, the above-mentioned blob image link data can also be stored in a node of a blockchain.

[0100] The blockchain referred to in this application is a new application model for computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Blockchain is essentially a decentralized database, a series of data blocks generated using cryptographic methods. Each data block contains information about a batch of network transactions, which is used to verify the validity of this information (to prevent counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, the platform product service layer, and the application service layer.

[0101] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial Intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to achieve optimal results.

[0102] Fundamental AI technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interaction systems, and mechatronics. AI software technologies primarily encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0103] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware via computer-readable instructions. The computer-readable instructions can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes in the above-described method embodiments. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0104] It should be understood that although the steps in the flowcharts of the accompanying drawings are shown in sequence as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0105] Further references Figure 3 , as a response to the above Figure 2 The present application provides an embodiment of a webp format background image browser compatible device. Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0106] like Figure 3 As shown, the webp format background image browser compatible device 300 of this embodiment includes: an acquisition module 301, a replacement module 302, a collection module 303 and a processing module 304. Among them:

[0107] The acquisition module 301 is used to obtain all webp format background images and corresponding webp image links in the target web page;

[0108] A replacement module 302 is used to replace each of the webp format background images with cascading style sheet (CSS) variables;

[0109] The collection module 303 is used to collect all CSS variables into a target JSON file, wherein the target JSON file includes the correspondence between CSS variables and background images in the webp format;

[0110] The acquisition module 301 is further configured to acquire all webp format background images corresponding to the target json file when the browser accesses the target web page;

[0111] The processing module 304 is used to compile the webp format background image into a base64 format content stream and generate a corresponding blob image link;

[0112] The replacement module 302 is further configured to replace the webp image link with a blob image link according to the css variable in the target json file.

[0113] In this embodiment, the acquisition module 301 acquires all webp format background images and corresponding webp image links in the target webpage to obtain the webp format background images and links; the replacement module 302 replaces each webp format background image with a cascading style sheet (CSS) variable to replace the webp format background image with a CSS variable; the collection module 303 aggregates all CSS variables into a target object notation (JSON) file, wherein the target JSON file includes a correspondence between CSS variables and webp format background images; the acquisition module 301 also acquires all corresponding webp format background images in the target JSON file when the browser accesses the target webpage; the processing module 304 compiles the webp format background images into a base64 format content stream and generates a corresponding blob image link to compile incompatible webp format background images in the browser into a compatible base64 format content stream; and finally, the replacement module 302 replaces the webp image link with a blob image link based on the CSS variable in the target JSON file. This application utilizes CSS variables to address the compatibility issues of the webp format. CSS variables are compatible with almost all browsers, and there are corresponding compatible plug-ins for incompatible browsers, which can solve the problem of low browser compatibility of webp format background images in the existing technology.

[0114] In some optional implementations of this embodiment, the acquisition module 301 includes an acquisition unit 3011, an identification unit 3012, and a determination unit 3013;

[0115] The acquisition unit 3011 is used to use the webpack plug-in to acquire the background image in all codes in the target webpage;

[0116] The recognition unit 3012 is used to recognize the background image;

[0117] The determining unit 3013 is configured to determine the background image identified as being in the webp format as the background image in the webp format;

[0118] The acquisition unit 3011 is further configured to acquire a corresponding webp image link according to the webp format background image.

[0119] This application uses the webpack plug-in to find the background images in all codes in the browser's target web page, then identifies whether the background images are in webp format, and obtains the webp image links that are identified as webp format background images.

[0120] In some optional implementations of this embodiment, the replacement module 302 includes a generation unit 3021 and a replacement unit 3022;

[0121] The generating unit 3021 is configured to generate a corresponding mapping value for each webp format background image;

[0122] The replacing unit 3022 is configured to replace the mapping value with a cascading style sheet (CSS) variable.

[0123] Specifically, CSS variables allow a certain attribute in a CSS style to be replaced with a variable. Assigning a value to a variable will uniformly replace it in all places where the variable is used. (For example: var(--webp1,url(https: / / abc.com / test1.webp)) Here, webp1 is a variable, and the second value of the var function is the default value. If the webp1 variable cannot be found, the default value will be used.) Its function is to give a location to the background image. If the browser is already compatible with webp, the image will not be compiled, and the variable webp1 will not be assigned a value. In this case, the default value will be used. However, if it is not compatible, the webp image will be compiled, and after the result is generated, the variable root{--webp1:url(blob:https: / / abc.com / xxxxx1)} will be assigned to the root element. At this time, webp1 will be assigned a value. The previous place where this variable was used will use this new value.

[0124] In some optional implementations of this embodiment, the acquiring unit 3011 is further configured to acquire the target json file;

[0125] The acquisition module 301 further includes a downloading unit 3014 for downloading all webp format background images according to the correspondence between the css variables and the webp format background images in the target json file.

[0126] In some optional implementations of this embodiment, the above-mentioned processing module 304 is specifically used to use the bytecode format WebAssembly to run the binary bytecode of the webp toolkit source code library libwebp in the browser to compile the webp format background image into a base64 format content stream.

[0127] Specifically, libwebp is a WebP toolkit developed by Google, written in C++. This toolkit uses canvas to compile WebP files into a format that other browsers can display. Canvas is a feature used for drawing in the browser's main process, and can be used to parse the WebP format.

[0128] In some optional implementations of this embodiment, the replacement module 302 is further configured to replace the webp image link with a blob image link according to a css variable link corresponding to the css variable in the target json file.

[0129] Specifically, according to the CSS variable link, the variable assignment is used to replace the webp link with a blob link that can be displayed.

[0130] It should be emphasized that in order to further ensure the privacy and security of the above-mentioned blob image link data, the above-mentioned blob image link data can also be stored in a node of a blockchain.

[0131] To solve the above technical problems, the present application also provides a computer device. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment.

[0132] The computer device 4 includes a memory 41, a processor 42, and a network interface 43 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 4 with components 41-43, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application-specific integrated circuits (ASICs), programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0133] The computer device may be a desktop computer, notebook computer, PDA, cloud server, etc. The computer device may interact with the user via a keyboard, mouse, remote control, touchpad, or voice control device.

[0134] The memory 41 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 41 can be an internal storage unit of the computer device 4, such as the hard disk or memory of the computer device 4. In other embodiments, the memory 41 can also be an external storage device of the computer device 4, such as a plug-in hard disk equipped on the computer device 4, a smart memory card (SMC), a secure digital (SD) card, a flash memory card, etc. Of course, the memory 41 can also include both the internal storage unit of the computer device 4 and its external storage device. In this embodiment, the memory 41 is generally used to store the operating system and various application software installed on the computer device 4, such as computer-readable instructions for a browser-compatible method for a webp format background image. In addition, the memory 41 can also be used to temporarily store various types of data that have been output or are to be output.

[0135] In some embodiments, the processor 42 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 62 is generally used to control the overall operation of the computer device 4. In this embodiment, the processor 62 is used to execute computer-readable instructions or process data stored in the memory 41, such as computer-readable instructions for executing the webp format background image browser compatibility method.

[0136] The network interface 43 may include a wireless network interface or a wired network interface. The network interface 43 is generally used to establish a communication connection between the computer device 4 and other electronic devices.

[0137] The computer device of the present application obtains all webp format background images and corresponding webp image links in the target web page to obtain webp format background images and links; replaces each webp format background image with a cascading style sheet CSS variable to replace the webp format background image with a CSS variable; aggregates all CSS variables into a target object notation JSON file, wherein the target JSON file includes the correspondence between CSS variables and webp format background images; when the browser accesses the target web page, obtains all corresponding webp format background images in the target JSON file; compiles the webp format background images into a base64 format content stream and generates a corresponding blob image link to compile the incompatible webp format background images in the browser into a compatible base64 format content stream; finally, according to the CSS variables in the target JSON file, replaces the webp image link with a blob image link. The present application uses CSS variables to solve the compatibility problem of the webp format. CSS variables are compatible with almost all browsers, and there are corresponding compatible plug-ins for incompatible browsers, which can solve the problem of low browser compatibility of webp format background images in the existing technology.

[0138] The present application also provides another embodiment, namely, providing a computer-readable storage medium, which stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the above-mentioned webp format background image browser compatibility method.

[0139] The computer-readable storage medium of the present application obtains all webp format background images and corresponding webp image links in a target webpage to obtain webp format background images and links; replaces each webp format background image with a cascading style sheet (CSS) variable to replace the webp format background image with a CSS variable; aggregates all CSS variables into a target object notation (JSON) file, wherein the target JSON file includes a correspondence between CSS variables and webp format background images; when a browser accesses the target webpage, obtains all webp format background images corresponding to the target JSON file; compiles the webp format background images into a base64 format content stream and generates a corresponding blob image link to compile incompatible webp format background images in the browser into a compatible base64 format content stream; and finally, replaces the webp image link with a blob image link based on the CSS variables in the target JSON file. The present application utilizes CSS variables to solve the compatibility problem of the webp format. CSS variables are compatible with almost all browsers, and there are corresponding compatible plug-ins for incompatible browsers, which can solve the problem of low browser compatibility of webp format background images in the existing technology.

[0140] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0141] Obviously, the embodiments described above are only some of the embodiments of the present application, rather than all of the embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions described in the aforementioned specific embodiments, or to make equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the present application specification and the accompanying drawings, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present application.

Claims

1. A webp format background image browser compatibility method, characterized in that: The steps include: Get all webp format background images and corresponding webp image links in the target web page; Replace each webp format background image with a cascading style sheet css variable; All CSS variables are collected into a target object notation json file, wherein the target json file includes the correspondence between CSS variables and background images in webp format; When the browser accesses the target web page, all the webp format background images corresponding to the target json file are obtained; Compile the webp format background image into a base64 format content stream and generate a corresponding blob image link; According to the css variables in the target json file, the webp image link is replaced with a blob image link.

2. The webp format background image browser compatibility method according to claim 1, characterized in that: The method of obtaining all webp format background images and corresponding webp image links in the target webpage includes: Use the webpack plug-in to obtain the background image in all codes in the target web page; Identifying the background image; Determine the background image identified as being in the webp format as the webp format background image; According to the webp format background image, obtain the corresponding webp image link.

3. The webp format background image browser compatibility method according to claim 1, characterized in that: The replacing each webp format background image with a cascading style sheet (CSS) variable comprises: Generate a corresponding mapping value for each webp format background image; The mapped values ​​are replaced with cascading style sheet (CSS) variables.

4. The webp format background image browser compatibility method according to claim 1, characterized in that: The step of obtaining all webp format background images corresponding to the target json file includes: Get the target json file; Download all webp format background images according to the correspondence between the css variables and the webp format background images in the target json file.

5. The webp format background image browser compatibility method according to claim 1, characterized in that: Compiling the webp format background image into a base64 format content stream includes: The bytecode format WebAssembly is used to run the binary bytecode of the webp toolkit source code library libwebp in the browser to compile the webp format background image into a base64 format content stream.

6. The webp format background image browser compatibility method according to claim 1, characterized in that: The step of replacing the webp image link with a blob image link according to the css variable in the target json file includes: According to the CSS variable link corresponding to the CSS variable in the target JSON file, the webp image link is replaced with a blob image link.

7. A webp format background image browser compatible device, characterized in that: include: The acquisition module is used to obtain all webp format background images and corresponding webp image links in the target web page; A replacement module, used to replace each of the webp format background images with cascading style sheet (CSS) variables; The collection module is used to collect all CSS variables into a target JSON file, wherein the target JSON file includes the correspondence between CSS variables and background images in webp format; The acquisition module is further configured to acquire all webp format background images corresponding to the target json file when the browser accesses the target web page; A processing module, configured to compile the webp format background image into a base64 format content stream and generate a corresponding blob image link; The replacement module is further used to replace the webp image link with a blob image link according to the css variable in the target json file.

8. The webp format background image browser compatible device according to claim 7, characterized in that: The acquisition module includes an acquisition unit, an identification unit and a determination unit; The acquisition unit is used to use the webpack plug-in to acquire the background image in all codes in the target webpage; The recognition unit is used to recognize the background image; The determining unit is configured to determine the background image identified as being in the webp format as the background image in the webp format; The acquisition unit is further configured to acquire a corresponding webp image link according to the webp format background image.

9. A computer device comprising a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the webp format background image browser compatibility method as described in any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the webp format background image browser compatibility method according to any one of claims 1 to 6 are implemented.

Images