Rendering and Loading Method, Device, Equipment and Medium Compatible with WebP Images

Abstract

The present application relates to a rendering and loading method, device, equipment and medium compatible with webp images. This method is applied to a browser. When the browser receives a rendering request, the suffix name of the URL original image address in the rendering request is replaced with webp to obtain an updated rendering request. Based on the updated rendering request, it is started to detect whether the browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, a string is randomly generated, and the fetch interface is used to send a request to load the string to obtain a loading result. The loading result is put into the created image bitmap. If it is detected that the creation of the image bitmap triggers a successful callback, the corresponding original image is converted into a webp image, and the address of the webp image is used to replace the URL original image address in the updated rendering request to obtain and execute the replaced rendering request, realizing the compatible processing of webp images by the browser and improving the rendering efficiency of the browser.

Description

Technical Field

[0001] This application is applicable to the browser technology field, and particularly relates to a method, device, equipment and medium for rendering and loading webp images in a compatible manner. Background Art

[0002] Currently, webp is a picture file format that provides both lossy compression and lossless compression, and is derived from the video coding format VP8. The file size of webp images is relatively small, but it can achieve the same picture quality as the JEPG format, so as to reduce the transmission time of picture files on the network. The lossless compression of webp reduces the file size by 45% compared to the PNG files found on the network. Even if these PNG files have been processed using PNGCRUSH and PNGOUT, webP can still reduce the file size by 28%. Therefore, webp can reduce the average picture size by 70%. However, for the current mainstream development in the front-end industry regarding webp images, the solutions provided are the cwebp command-line tool and the Imagemin webp plugin. The Imagemin plugin is generally used in build tools such as webpack and gulp, while cwebp is more suitable for one-time conversion. Using the Imagemin plugin to convert images requires investing a lot of time and effort in collecting and integrating project images. For old projects and projects with frequent picture updates, rendering requires consuming a large amount of resources and has low efficiency. Therefore, how to enable browsers to use webp images for rendering to improve rendering efficiency has become an urgent problem to be solved. Summary of the Invention

[0003] In view of this, embodiments of the present application provide a method, device, equipment and medium for rendering and loading webp images in a compatible manner to solve the problem of how to enable browsers to use webp images for rendering to improve rendering efficiency.

[0004] In a first aspect, embodiments of the present application provide a method for rendering and loading webp images in a compatible manner. The rendering and loading method is applied to a target browser, and the rendering and loading method includes:

[0005] When the target browser receives a rendering request, replace the suffix name of the URL original image address in the rendering request with webp to obtain an updated rendering request;

[0006] Based on the updated rendering request, start detecting whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, randomly generate a string, and the format of the string is webp;

[0007] Send a request using the fetch interface to load the string, obtain the loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback;

[0008] If it is detected that the created image bitmap triggers a successful callback, convert the original image corresponding to the original URL address to a webp image, and use the address of the webp image to replace the original URL address in the updated rendering request to obtain and execute the replaced rendering request.

[0009] In one embodiment, replacing the suffix name of the original URL address in the rendering request with webp to obtain the updated rendering request includes:

[0010] Extract the original URL address in the rendering request, and use the string replacement method to replace the suffix name of the original URL address with webp to obtain the replaced original URL address;

[0011] Update the rendering request with the replaced original URL address to obtain the updated rendering request.

[0012] In one embodiment, before replacing the suffix name of the original URL address in the rendering request with webp to obtain the updated rendering request, it further includes:

[0013] Detect whether there is an attribute that supports rendering webp images. If it is detected that there is an attribute that supports rendering webp images, obtain the attribute value of the attribute that supports rendering webp images;

[0014] If the attribute value indicates an error, perform the step of replacing the suffix name of the original URL address in the rendering request with webp to obtain the updated rendering request.

[0015] In one embodiment, after obtaining the attribute value of the attribute that supports rendering webp images, it further includes:

[0016] If the attribute value is correct, directly perform the steps of converting the original image corresponding to the original URL address to a webp image, using the address of the webp image to replace the original URL address in the updated rendering request to obtain and execute the replaced rendering request.

[0017] In one embodiment, after starting to detect whether the target browser supports creating an image bitmap based on the updated rendering request, it further includes:

[0018] If it is detected that the target browser does not support creating an image bitmap, extract the corresponding original image through the original URL address and render and output the original image;

[0019] Generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to indicate an error.

[0020] In one embodiment, after detecting whether the creation of the image bitmap triggers a successful callback, it further includes:

[0021] If it is detected that the creation of the image bitmap triggers a successful callback, generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to indicate correct.

[0022] In one embodiment, after detecting whether the creation of the image bitmap triggers a successful callback, it further includes:

[0023] If it is detected that the creation of the image bitmap triggers a failed callback, execute the steps of extracting the corresponding original image through the original image address of the URL, rendering and outputting the original image, generating an attribute that supports rendering webp images in the function storage area of the target browser, and setting the attribute value of the attribute that supports rendering webp images to indicate an error.

[0024] In a second aspect, an embodiment of the present application provides a rendering and loading device compatible with webp images. The rendering and loading device is applied to a target browser, and the rendering and loading device includes:

[0025] A rendering request update module, configured to, when the target browser receives a rendering request, replace the suffix name of the original image address in the rendering request with webp to obtain an updated rendering request;

[0026] A string generation module, configured to, based on the updated rendering request, start detecting whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, randomly generate a string in the format of webp;

[0027] A trigger loading module, configured to send a request to load the string using the fetch interface to obtain a loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback;

[0028] A first rendering execution module, configured to, if it is detected that the created image bitmap triggers a successful callback, convert the original image corresponding to the original image address of the URL into a webp image, use the address of the webp image to replace the original image address in the updated rendering request, and obtain and execute the replaced rendering request.

[0029] In one embodiment, the rendering request update module includes:

[0030] A replacement unit for extracting the original URL address in the rendering request and replacing the suffix name of the original URL address with webp using a string replacement method to obtain a replaced original URL address;

[0031] An update unit for updating the rendering request using the replaced original URL address to obtain an updated rendering request.

[0032] In one embodiment, the rendering and loading device further includes:

[0033] An attribute value acquisition module for detecting whether there is an attribute supporting webp image rendering before replacing the suffix name of the original URL address in the rendering request with webp to obtain an updated rendering request. If it is detected that there is an attribute supporting webp image rendering, the attribute value of the attribute supporting webp image rendering is acquired;

[0034] A first execution module for executing the step of replacing the suffix name of the original URL address in the rendering request with webp to obtain an updated rendering request if the attribute value indicates an error.

[0035] In one embodiment, the rendering and loading device further includes:

[0036] A second execution module for directly executing the step of converting the original image corresponding to the original URL address into a webp image, replacing the original URL address in the updated rendering request with the address of the webp image, and obtaining and executing the replaced rendering request after acquiring the attribute value of the attribute supporting webp image rendering if the attribute value is correct.

[0037] In one embodiment, the rendering and loading device further includes:

[0038] An original image rendering module for extracting the corresponding original image through the original URL address and rendering and outputting the original image if it is detected that the target browser does not support creating an image bitmap after starting to detect whether the target browser supports creating an image bitmap based on the updated rendering request;

[0039] A first attribute update module for generating an attribute supporting webp image rendering in the function storage area of the target browser and setting the attribute value of the attribute supporting webp image rendering to indicate an error.

[0040] In one embodiment, the rendering and loading device further includes:

[0041] The second attribute update module is used to, after detecting whether the creation of the image bitmap triggers a successful callback, if it is detected that the creation of the image bitmap triggers a successful callback, generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to be characterized as correct.

[0042] In one embodiment, the rendering and loading device further includes:

[0043] The second rendering execution module is used to, after detecting whether the creation of the image bitmap triggers a successful callback, if it is detected that the creation of the image bitmap triggers a failed callback, execute the step of extracting the corresponding original image through the URL original image address, rendering and outputting the original image, generating an attribute that supports rendering webp images in the function storage area of the target browser, and setting the attribute value of the attribute that supports rendering webp images to be characterized as incorrect.

[0044] In a third aspect, an embodiment of the present application provides a computer device, which includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the rendering and loading method as described in the first aspect.

[0045] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the rendering and loading method as described in the first aspect.

[0046] The beneficial effects of the embodiments of the present application compared with the prior art are as follows: The method of the present application is applied to a target browser. When the target browser receives a rendering request, the suffix name of the URL original image address in the rendering request is replaced with webp to obtain an updated rendering request. Based on the rendering request with the suffix name of the URL original image address replaced with webp, it is detected whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, a random string is generated in the format of webp, and a request is sent using the fetch interface to load the string to obtain a loading result. The loading result is placed into the created image bitmap, and it is detected whether the created image bitmap triggers a successful callback. If it is detected that the created image bitmap triggers a successful callback, the original image corresponding to the URL original image address is converted into a webp image, and the address of the webp image is used to replace the URL original image address in the updated rendering request to obtain and execute the replaced rendering request, realizing the compatibility processing of webp images by the browser and improving the rendering efficiency of the browser. Description of the Drawings

[0047] To more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the accompanying drawings required for use in the embodiments or the description of the prior art. Obviously, the accompanying drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0048] Figure 1 It is a schematic diagram of an application environment of a method for rendering and loading webp images provided in the first embodiment of the present application;

[0049] Figure 2 It is a schematic flowchart of a method for rendering and loading webp images provided in the second embodiment of the present application;

[0050] Figure 3 It is a schematic flowchart of a method for rendering and loading webp images provided in the third embodiment of the present application;

[0051] Figure 4 It is a schematic structural diagram of a device for rendering and loading webp images provided in the fourth embodiment of the present application;

[0052] Figure 5 It is a schematic structural diagram of a computer device provided in the fifth embodiment of the present application. Detailed implementation manners

[0053] In the following description, for the purpose of illustration rather than limitation, specific details such as specific system structures and technologies are presented to thoroughly understand the embodiments of the present application. However, those skilled in the art should clearly understand that the present application can also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid unnecessary details from interfering with the description of the present application.

[0054] It should be understood that when used in the specification of the present application and the appended claims, the term "comprising" indicates the presence of the described features, wholes, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.

[0055] It should also be understood that the term " / and / " used in the specification of the present application and the appended claims refers to any combination and all possible combinations of one or more of the related listed items, and includes these combinations.

[0056] As used in the specification of this application and the appended claims, the term "if" may be construed, depending on the context, as "when", "once", "in response to determining", or "in response to detecting". Similarly, the phrase "if determined" or "if [the described condition or event] is detected" may be construed, depending on the context, to mean "once determined", "in response to determining", "once [the described condition or event] is detected", or "in response to detecting [the described condition or event]".

[0057] In addition, in the description of the specification of this application and the appended claims, the terms "first", "second", "third", etc. are used only for distinguishing descriptions and should not be construed as indicating or implying relative importance.

[0058] Reference to "one embodiment" or "some embodiments" or the like described in the specification of this application means that a specific feature, structure, or characteristic described in connection with that embodiment is included in one or more embodiments of this application. Thus, statements such as "in one embodiment", "in some embodiments", "in other some embodiments", "in still other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized. The terms "comprising", "including", "having", and their variants all mean "including but not limited to", unless otherwise specifically emphasized.

[0059] The embodiments of this application may acquire and process relevant data based on artificial intelligence technology. Among them, artificial intelligence (AI) is a theory, method, technology, and application system that uses a digital computer or a machine controlled by a digital computer to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to obtain the best results.

[0060] Artificial intelligence basic technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation / interaction systems, and mechatronics. Artificial intelligence software technologies mainly include several major directions such as computer vision technology, robotics, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0061] It should be understood that the magnitudes of the sequence numbers of the steps in the following embodiments do not mean the order of execution is prior or posterior, and the execution order of each process should be determined according to its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of this application.

[0062] To illustrate the technical solution of this application, the following specific embodiments are used for illustration.

[0063] A rendering and loading method compatible with WebP images provided in the first embodiment of the present application can be applied in an application environment such as Figure 1 , where the client communicates with the server. The client includes, but is not limited to, computer devices such as a palm computer, a desktop computer, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a cloud computer device, and a personal digital assistant (PDA). The server can be implemented by an independent server or a server cluster composed of multiple servers.

[0064] See Figure 2 , which is a schematic flowchart of a rendering and loading method compatible with WebP images provided in the second embodiment of the present application. The above-mentioned rendering and loading method compatible with WebP images is applied to Figure 1 the server or the client in . A target browser is installed on the computer device corresponding to the server or the client. The target browser can be composed of a shell and a kernel, including a user interface, a network, a UI backend, a JavaScript interpreter, an Extensible Markup Language (XML) parser, data storage, and a browser engine and a rendering engine. Browsers in different kernel cases can rely on their own rendering engines to execute the rendering and loading method. The rendering engine is responsible for obtaining the content of the web page (Hyper Text Markup Language (HTML), XML, images, etc.), organizing the information (such as adding Cascading Style Sheets (CSS), etc.), and calculating the display method of the web page. The rendering engine can display HTML and XML documents, select CSS styles, and embedded content (such as pictures). The rendering engine can accurately calculate the page layout and can use the "reflow" algorithm to gradually adjust the positions of page elements. The rendering engine internally includes an HTML parser. As Figure 2 shown, the rendering and loading method compatible with WebP images may include the following steps:

[0065] Step S201, when the target browser receives a rendering request, replace the suffix name of the URL original image address in the rendering request with webp to obtain an updated rendering request.

[0066] In this application, the target browser is operated by the corresponding user. After obtaining a rendering request according to the user's operation, rendering work is carried out. The rendering request may refer to request information containing parameters such as the original URL address of the image, the mode of the background image or the img image tag mode, and the custom style. In this regard, the suffix name of the original URL address of the image is replaced with webp.

[0067] Webp is a format. After the suffix name is replaced with webp, an updated rendering request is formed. This updated rendering request is a rendering request for a forged webp-format image, and its purpose is to determine whether the target browser supports the rendering of webp-format images.

[0068] Optionally, replacing the suffix name of the original URL address of the image in the rendering request to obtain an updated rendering request includes:

[0069] Extract the original URL address of the image in the rendering request, and use the string replacement method to replace the suffix name of the original URL address with webp to obtain the replaced original URL address of the image;

[0070] Use the replaced original URL address of the image to update the rendering request to obtain an updated rendering request.

[0071] Among them, the above replacement of the suffix name does not convert the format of the image, but replaces the suffix name to achieve a rendering request disguised as webp. Therefore, the original URL address of the image is extracted from the initial rendering request, and the string replacement method is used to replace the suffix name of the original URL address of the image to obtain the replaced original URL address of the image.

[0072] The command code format of the string replacement method is as follows:

[0073] replace( / (?:\.\w+)(\?|$) / ,'.webp$1')

[0074] Among them, ".webp" represents the target to be replaced, and the other parts are the codes for finding the target to be replaced. After obtaining the replaced original URL address of the image, in order to forge the rendering request, it is also necessary to use the replaced original URL address of the image to replace the original URL address of the image in the original rendering request to obtain an updated rendering request, which is the forged rendering request.

[0075] Step S202: Based on the updated rendering request, start detecting whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, a random string is generated.

[0076] In this application, based on the updated rendering request, which is a rendering request for a forged webp image, the rendering process of the target browser is triggered. After receiving such a rendering request, the target browser will detect whether it supports creating an image bitmap, so as to further determine whether it has the ability to process the rendering request of the webp image.

[0077] The above-mentioned creation of an image bitmap is the createImageBitmap method. This createImageBitmap method exists globally in window and worker, representing accepting various different image sources and returning an ImageBitmap object whose bitmap data is parsed to contain a given rectangle. Among them, it is possible to choose to crop the image into a pixel rectangle of (sx, sy) with a width of sw and a height of sh. The image sources include , SVG , <video> 、 <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, ImageBitmap, and OffscreenCanvas objects, etc.

[0078] If the target browser supports creating an image bitmap, customize a base64 string in the webp format, that is, randomly create a string in the webp format. The purpose of this string is to determine whether creating an image bitmap supports processing webp format images.

[0079] Step S203: Use the fetch interface to send a request to load the string, obtain the loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback.

[0080] In this application, the purpose of the fetch interface is to send an HTTP request in a JavaScript script. The fetch interface accepts a string as a parameter, sends a GET request to it by default, and returns a Promise object. The purpose of using the fetch interface is to load the corresponding string and put it into the created image bitmap, and obtain the Promise object, that is, the ImageBitmap object containing the bitmap data of the given rectangle, to see if it can trigger a successful callback, so as to determine whether creating an image bitmap supports creating an image bitmap for webp format images.

[0081] Detecting whether the created image bitmap triggers a successful callback is to obtain feedback information. If the feedback information is true, it can be determined that a successful callback is triggered. If the feedback information is false, it can be determined that a failed callback is triggered.

[0082] Step S204: If it is detected that the created image bitmap triggers a successful callback, convert the original image corresponding to the URL of the original image to a webp image, use the address of the webp image to replace the URL of the original image in the updated rendering request, and obtain and execute the replaced rendering request.

[0083] In this application, when it is determined that the target browser has the ability to render webp images, convert the original image corresponding to the URL of the original image to a webp image, so that the images to be processed can be degraded, which better solves the problem of webp image compatibility between old and new versions of browsers and ensures the stable and smooth operation of the online project.

[0084] The downgrade process of the image, that is, converting the original image corresponding to the original URL address into a WebP image, requires the use of corresponding conversion tools. Since Imagemin and Webpack have the ability to customize plugins, the conversion script needs to use the ability of custom plugins to write a script for automatically converting images, that is, a script for automatically converting images into WebP, as follows:

[0085] 1. Initialize the PAWebpWebpackPlugin class in the JS script and construct the configuration properties of the script through the constructor, including the regular expression for matching image files, the lossy compression ratio (1-100, the larger the value, the closer to lossless), whether to change the source file suffix to webp, and whether to print detailed logs.

[0086] 2. When implementing the application method, the input parameter is the compiler parser provided by the Webpack plugin, and the emit life cycle is accessed through the hooks of the parser. In this hook, the read image resources are passed into the Imagemin plugin for conversion to obtain the converted WebP image. Finally, the converted WebP format image is written into the assets static resource list of the Webpack plugin. After the packaging is completed, Webpack will output the static resources in assets to the production directory. Among them, emit is the hook triggered after Webpack finally packages and generates static resources, and all image resources in the project collected by Webpack can be accessed here.

[0087] After the conversion is completed, obtain the corresponding WebP image and its corresponding address from the static resources, replace the original URL address with the address, and then a real WebP rendering request can be converted. Executing this rendering request can achieve the rendering of the WebP image.

[0088] Embodiments of this application are applied to a target browser. When the target browser receives a rendering request, the suffix of the original URL address in the rendering request is replaced with webp to obtain an updated rendering request. Based on the rendering request with the suffix of the original URL address replaced with webp, it is detected whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, a string is randomly generated in the format of webp. A request is sent using the fetch interface to load the string, and the loading result is obtained. The loading result is placed in the created image bitmap. It is detected whether the created image bitmap triggers a successful callback. If it is detected that the created image bitmap triggers a successful callback, the original image corresponding to the original URL address is converted into a webp image, and the address of the webp image is used to replace the original URL address in the updated rendering request. The replaced rendering request is obtained and executed, realizing the compatibility processing of the webp image by the browser and improving the rendering efficiency of the browser.

[0089] See Figure 3 , which is a schematic flowchart of a rendering and loading method for compatible webp images provided by Embodiment 3 of this application. As Figure 3 shown, the rendering and loading method for compatible webp images may include the following steps:

[0090] Step S301: When the target browser receives a rendering request, it is detected whether there is an attribute that supports rendering webp images. If it is detected that there is an attribute that supports rendering webp images, the attribute value of the attribute that supports rendering webp images is obtained.

[0091] In this application, the attribute that supports rendering webp images may refer to an attribute value stored in the target browser or the operating environment where the target browser is installed. This attribute value is used to represent whether the target browser supports rendering webp images. It can directly judge whether the target browser can render webp images according to the result of the attribute value. Therefore, it is not necessary for the target browser to perform steps such as replacing the suffix name and judging the creation of an image bitmap every time it executes a rendering request, which improves the efficiency to a certain extent.

[0092] In one embodiment, the attribute that supports rendering webp images can be characterized as the isSupportWebp attribute in windows. During detection, if the isSupportWebp attribute does not exist, it means that the target browser needs to perform the judgment process in Embodiment 2 above. If the isSupportWebp attribute exists, but the attribute value of the isSupportWebp attribute does not meet the requirements, the judgment process in Embodiment 2 above also needs to be performed.

[0093] Optionally, after obtaining the attribute value of the attribute that supports rendering webp images, it further includes:

[0094] If the attribute value is correct, directly execute the steps of converting the original image corresponding to the original URL address to a webp image, replacing the original URL address in the updated rendering request with the address of the webp image, and obtaining and executing the replaced rendering request.

[0095] Among them, if the attribute value of the isSupportWebp attribute meets the requirements, there is no need to execute the judgment process in the second embodiment. Directly execute the steps of converting the original image corresponding to the original URL address to a webp image in step S305, replacing the original URL address in the updated rendering request with the address of the webp image, obtaining and executing the replaced rendering request, thereby greatly improving the efficiency.

[0096] Step S302, if the attribute value is characterized as incorrect, then execute the step of replacing the suffix name of the original URL address in the rendering request with webp to obtain the updated rendering request.

[0097] In this application, when the attribute value is characterized as incorrect, it indicates that the target browser did not support rendering webp images before. And because the target browser may be updated, not supporting before does not mean supporting currently. Therefore, it is necessary to re-execute the step of determining whether it is supported.

[0098] Among them, part of the content of step S302 is the same as that of the above step S201. For the description, reference can be made to step S201 and will not be elaborated here.

[0099] Step S303, based on the updated rendering request, start detecting whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, randomly generate a string, and the format of the string is webp.

[0100] Optionally, after starting to detect whether the target browser supports creating an image bitmap based on the updated rendering request, it further includes:

[0101] If it is detected that the target browser does not support creating an image bitmap, extract the corresponding original image through the original URL address and render and output the original image;

[0102] Generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to be characterized as incorrect.

[0103] Among them, when it is detected that the target browser does not support creating an image bitmap, the target browser can only render the original image corresponding to the original URL address. At the same time, generate an attribute that supports rendering webp images and set the attribute value of this attribute to be incorrect, that is, it does not support rendering webp images. If there is already an attribute that supports rendering webp images, it is only necessary to update the attribute value of this attribute to be incorrect.

[0104] Step S304: Use the fetch interface to send a request to load a string, obtain the loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback.

[0105] Step S305: If it is detected that the created image bitmap triggers a successful callback, then convert the original image corresponding to the URL of the original image into a webp image, use the address of the webp image to replace the URL of the original image in the updated rendering request, and obtain and execute the replaced rendering request.

[0106] Among them, the content of Step S303 to Step S305 is the same as that of the above-mentioned Step S202 to Step S204. For the description, please refer to Step S202 to Step S204 and will not be elaborated here.

[0107] Optionally, after detecting whether the created image bitmap triggers a successful callback, it further includes:

[0108] If it is detected that the created image bitmap triggers a successful callback, then generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to be characterized as correct.

[0109] Among them, when it is detected that the created image bitmap triggers a successful callback, it means that the target browser can support rendering webp images. At the same time, generate an attribute that supports rendering webp images and set the attribute value of this attribute to be correct, that is, support rendering webp images. If there is already an attribute that supports rendering webp images, then it is only necessary to update the attribute value of this attribute to be correct.

[0110] Optionally, after detecting whether the created image bitmap triggers a successful callback, it further includes:

[0111] If it is detected that the created image bitmap triggers a failed callback, then execute the steps of extracting the corresponding original image through the URL of the original image, rendering and outputting the original image, generating an attribute that supports rendering webp images in the function storage area of the target browser, and setting the attribute value of the attribute that supports rendering webp images to be characterized as incorrect.

[0112] Among them, when it is detected that the created image bitmap triggers a failed callback, the target browser can only render the original image of the URL of the original image. At the same time, generate an attribute that supports rendering webp images and set the attribute value of this attribute to be incorrect, that is, does not support rendering webp images. If there is already an attribute that supports rendering webp images, then it is necessary to update the attribute value of this attribute to be incorrect.

[0113] The proposed webp image rendering method can automatically collect all static resource images in the front-end engineering project, filter files according to user-defined matching rules, and customize the lossy conversion ratio of images. It is applicable to image application scenarios on all platforms, greatly improving the maintainability of project image files and the front-end development efficiency, saving a large amount of labor costs for manual conversion of webp images, and avoiding negligence and errors in manual operations.

[0114] In the embodiment of this application, when the target browser receives a rendering request, the suffix of the URL original image address in the rendering request is replaced with webp to obtain an updated rendering request. Based on the rendering request with the suffix of the URL original image address replaced with webp, it is detected whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, a random string is generated, and the format of the string is webp. The fetch interface is used to send a request to load the string to obtain a loading result, and the loading result is placed in the created image bitmap. It is detected whether the created image bitmap triggers a successful callback. If it is detected that the created image bitmap triggers a successful callback, the original image corresponding to the URL original image address is converted into a webp image, and the address of the webp image is used to replace the URL original image address in the updated rendering request to obtain and execute the replaced rendering request, realizing the compatibility processing of webp images by the browser and improving the rendering efficiency of the browser.

[0115] Corresponding to the rendering and loading method for compatible webp images in the above embodiments, Figure 4 The structural block diagram of the rendering and loading device for compatible webp images provided in the fourth embodiment of this application is shown. The above rendering and loading device is applied to Figure 1 the server in. The computer device corresponding to the server is connected to the corresponding database to obtain the corresponding data in the database. The above computer device can also be connected to the corresponding client, and the client is operated by the user. The user can provide the corresponding test report to the server through the client. For the sake of simplicity, only the parts related to the embodiments of this application are shown.

[0116] See Figure 4 , the rendering and loading device includes:

[0117] A rendering request update module 41, configured to replace the suffix of the URL original image address in the rendering request with webp when the target browser receives the rendering request, to obtain an updated rendering request;

[0118] A string generation module 42, configured to start detecting whether the target browser supports creating an image bitmap based on the updated rendering request. If it is detected that the target browser supports creating an image bitmap, a random string is generated, and the format of the string is webp;

[0119] The trigger loading module 43 is used to send a request to load a string using the fetch interface, obtain the loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback;

[0120] The first rendering execution module 44 is used to convert the original image corresponding to the URL of the original image into a webp image if it is detected that the created image bitmap triggers a successful callback, and use the address of the webp image to replace the URL of the original image in the updated rendering request to obtain and execute the replaced rendering request.

[0121] Optionally, the rendering request update module 41 includes:

[0122] The replacement unit is used to extract the URL of the original image in the rendering request, and use the string replacement method to replace the suffix name of the URL of the original image with webp to obtain the replaced URL of the original image;

[0123] The update unit is used to update the rendering request with the replaced URL of the original image to obtain the updated rendering request.

[0124] Optionally, the rendering loading device further includes:

[0125] The attribute value acquisition module is used to detect whether there is an attribute that supports rendering webp images before replacing the suffix name of the URL of the original image in the rendering request with webp to obtain the updated rendering request. If it is detected that there is an attribute that supports rendering webp images, the attribute value of the attribute that supports rendering webp images is obtained;

[0126] The first execution module is used to execute the step of replacing the suffix name of the URL of the original image in the rendering request with webp to obtain the updated rendering request if the attribute value indicates an error.

[0127] Optionally, the rendering loading device further includes:

[0128] The second execution module is used to directly execute the step of converting the original image corresponding to the URL of the original image into a webp image, using the address of the webp image to replace the URL of the original image in the updated rendering request, and obtaining and executing the replaced rendering request after obtaining the attribute value of the attribute that supports rendering webp images.

[0129] Optionally, the rendering loading device further includes:

[0130] The original image rendering module is used to extract the corresponding original image through the URL of the original image and render and output the original image if it is detected that the target browser does not support creating an image bitmap after starting to detect whether the target browser supports creating an image bitmap based on the updated rendering request;

[0131] The first attribute update module is used to generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to indicate an error.

[0132] Optionally, the rendering and loading device further includes:

[0133] The second attribute update module is used to, after detecting whether creating an image bitmap triggers a successful callback, if it is detected that creating an image bitmap triggers a successful callback, generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to indicate correct.

[0134] Optionally, the rendering and loading device further includes:

[0135] The second rendering execution module is used to, after detecting whether creating an image bitmap triggers a successful callback, if it is detected that creating an image bitmap triggers a failed callback, execute the steps of extracting the corresponding original image through the URL of the original image, rendering and outputting the original image, generating an attribute that supports rendering webp images in the function storage area of the target browser, and setting the attribute value of the attribute that supports rendering webp images to indicate an error.

[0136] It should be noted that for the information interaction, execution process, etc. between the above modules, since they are based on the same concept as the method embodiment of the present application, their specific functions and the technical effects brought about can be specifically referred to in the method embodiment part, and will not be elaborated here.

[0137] Figure 5 This is a schematic structural diagram of a computer device provided in Embodiment 5 of the present application. As Figure 5 shown, the computer device of this embodiment includes: at least one processor ( Figure 5 only one is shown in the figure), a memory, and a computer program stored in the memory and executable on at least one processor. When the processor executes the computer program, it implements the steps in any of the above-mentioned method embodiments for rendering and loading compatible webp images.

[0138] The computer device may include, but is not limited to, a processor and a memory. Those skilled in the art can understand that Figure 5 this is only an example of a computer device and does not constitute a limitation on the computer device. The computer device may include more or fewer components than shown in the figure, or combine some components, or different components. For example, it may also include a network interface, a display screen, and an input device, etc.

[0139] The so-called processor may be a CPU, and the processor may also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0140] The memory includes a readable storage medium, internal memory, etc. Among them, the internal memory may be the memory of the computer device, and the internal memory provides an environment for the operation of the operating system and computer-readable instructions in the readable storage medium. The readable storage medium may be the hard disk of the computer device, and in some other embodiments, it may also be an external storage device of the computer device. For example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the computer device. Further, the memory may also include both the internal storage unit of the computer device and the external storage device. The memory is used to store the operating system, application programs, boot loaders, data, and other programs, such as the program code of the computer program. The memory may also be used to temporarily store the data that has been output or will be output.

[0141] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the above-mentioned division of each functional unit and module is used as an example. In actual applications, the above-mentioned functions can be allocated to different functional units and modules according to needs, that is, the internal structure of the device is divided into different functional units or modules to complete all or part of the functions described above. Each functional unit and module in the embodiment can be integrated into a processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of a software functional unit. In addition, the specific names of each functional unit and module are only for the convenience of mutual distinction and do not limit the protection scope of this application. The specific working processes of the units and modules in the above-mentioned device can refer to the corresponding processes in the foregoing method embodiments and will not be elaborated here. If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, to implement all or part of the processes in the above-mentioned method embodiments of this application, a computer program can be used to instruct the relevant hardware to complete. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by a processor, the steps of the above-mentioned method embodiments can be implemented. Among them, the computer program includes computer program code, and the computer program code can be in the form of source code, object code, executable file or some intermediate form, etc. The computer-readable medium can at least include: any entity or device capable of carrying the computer program code, recording medium, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signal, telecommunication signal, and software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disc, etc. In some jurisdictions, according to legislation and patent practice, the computer-readable medium cannot be an electrical carrier signal and a telecommunication signal.

[0142] To implement all or part of the processes in the above-mentioned method embodiments of this application, it can also be completed by a computer program product. When the computer program product runs on a computer device, it enables the computer device to execute and implement the steps in the above-mentioned method embodiments.

[0143] In the above embodiments, the descriptions of each embodiment have their own emphases. For the parts not detailed or recorded in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0144] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of this application.

[0145] In the embodiments provided in this application, it should be understood that the disclosed device / computer equipment and method can be implemented in other ways. For example, the device / computer equipment embodiments described above are only illustrative. For example, the division of modules or units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling, direct coupling, or communication connection to each other can be through some interfaces. The indirect coupling or communication connection of the device or unit can be in an electrical, mechanical, or other form.

[0146] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place, or they can be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0147] The above embodiments are only used to illustrate the technical solutions of this application, rather than to limit them; although this application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included in the protection scope of this application.< / canvas> < / video>

Claims

1. A rendering and loading method compatible with WebP images, characterized in that, The rendering and loading method is applied to a target browser, and the rendering and loading method includes: When the target browser receives a rendering request, replace the suffix of the URL original image address in the rendering request with webp to obtain an updated rendering request; Based on the updated rendering request, start detecting whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, randomly generate a string in the format of webp; Use the fetch interface to send a request to load the string, obtain a loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback; If it is detected that the created image bitmap triggers a successful callback, convert the original image corresponding to the URL original image address into a webp image, use the address of the webp image to replace the URL original image address in the updated rendering request, and obtain and execute the replaced rendering request.

2. The rendering and loading method according to claim 1, characterized in that, Replacing the suffix of the URL original image address in the rendering request with webp to obtain an updated rendering request includes: Extract the URL original image address in the rendering request, and use the string replacement method to replace the suffix of the URL original image address with webp to obtain a replaced URL original image address; Use the replaced URL original image address to update the rendering request to obtain an updated rendering request.

3. The rendering and loading method according to claim 1, characterized in that, Before replacing the suffix of the URL original image address in the rendering request with webp to obtain an updated rendering request, it further includes: Detect whether there is an attribute that supports rendering webp images. If it is detected that there is an attribute that supports rendering webp images, obtain the attribute value of the attribute that supports rendering webp images; If the attribute value is characterized as an error, execute the step of replacing the suffix of the URL original image address in the rendering request with webp to obtain an updated rendering request.

4. The rendering and loading method according to claim 3, characterized in that, After obtaining the attribute value of the attribute that supports rendering webp images, it further includes: If the attribute value is correct, directly execute the step of converting the original image corresponding to the URL original image address into a webp image, using the address of the webp image to replace the URL original image address in the updated rendering request, and obtaining and executing the replaced rendering request.

5. The rendering and loading method according to claim 3, characterized in that, After starting to detect whether the target browser supports creating an image bitmap based on the updated rendering request, it further includes: If it is detected that the target browser does not support creating an image bitmap, extract the corresponding original image through the URL original image address and render and output the original image; Generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to be characterized as an error.

6. The rendering and loading method according to claim 3, characterized in that, After detecting whether the created image bitmap triggers a successful callback, it further includes: If it is detected that the created image bitmap triggers a successful callback, generate an attribute that supports rendering webp images in the function storage area of the target browser, and set the attribute value of the attribute that supports rendering webp images to be characterized as correct.

7. The rendering and loading method according to claim 6, characterized in that, After detecting whether the creation of the image bitmap triggers a successful callback, it further includes: If it is detected that the creation of the image bitmap triggers a failure callback, then execute the step of extracting the corresponding original image through the original image URL address, rendering and outputting the original image, generating an attribute that supports rendering webp images in the function storage area of the target browser, and setting the attribute value of the attribute that supports rendering webp images to indicate an error.

8. A rendering and loading device compatible with WebP images, characterized in that, The rendering and loading device is applied to a target browser, and the rendering and loading device includes: A rendering request update module, configured to replace the suffix name of the original image URL address in the rendering request with webp when the target browser receives a rendering request, to obtain an updated rendering request; A string generation module, configured to, based on the updated rendering request, start detecting whether the target browser supports creating an image bitmap. If it is detected that the target browser supports creating an image bitmap, randomly generate a string in the format of webp; A trigger loading module, configured to send a request to load the string using the fetch interface, obtain a loading result, put the loading result into the created image bitmap, and detect whether the created image bitmap triggers a successful callback; A first rendering execution module, configured to, if it is detected that the created image bitmap triggers a successful callback, convert the original image corresponding to the original image URL address into a webp image, use the address of the webp image to replace the original image URL address in the updated rendering request, and obtain and execute the replaced rendering request.

9. A computer device, characterized in that, The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the rendering and loading method according to any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the rendering and loading method according to any one of claims 1 to 7.

Images