Data processing method, device, computer equipment and medium

Abstract

The embodiments of the present application provide a data processing method, apparatus, computer device, and medium. The method includes: obtaining a zoom ratio of an initial webpage, scaling the initial webpage according to the zoom ratio to obtain a target webpage; synchronously scaling an initial container according to the size of the target webpage to obtain a target container; synchronously scaling an initial merged background image according to the size of the target container to obtain a target merged background image; obtaining an offset ratio between the initial merged background image and the initial container, determining an offset distance corresponding to the target merged background image according to the offset ratio, and moving the target merged background image according to the offset distance. Using the present application, the merged background image can be adjusted according to the resolution of the container, thereby properly displaying the sprite image on webpages with different resolutions.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a data processing method, apparatus, computer equipment, and medium. Background Art

[0002] In order to improve the loading speed of web pages, existing web pages can use sprite images as an application processing method for web page images. The sprite image can synthesize multiple sub-images (i.e. sub-icons) into one image (i.e. sprite image), so that different sub-images in the sprite image can be displayed on the web page based on obtaining one image.

[0003] However, because the resolution of web pages varies or may change, existing sprite image processing methods will display the sub-icons in the sprite image at their inherent size, that is, the sub-icons in the sprite image will be displayed at the same size on web pages with different resolutions. For example, a sub-icon in the sprite image (for example, sub-icon B) may be displayed on a low-resolution web page. After adjusting the resolution of the low-resolution web page, a high-resolution web page corresponding to the low-resolution web page can be obtained. The high-resolution web page will still display sub-icon B at its inherent size, which will affect the display effect of sub-icon B on the high-resolution web page and may even cause the sprite image to not display properly. Summary of the Invention

[0004] The embodiments of the present application provide a data processing method, apparatus, computer device, and medium, which can normally display sprite images on web pages of different resolutions.

[0005] On the one hand, an embodiment of the present application provides a data processing method, including:

[0006] Obtaining a zoom ratio of the initial webpage, and scaling the initial webpage according to the zoom ratio to obtain a target webpage; the initial webpage includes an initial container for displaying initial sub-icons in the initial merged background image;

[0007] According to the size of the target web page, the initial container is synchronously scaled to obtain the target container;

[0008] The initial merged background image is synchronously scaled according to the size of the target container to obtain a target merged background image; the target merged background image includes a target sub-icon, which is obtained by scaling the initial sub-icon; the size ratio between the target sub-icon and the target container is the same as the size ratio between the initial sub-icon and the initial container;

[0009] Get the offset ratio between the initial merged background image and the initial container, determine the offset distance corresponding to the target merged background image based on the offset ratio, and move the target merged background image according to the offset distance; after the move, the target sub-icon in the target merged background image is in the target container.

[0010] In one aspect, an embodiment of the present application provides a data processing device, including:

[0011] The webpage determination module is used to obtain the zoom ratio of the initial webpage and scale the initial webpage according to the zoom ratio to obtain the target webpage; the initial webpage includes an initial container for displaying the initial sub-icons in the initial merged background image;

[0012] A container determination module is used to synchronously scale the initial container according to the size of the target web page to obtain a target container;

[0013] An image determination module is configured to synchronously scale the initial merged background image according to the size of the target container to obtain a target merged background image; the target merged background image includes a target sub-icon, which is obtained by scaling the initial sub-icon; the size ratio between the target sub-icon and the target container is the same as the size ratio between the initial sub-icon and the initial container;

[0014] The distance movement module is used to obtain the offset ratio between the initial merged background image and the initial container, determine the offset distance corresponding to the target merged background image based on the offset ratio, and move the target merged background image according to the offset distance; after the movement, the target sub-icon in the target merged background image is in the target container.

[0015] The webpage determination module is specifically used to obtain a display device for displaying the initial webpage, and determine the zoom ratio of the initial webpage according to the resolution of the display device.

[0016] The webpage determining module is specifically configured to, in response to a zoom operation on the initial webpage, obtain a zoom ratio indicated by the zoom operation, and determine the zoom ratio indicated by the zoom operation as the zoom ratio of the initial webpage.

[0017] The container determination module includes:

[0018] a parameter determination unit, configured to obtain container configuration parameters for the initial container, and determine a target container width parameter and a target container height parameter according to the size of the target webpage and the container configuration parameters;

[0019] The first scaling unit is configured to synchronously scale the initial container based on a target container width parameter and a target container height parameter to obtain a target container.

[0020] Among them, the container configuration parameters include the containing block width ratio, the containing block height ratio, and the containing block padding ratio;

[0021] A parameter determination unit, specifically used to obtain the containing block width ratio, containing block height ratio, and containing block padding ratio for the initial container;

[0022] The parameter determination unit is specifically configured to determine a target container width parameter according to a webpage width parameter indicated by the size of the target webpage and a containing block width ratio;

[0023] The parameter determination unit is specifically configured to determine the target container height parameter according to the webpage height parameter indicated by the size of the target webpage, the containing block height ratio, and the containing block padding ratio.

[0024] The image determination module includes:

[0025] A first determining unit is configured to determine a target image width parameter according to a size ratio relationship between the initial sub-icon and the initial container and a target container width parameter indicated by a size of the target container;

[0026] A second determining unit is configured to determine a target image height parameter according to a size ratio relationship between the initial sub-icon and the initial container and a target container height parameter indicated by a size of the target container;

[0027] The second scaling unit is configured to perform synchronous scaling processing on the initial merged background image based on a target image width parameter and a target image height parameter to obtain a target merged background image.

[0028] The second scaling unit is specifically configured to determine a horizontal scaling ratio according to a target image width parameter and an initial image width parameter of the initial merged background image;

[0029] A second scaling unit is specifically configured to determine a vertical scaling ratio according to a target image height parameter and an initial image height parameter of an initial merged background image;

[0030] The second scaling unit is specifically configured to perform synchronous scaling processing on the initial merged background image based on the horizontal scaling ratio and the vertical scaling ratio to obtain a target merged background image.

[0031] Among them, the distance movement module includes:

[0032] A first acquiring unit is configured to acquire initial image parameters of an initial merged background image, an initial offset distance of an initial sub-icon relative to the initial merged background image, and initial container parameters of an initial container;

[0033] The ratio determination unit is used to determine the offset ratio between the initial merged background image and the initial container according to the initial image parameters, the initial offset distance and the initial container parameters.

[0034] The initial image parameters include an initial image width parameter and an initial image height parameter; the initial offset distance includes an initial horizontal offset distance and an initial vertical offset distance; the initial container parameters include an initial container width parameter and an initial container height parameter;

[0035] a ratio determination unit, specifically configured to determine a horizontal offset ratio between the initial merged background image and the initial container according to an initial image width parameter, an initial horizontal offset distance, and an initial container width parameter;

[0036] a ratio determination unit, specifically configured to determine a vertical offset ratio between the initial merged background image and the initial container according to an initial image height parameter, an initial vertical offset distance, and an initial container height parameter;

[0037] The ratio determination unit is specifically configured to determine the horizontal offset ratio and the vertical offset ratio as the offset ratio between the initial merged background image and the initial container.

[0038] The ratio determination unit is specifically configured to determine the difference between the initial image width parameter and the initial container width parameter as the initial width parameter;

[0039] The ratio determination unit is specifically configured to determine the ratio between the initial horizontal offset distance and the initial width parameter as the horizontal offset ratio between the initial merged background image and the initial container.

[0040] The offset ratio includes the horizontal offset ratio and the vertical offset ratio; the offset distance includes the target horizontal offset distance and the target vertical offset distance;

[0041] The distance movement module includes:

[0042] The second acquisition unit is used to acquire target image parameters of the target merged background image and target container parameters of the target container; the target image parameters include a target image width parameter and a target image height parameter; the target container parameters include a target container width parameter and a target container height parameter;

[0043] A first offset unit is configured to determine a target horizontal offset distance corresponding to a target merged background image according to a horizontal offset ratio, a target image width parameter, and a target container width parameter;

[0044] The second offset unit is used to determine the target vertical offset distance corresponding to the target merged background image according to the vertical offset ratio, the target image height parameter and the target container height parameter;

[0045] The image moving unit is used to move the target merged background image according to the target horizontal offset distance and the target vertical offset distance.

[0046] In one aspect, an embodiment of the present application provides a computer device, including: a processor and a memory;

[0047] The processor is connected to a memory, wherein the memory is used to store a computer program. When the computer program is executed by the processor, the computer device executes the method provided in the embodiment of the present application.

[0048] On the one hand, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. The computer program is suitable for being loaded and executed by a processor so that a computer device having the processor executes the method provided by the embodiment of the present application.

[0049] In one aspect, embodiments of the present application provide a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the method provided in the embodiments of the present application.

[0050] The embodiment of the present application can implement responsive scaling of the container and the merged background image when the resolution of the web page changes. The responsive scaling here can maintain the size ratio relationship between the merged background image and the container, that is, maintain the size ratio relationship between the sub-icons in the merged background image and the container. Among them, the initial web page can be the web page before the scaling process, and the target web page can be the web page after the scaling process; the initial container can be the container before the scaling process, and the target container can be the container after the scaling process; the initial merged background image can be the merged background image before the scaling process, and the target merged background image can be the merged background image after the scaling process. It can be understood that by scaling the initial merged background image, the initial sub-icon in the initial merged background image can be scaled to obtain a target merged background image containing the target sub-icon. Therefore, after the target container and the target merged background image are obtained by scaling, the target sub-icon obtained by scaling the initial sub-icon can be normally displayed in the target container through the displacement (i.e., offset distance) of the target merged background image relative to the target container, thereby displaying the sprite normally in web pages with different resolutions. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0052] Figure 1 This is a schematic diagram of a network architecture provided by an embodiment of the present application;

[0053] Figure 2a This is a schematic diagram of a data interaction scenario provided by an embodiment of the present application;

[0054] Figure 2b This is a schematic diagram of a data interaction scenario provided by an embodiment of the present application;

[0055] Figure 3 This is a flow chart of a data processing method provided in an embodiment of the present application;

[0056] Figure 4 This is a schematic diagram of a scenario for determining the size and position of an image provided by an embodiment of the present application;

[0057] Figure 5 This is a flow chart of a technical solution provided in an embodiment of the present application;

[0058] Figure 6 This is a flow chart of a data processing method provided in an embodiment of the present application;

[0059] Figure 7 This is a structural diagram of a combined background image and container provided in an embodiment of the present application;

[0060] Figure 8 This is a flow chart of a data processing method provided in an embodiment of the present application;

[0061] Figure 9 is a structural diagram of a data processing device provided in an embodiment of the present application;

[0062] Figure 10 It is a structural diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0063] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0064] For details, see Figure 1 , Figure 1 This is a schematic diagram of a network architecture provided by an embodiment of the present application. Figure 1As shown, the network architecture may include a server 2000 and a user terminal cluster. The user terminal cluster may specifically include one or more user terminals, and the number of user terminals in the user terminal cluster is not limited here. Figure 1 As shown, the multiple user terminals may specifically include user terminal 3000a, user terminal 3000b, user terminal 3000c, ..., user terminal 3000n; user terminal 3000a, user terminal 3000b, user terminal 3000c, ..., user terminal 3000n may respectively be directly or indirectly connected to the server 2000 via wired or wireless communication, so that each user terminal may exchange data with the server 2000 via the network connection.

[0065] Among them, server 2000 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, as well as big data and artificial intelligence platforms.

[0066] Each user terminal in the user terminal cluster may include: smart phones, tablet computers, laptop computers, desktop computers, smart homes, wearable devices, vehicle terminals and other smart terminals with data processing functions. Figure 1 Each user terminal in the user terminal cluster shown can be integrated with a browser. When the browser is running in each user terminal, the user terminal can communicate with the above-mentioned Figure 1 The servers 2000 shown here perform data interaction.

[0067] For ease of understanding, the embodiments of the present application can be Figure 1 Select one user terminal from the multiple user terminals shown as the target user terminal. For example, the embodiment of the present application can Figure 1 The user terminal 3000n shown is used as a target user terminal, and a browser may be integrated into the target user terminal. At this time, the target user terminal can perform data exchange with the server 2000 through the browser.

[0068] In an embodiment of the present application, the target user terminal can be used as a front end for executing the data processing method, and the server 2000 can be used as a back end corresponding to the front end. In this way, when the target user terminal integrated with a browser sends a web page acquisition request to the server 2000, the server 2000 can obtain the initial web page corresponding to the web page acquisition request after receiving the web page acquisition request, and then return the initial web page to the target user terminal. Furthermore, after receiving the initial web page, the target user terminal can display the target web page corresponding to the initial web page in the browser, and display the target sub-icon in the target container of the target web page. Among them, the target web page is obtained after scaling the initial web page, the target container in the target web page is obtained after scaling the initial container in the initial web page, the target sub-icon in the target container is in the target merged background image, the initial sub-icon in the initial container is in the initial merged background image, and the target merged background image is obtained after scaling the initial merged background image.

[0069] For ease of understanding, the merged background image (i.e., the initial merged background image or the target merged background image) in the embodiment of the present application can be a sprite image (i.e., a wizard image). CSS (Cascading Style Sheets, Cascading Style Sheets) Sprite (i.e., CSS Sprite, CSS wizard) is a CSS image merging technology. This method can merge small icons (i.e., sub-icons (i.e., initial sub-icons or target sub-icons)) and background images into one image, and then use CSS background positioning (i.e., the background-position attribute and background-size attribute in CSSbackground) to display the image (i.e., the merged background image) to display the part of the image that needs to be displayed. Among them, the merged background image can include one or more sub-icons. Usually, the merged background image includes at least two sub-icons. It should be understood that the embodiment of the present application does not limit the number of sub-icons in the merged background image. In addition, the embodiment of the present application does not limit the arrangement position of the sub-icons in the merged background image.

[0070] It should be understood that using sprite images can reduce the number of HTTP (Hyper Text Transfer Protocol) requests sent to the server 2000 when the target user terminal loads images in the web page, and directly use the previously obtained sprite images from the local terminal, thereby improving the page loading speed.

[0071] It is understood that the initial webpage and the target webpage can be webpages with different scaling ratios (i.e., resolutions). On the one hand, different display devices have different resolutions, and therefore, the initial webpage can have different display effects on display devices with different resolutions. It should be understood that in the embodiments of the present application, the initial webpages displayed on different display devices can be collectively referred to as target webpages. On the other hand, the same display device can adjust the resolution of the webpage to generate target webpages with different display effects. Therefore, the initial webpage can have different display effects on the same display device.

[0072] Currently, web development on mobile and PCs is gradually supporting responsiveness and Retina displays. This requirement also arises when using SVG sprites. When sprite elements also need to support responsiveness, the problem of "how to synchronously scale the background image from the sprites as the element size changes" needs to be solved. This provides automatically scalable sprite images for responsive development and Retina adaptation. Retina is a display technology that compresses more pixels onto a single screen, achieving higher resolution and enhancing the detail of the screen display. Responsiveness is the ability for a website to be compatible with multiple devices, rather than having a specific version for each device. This provides a more comfortable interface and a better user experience for users of different devices. Retina screens require multiple image sizes within the same space.

[0073] Therefore, the present embodiment can solve the problem of CSS background sprites not being able to responsively adjust to changes in resolution by calculating and resetting the horizontal and vertical values ​​of the background (i.e., the offset distance) and the overall sprite image size (i.e., the target merged background image) in either responsive or adaptive situations. Responsiveness can represent different states of the sub-icon, and adaptiveness can represent different positions of the sub-icon.

[0074] The specific process of the target user terminal displaying the web page and sub-icon in the browser can be found in the following Figure 2a and Figure 2b The corresponding embodiment.

[0075] For further understanding, please refer to Figure 2a and Figure 2b , Figure 2a and Figure 2b This is a schematic diagram of a data interaction scenario provided by an embodiment of the present application. Figure 2a and Figure 2bThe server 20a shown may be the above Figure 1 The server 2000 in the corresponding embodiment is as follows: Figure 2a and Figure 2b The user terminal 20b shown can be the above Figure 1 Any user terminal in the user terminal cluster of the corresponding embodiment, such as Figure 2a The user terminal 20c shown can be the above Figure 1 For ease of understanding, the embodiment of the present application is based on the above Figure 1 The user terminal 3000n shown in the figure is taken as the user terminal 20b as an example. Figure 1 The user terminal 3000a shown is used as an example of the user terminal 20c to illustrate Figure 2a and Figure 2b The specific process of data interaction between the server 20a, the user terminal 20b and the user terminal 20c is shown in FIG.

[0076] The user terminal 20b and the user terminal 20c each include a display device (i.e., a display screen). The display devices on the user terminal 20b and the user terminal 20c may have different resolutions or the same resolution. Here, the user terminal 20b and the user terminal 20c have different resolutions as an example for description. Figure 2a As shown, user terminal 20b and user terminal 20c can each obtain an initial webpage from server 20a and display the obtained initial webpage on their respective display devices. It is understood that user terminal 20b and user terminal 20c can each determine a scaling factor for the initial webpage based on the resolution of their respective display devices, and then scale the initial webpage obtained from server 20a based on the scaling factor to obtain a target webpage, which can then be displayed in the browsers on their respective terminals.

[0077] like Figure 2aAs shown, the target web page displayed in the browser of the user terminal 20b may be a web page 21a, which may include a target container 21b, and the target container 21b may include a target sub-icon 21d. The initial web page includes an initial container for displaying the initial sub-icon in the initial merged background image, and the web page 21a in the user terminal 20b includes a target container 21b for displaying the target sub-icon 21d in the target merged background image (for example, the target merged background image T1). The target merged background image T1 is obtained by scaling the initial merged background image, and the target sub-icon 21d is obtained by scaling the initial sub-icon. The size ratio relationship between the target sub-icon 21d and the target container 21b is the same as the size ratio relationship between the initial sub-icon and the initial container.

[0078] like Figure 2a As shown, the target web page of the browser of the user terminal 20c may include a target container 21c, and the target container 21c may include a target sub-icon 21e. The initial web page includes an initial container for displaying the initial sub-icon in the initial merged background image, and the target web page in the user terminal 20c includes a target container 21c for displaying the target sub-icon 21e in the target merged background image (for example, the target merged background image T2). The target merged background image T2 is obtained by scaling the initial merged background image, and the target sub-icon 21e is obtained by scaling the initial sub-icon. The size ratio relationship between the target sub-icon 21e and the target container 21c is the same as the size ratio relationship between the initial sub-icon and the initial container.

[0079] It will be appreciated that target merged background image T1 and target merged background image T2 are obtained by synchronously scaling the initial merged background image according to different scaling ratios. Therefore, the size ratio between target sub-icon 21d and target container 21b is the same as the size ratio between target sub-icon 21e and target container 21c. In this case, the webpage displayed on user terminal 20b and the webpage displayed on user terminal 20c can be collectively referred to as the target webpage.

[0080] like Figure 2bWeb page 21a and web page 22a shown may be target web pages corresponding to the same initial web page at different times. For example, web page 21a may be the target web page displayed by user terminal 20b at time T1, and web page 22a may be the target web page displayed by user terminal 20b at time T2, where time T2 may be the time immediately after time T1. Web pages 21a and 22a have different resolutions. For ease of understanding, in this embodiment of the present application, web page 21a at time T1 may be referred to as the initial web page, and web page 22a at time T2 may be referred to as the target web page. That is, web page 22a is the web page obtained by scaling web page 21a.

[0081] like Figure 2b As shown, user 20d can perform a zoom operation on web page 21a. In this way, user terminal 20b can respond to the zoom operation performed by user 20d on web page 21a, obtain the zoom ratio indicated by the zoom operation, and determine the zoom ratio indicated by the zoom operation as the zoom ratio of the initial web page (i.e., web page 21a). Furthermore, user terminal 20b can zoom web page 21a according to the zoom ratio to obtain the target web page (i.e., web page 22a). The zoom operation here can include contact operations such as clicking, long pressing, and sliding, and can also include non-contact operations such as voice and gestures, which are not limited in this application.

[0082] like Figure 2b As shown, web page 22a may include a target container 22b, and target container 22b may include a target sub-icon 22c. The initial web page (i.e., web page 21a) includes initial containers (i.e., target container 21b, initial container 21b) for displaying initial sub-icons (i.e., target sub-icon 21d, initial sub-icon 21d) in an initial merged background image (i.e., target merged background image T1, initial merged background image T1). The web page 22a in user terminal 20b includes a target container 22b for displaying a target sub-icon 22c in a target merged background image (e.g., target merged background image T3). Target merged background image T3 is obtained by scaling initial merged background image T1, and target sub-icon 22c is obtained by scaling initial sub-icon 21d. The size ratio between target sub-icon 22c and target container 22b is the same as the size ratio between initial sub-icon 21d and initial container 21b.

[0083] It can be understood that the target merged background image T1 (ie, the initial merged background image T1) and the target merged background image T3 are obtained by synchronously scaling the initial merged background image according to different scaling ratios.

[0084] It can be seen from this that the embodiment of the present application can achieve proportional responsive scaling of the initial container and the initial merged background image according to the scaling ratio of the initial web page, thereby obtaining a target container and a target merged background image. Among them, the initial sub-icon in the initial merged background image can be adapted to the initial container, and the target sub-icon in the target merged background image can be adapted to the target container. Therefore, by determining the offset distance of the target merged background image relative to the target container, the target sub-icon obtained by scaling the initial sub-icon can be displayed in the target container, thereby displaying the sprite image normally in web pages of different resolutions.

[0085] Further, see Figure 3 , Figure 3 This is a flow chart of a data processing method provided by an embodiment of the present application. The method can be executed by a server, or by a user terminal, or by both a server and a user terminal. The server can be the above-mentioned Figure 2a and Figure 2b The corresponding implementation of the server 20a, the user terminal can be the above Figure 2a and Figure 2b For ease of understanding, the present application embodiment takes the method executed by the user terminal as an example for explanation. The data processing method may include the following steps S101 to S104:

[0086] Step S101, obtaining a zoom ratio of an initial webpage, and scaling the initial webpage according to the zoom ratio to obtain a target webpage;

[0087] Specifically, the user terminal can obtain the zoom ratio of the initial web page. The zoom ratio of the initial web page includes the horizontal zoom ratio of the web page and the vertical zoom ratio of the web page. Furthermore, the user terminal can determine the target web page width parameter based on the horizontal zoom ratio of the web page and the initial web page width parameter of the initial web page; the user terminal can determine the target web page height parameter based on the vertical zoom ratio of the web page and the initial web page height parameter of the initial web page. Furthermore, the user terminal can perform zoom processing on the initial web page based on the target web page width parameter and the target web page height parameter to obtain the target web page. The initial web page includes an initial container for displaying the initial sub-icon in the initial merged background image.

[0088] It is understood that, in response to a zoom operation on the initial webpage, the user terminal may obtain the zoom ratio indicated by the zoom operation, and determine the zoom ratio indicated by the zoom operation as the zoom ratio of the initial webpage. Optionally, the user terminal may obtain a display device used to display the initial webpage, and determine the zoom ratio of the initial webpage based on the resolution of the display device. Optionally, in response to a transformation operation on the browser, the user terminal may determine the zoom ratio indicated by the transformation operation as the zoom ratio of the initial webpage. That is, the user terminal may determine the resolution of the webpage based on the browser size, where the resolution of the webpage is determined by the zoom ratio.

[0089] Among them, the initial webpage and the target webpage can be the names of the same webpage at different times. The target webpage is obtained by scaling the initial webpage. The target webpage at the previous moment can be used as the initial webpage at the current moment, and the target webpage at the current moment can be used as the initial webpage at the next moment.

[0090] The width of the target webpage is the target webpage width parameter, and the height of the target webpage is the target webpage height parameter. That is, the user terminal can directly use the target webpage width parameter and the target webpage height parameter as the width and height of the target webpage.

[0091] Step S102, performing synchronous scaling processing on the initial container according to the size of the target webpage to obtain a target container;

[0092] Specifically, the user terminal can obtain container configuration parameters for the initial container and determine target container width and height parameters based on the size of the target webpage and the container configuration parameters. Furthermore, the user terminal can synchronously scale the initial container based on the target container width and height parameters to obtain the target container.

[0093] The specific process of determining the target container width parameter and the target container height parameter according to the size of the target web page and the container configuration parameters can be found in the following. Figure 8 The description of step S202 in the corresponding embodiment.

[0094] The width of the target container is the target container width parameter, and the height of the target container is the target container height parameter. That is, the user terminal can directly use the target container width parameter and the target container height parameter as the width and height of the target container.

[0095] Step S103, performing synchronous scaling processing on the initial merged background image according to the size of the target container to obtain a target merged background image;

[0096] Specifically, the user terminal can determine the target image width parameter based on the size ratio relationship between the initial sub-icon and the initial container, and the target container width parameter indicated by the size of the target container. Further, the user terminal can determine the target image height parameter based on the size ratio relationship between the initial sub-icon and the initial container, and the target container height parameter indicated by the size of the target container. Furthermore, the user terminal can synchronously scale the initial merged background image based on the target image width parameter and the target image height parameter to obtain the target merged background image. The target merged background image includes a target sub-icon, which is obtained by scaling the initial sub-icon; the size ratio relationship between the target sub-icon and the target container is the same as the size ratio relationship between the initial sub-icon and the initial container.

[0097] It is understandable that the user terminal can determine the target icon width parameter of the target sub-icon based on the size ratio relationship between the initial sub-icon and the initial container, and the target container width parameter indicated by the size of the target container, and then determine the target image width parameter of the target merged background image based on the target icon width parameter. Similarly, the user terminal can determine the target icon height parameter of the target sub-icon based on the size ratio relationship between the initial sub-icon and the initial container, and the target container height parameter indicated by the size of the target container, and then determine the target image height parameter of the target merged background image based on the target icon height parameter. Among them, the initial sub-icon can be scaled along with the initial merged background image to obtain the target sub-icon in the target merged background image.

[0098] In other words, the user terminal can determine the target image width parameter of the target merged background image based on the size ratio between the initial image width parameter and the initial container, as well as the target container width parameter indicated by the size of the target container. Similarly, the user terminal can determine the target image height parameter of the target merged background image based on the size ratio between the initial image height parameter and the initial container, as well as the target container height parameter indicated by the size of the target container.

[0099] Among them, the width of the target merged background image is the target image width parameter, and the height of the target merged background image is the target image height parameter, that is, the user terminal can directly use the target image width parameter and the target image height parameter as the width and height of the target merged background image.

[0100] By setting the background-size property on a container, you can determine the size of the background image, that is, the image displayed in the container (i.e., the target merged background image). The background-size property is initialized in the format of "background-size: horizontal distance vertical distance." The horizontal distance can be the target container width parameter, and the vertical distance can be the target container height parameter.

[0101] Step S104 , obtaining the offset ratio between the initial merged background image and the initial container, determining the offset distance corresponding to the target merged background image according to the offset ratio, and moving the target merged background image according to the offset distance.

[0102] Specifically, the user terminal can obtain the offset ratio between the initial merged background image and the initial container. The offset ratio includes a horizontal offset ratio and a vertical offset ratio; the offset distance (i.e., the target offset distance) includes a target horizontal offset distance and a target vertical offset distance. Furthermore, the user terminal can obtain target image parameters of the target merged background image and target container parameters of the target container. The target image parameters include a target image width parameter and a target image height parameter; and the target container parameters include a target container width parameter and a target container height parameter. Furthermore, the user terminal can determine the target horizontal offset distance corresponding to the target merged background image based on the horizontal offset ratio, the target image width parameter, and the target container width parameter. Furthermore, the user terminal can determine the target vertical offset distance corresponding to the target merged background image based on the vertical offset ratio, the target image height parameter, and the target container height parameter. Furthermore, the user terminal can move the target merged background image according to the target horizontal offset distance and the target vertical offset distance. After the move, the target sub-icon in the target merged background image is within the target container, i.e., the target container is used to display the target sub-icon in the target merged background image.

[0103] It is understandable that the user terminal may determine the difference between the target image width parameter and the target container width parameter as the target width parameter, and further determine the target horizontal offset distance corresponding to the target merged background image as the ratio between the horizontal offset ratio and the target width parameter. Similarly, the user terminal may determine the difference between the target image height parameter and the target container height parameter as the target height parameter, and further determine the target vertical offset distance corresponding to the target merged background image as the ratio between the vertical offset ratio and the target height parameter.

[0104] It should be understood that the user terminal can, based on the origin (i.e., the initial horizontal offset distance and the initial vertical offset distance are both 0), move the initial merged background image horizontally relative to the initial container by the initial horizontal offset distance, and move the initial merged background image vertically relative to the initial container by the initial vertical offset distance, so as to display the initial sub-icon in the initial merged background image in the initial container. Similarly, the user terminal can, based on the origin (i.e., the target horizontal offset distance and the target vertical offset distance are both 0), move the target merged background image horizontally relative to the target container by the target horizontal offset distance, and move the target merged background image vertically relative to the target container by the target vertical offset distance, so as to display the target sub-icon in the target merged background image in the target container.

[0105] Optionally, the user terminal may determine a lateral offset difference based on the initial lateral offset distance and the target lateral offset distance; and may determine a longitudinal offset difference based on the initial longitudinal offset distance and the target longitudinal offset difference. Furthermore, based on the initial lateral offset distance and the initial longitudinal offset distance, the user terminal may shift the target merged background image horizontally relative to the target container by the lateral offset difference, and vertically relative to the target container by the longitudinal offset difference, so as to display the target sub-icon in the target merged background image in the target container.

[0106] By setting the background-position property on a container, you can determine the position of the background image, effectively controlling the portion of the sprite image (i.e., the target sub-icon) displayed within the container. The background-position property is initialized in the format "background-position:horizontal percentage vertical percentage." The percentage value is the percentage of the background image relative to the background positioning area (i.e., the container). The horizontal percentage can be a horizontal offset ratio, and the vertical percentage can be a vertical offset ratio.

[0107] Among them, it can be understood that the background-position value can use percentage values, keywords (for example, top, bottom, left, right, center) and pixel values ​​(i.e. length) as parameters. Keywords can be understood as special forms of percentage values, and the calculation methods of the two are the same. However, the calculation methods of percentage values ​​and pixel values ​​are different. The reference point of pixel values ​​is the upper left corner of the image, and the reference point of percentage values ​​changes with the value. For ease of understanding, taking "background-position:30px 40px;" as an example, the calculation method is: the upper left corner of the sprite image is offset 30px to the right and 40px downward relative to the upper left corner of the container element. Therefore, this application needs to control the automatic response of the sprite image by setting a percentage.

[0108] For easier understanding, see Figure 4 , Figure 4 This is a schematic diagram of a scenario for determining the size and position of an image provided by an embodiment of the present application. Figure 4 As shown, container 40a may be the initial container in the initial webpage, container 40b may be the target container in the target webpage, and container 40b is obtained by scaling container 40a. Figure 4 As shown, the merged background image 40c may be an initial merged background image, and the merged background image 40d may be a target merged background image. The merged background image 40d is obtained by scaling the merged background image 40c.

[0109] The merged background image 40c may include one or more sub-icons, one of which may include a sub-icon 41a. This sub-icon 41a may be the initial sub-icon displayed in the container 40a. The merged background image 40d may include one or more sub-icons, one of which may include a sub-icon 41b. This sub-icon 41b may be the target sub-icon displayed in the container 40b. It is understood that the sub-icon 41a may be scaled as the merged background image 40c is scaled. That is, the sub-icon 41b is the result of scaling the sub-icon 41a. The size ratio between the sub-icon 41b and the container 40b is the same as the size ratio between the sub-icon 41a and the container 40a.

[0110] like Figure 4As shown, when the user terminal zooms in and out of the initial webpage, it can also zoom in and out of the container 40a in the initial webpage, thereby obtaining a target webpage including the container 40b. It is understood that the sub-icon 41a can be displayed in the container 40a by the initial offset distance, and the sub-icon 41b can be displayed in the container 40b by the target offset distance.

[0111] For easier understanding, see Figure 5 , Figure 5 This is a flow chart of a technical solution provided by the embodiment of this application. Figure 5 The steps S51 to S54 shown may correspond to the above steps S102 to S104. After executing step S101, the user terminal may execute steps S51 to S54.

[0112] like Figure 5 As shown, the user terminal can execute step S51, and through step S51, the container element can be set, that is, the initial container is scaled to obtain the target container. Further, the user terminal can execute step S52, and through step S52, the initial background image size can be set, that is, the initial merged background image is scaled to obtain the target merged background image. Further, the user terminal can execute step S53, and through step S53, the background image position can be calculated, that is, according to the set offset ratio, the target horizontal offset distance and the target vertical offset distance corresponding to the target merged background image are determined, and then step S54 is executed, and the application part of the data processing method provided in this application can be realized through step S54, that is, the target merged background image is moved according to the target horizontal offset distance and the target vertical offset distance to obtain the moved target merged background image.

[0113] It can be seen from this that the embodiment of the present application can implement responsive scaling of the container and the merged background image when the resolution of the web page changes. The responsive scaling here can maintain the size ratio relationship between the merged background image and the container, that is, maintain the size ratio relationship between the sub-icons in the merged background image and the container. Among them, the initial web page can be the web page before the scaling process, and the target web page can be the web page after the scaling process; the initial container can be the container before the scaling process, and the target container can be the container after the scaling process; the initial merged background image can be the merged background image before the scaling process, and the target merged background image can be the merged background image after the scaling process. It can be understood that by scaling the initial merged background image, the initial sub-icon in the initial merged background image can be scaled to obtain a target merged background image containing the target sub-icon. Therefore, after the target container and the target merged background image are obtained by scaling, the target sub-icon obtained by scaling the initial sub-icon can be displayed normally in the target container through the displacement (i.e., offset distance) of the target merged background image relative to the target container, thereby displaying the sprite normally in web pages with different resolutions.

[0114] Further, see Figure 6 , Figure 6 This is a flow chart of a data processing method provided by an embodiment of the present application. The data processing method may include the following steps S1041-S1043, and steps S1041-S1043 are Figure 3 A specific embodiment of step S104 in the corresponding embodiment.

[0115] Step S1041, obtaining initial image parameters of the initial merged background image, initial offset distance of the initial sub-icon relative to the initial merged background image, and initial container parameters of the initial container;

[0116] The initial image parameters include the initial image width and initial image height; the initial offset distance includes the initial horizontal offset distance and initial vertical offset distance; and the initial container parameters include the initial container width and initial container height. The initial image width is the width of the initial merged background image, and the initial image height is the height of the initial merged background image; the initial container width is the width of the initial container, and the initial container height is the height of the initial container.

[0117] Step S1042: determining the offset ratio between the initial merged background image and the initial container according to the initial image parameters, the initial offset distance, and the initial container parameters;

[0118] Specifically, the user terminal may determine the horizontal offset ratio between the initial merged background image and the initial container based on the initial image width parameter, the initial horizontal offset distance, and the initial container width parameter. Furthermore, the user terminal may determine the vertical offset ratio between the initial merged background image and the initial container based on the initial image height parameter, the initial vertical offset distance, and the initial container height parameter. Furthermore, the user terminal may determine the horizontal offset ratio and the vertical offset ratio as the offset ratio between the initial merged background image and the initial container.

[0119] It is understood that the specific process by which the user terminal determines the horizontal offset ratio can be described as follows: the user terminal may determine the difference between the initial image width parameter and the initial container width parameter as the initial width parameter. Furthermore, the user terminal may determine the ratio between the initial horizontal offset distance and the initial width parameter as the horizontal offset ratio between the initial merged background image and the initial container.

[0120] Similarly, the specific process for the user terminal to determine the vertical offset ratio can be described as follows: the user terminal may determine the difference between the initial image height parameter and the initial container height parameter as the initial height parameter. Furthermore, the user terminal may determine the ratio between the initial vertical offset distance and the initial height parameter as the vertical offset ratio between the initial merged background image and the initial container.

[0121] The dimensions of the container element (i.e., the initial container) are elW*elH, the dimensions of a single image (i.e., the initial sub-icon) are imgW*imgH, the dimensions of a sprite image (i.e., the Sprites image, the initial merged background image) are spritesW*spritesH, and the position of a single image on the sprite image are imgPosX and imgPosY. elW represents the width of the container element (i.e., the initial container width parameter), and elH represents the height of the container element (i.e., the initial container height parameter); imgW represents the width of a single image (i.e., the initial icon width parameter), and imgH represents the height of a single image (i.e., the initial icon height parameter); spritesW represents the width of the sprite image (i.e., the initial image width parameter), and spritesH represents the height of the sprite image (i.e., the initial image height parameter); imgPosX represents the initial horizontal offset between a single image and the container element, and imgPosY represents the initial vertical offset between a single image and the container element.

[0122] Assuming there is an unknown point, the position of the unknown point can be expressed as (x, y). Then, the distance between the (x, y) point on the container and the upper left corner of the container is cX and cY, and the distance between the (x, y) point on the sprite and the upper left corner of the single image is sX and sY. In this embodiment of the application, x (i.e., x%) and y (i.e., y%) are percentage values ​​for illustration. The (x, y) point can represent any point on the container, and the (x, y) point can represent any point on a single image in the sprite.

[0123] Therefore, based on the above information, cX and sX can be expressed as follows:

[0124] cX=elW*x (1)

[0125] sX=spritesW*x-imgPosX (2)

[0126] If you want to display a single image completely within a container element, you can derive the following formulas (3) and (4):

[0127] cX=sX (3)

[0128] elW=imgW (4)

[0129] Wherein, formula (3) indicates that the width from point (x, y) to the container is equal to the width from point (x, y) to a single image, and formula (4) indicates that the width of the container is equal to the width of a single image.

[0130] According to the above formulas (1), (2) and (3), the following formula (5) can be derived:

[0131] elW*x=spritesW*x-imgPosX (5)

[0132] After solving the equation (5), we can get the following calculation formula (6):

[0133] x=imgPosX / (spritesW-elW) (6)

[0134] Substituting formula (4) into formula (6) yields the following formula (7):

[0135] x=imgPosX / (spritesW-imgW) (7)

[0136] Similarly, based on the above information, cY and sY can be expressed as follows:

[0137] cY=elH*y (8)

[0138] sY=spritesH*y-imgPosY (9)

[0139] If you want to display a single image completely within a container element, you can derive the following formulas (10) and (11):

[0140] cY=sY (10)

[0141] elH=imgH (11)

[0142] Wherein, formula (10) indicates that the height from point (x, y) to the container is equal to the height from point (x, y) to the single image, and formula (11) indicates that the height of the container is equal to the height of the single image.

[0143] According to the above formulas (8), (9) and (10), the following formula (12) can be derived:

[0144] elH*y=spritesH*y-imgPosY (12)

[0145] After solving equation (12), we can get the following calculation formula (13):

[0146] y=imgPosY / (spritesH-elH) (13)

[0147] Substituting formula (11) into formula (13), we can obtain the following formula (14):

[0148] y=imgPosY / (spritesH-imgH) (14)

[0149] Therefore, the x in (x, y) is the horizontal offset ratio, and the y in (x, y) is the vertical offset ratio. spritesW-elW can represent the difference between the initial image width parameter and the initial container width parameter (i.e., the initial width parameter), imgPosX / (spritesW-elW) can represent the ratio between the initial horizontal offset distance and the initial width parameter; spritesH-elH can represent the difference between the initial image height parameter and the initial container height parameter (i.e., the initial height parameter), and imgPosY / (spritesH-elH) can represent the ratio between the initial vertical offset distance and the initial height parameter.

[0150] For easier understanding, see Figure 7 , Figure 7 This is a schematic diagram of a structure of a combined background image and container provided by an embodiment of the present application. Figure 7As shown, the merged background image 74a can be the initial merged background image, and the container 74b can be the initial container. Here, the initial merged background image includes a sub-icon as an example for explanation, and the container 74b can be used to display an initial sub-icon in the merged background image 74a.

[0151] like Figure 7 As shown, parameter 70a may represent the width of container 74b (i.e., elW), parameter 70b may represent the height of container 74b (i.e., elH), parameter 71a may represent the width of the merged background image 74a (i.e., spritesW), parameter 71b may represent the height of the merged background image 74a (i.e., spritesH), parameter 72a may represent the width of the initial sub-icon (i.e., imgW), and parameter 72b may represent the height of the initial sub-icon (i.e., imgH).

[0152] like Figure 7 As shown, merged background image 74a may include point 73b and point 73a, with the distance between point 73b and point 73a being sX and sY, the distance between point 73a and the upper left corner of the sprite image being imgPosX and imgPosY, and the distance between point 73b and the upper left corner of the sprite image being (imgPosX+sX) and (imgPosY+sY). Container 74b may include point 73c, with the distance between point 73c and the upper left corner of the container being cX and cY.

[0153] Step S1043 : determining an offset distance corresponding to the target merged background image according to the offset ratio, and moving the target merged background image according to the offset distance.

[0154] Substituting the initialization data (i.e., the horizontal offset ratio, the target image width parameter, and the target container width parameter) into the above formula (6) or formula (7) can determine the target horizontal offset distance; substituting the initialization data (i.e., the vertical offset ratio, the target image height parameter, and the target container height parameter) into the above formula (13) or formula (14) can determine the target vertical offset distance. Therefore, the target horizontal offset distance and the target vertical offset distance can be used to complete the proportional sprite positioning.

[0155] The specific process of the user terminal determining the offset distance corresponding to the target merged background image can be found in the above Figure 3 The description of step S104 in the corresponding embodiment will not be repeated here.

[0156] It can be seen from this that the embodiment of the present application can determine the offset ratio between the initial merged background image and the initial container based on the initial image parameters of the initial merged background image, the initial offset distance of the initial sub-icon relative to the initial merged background image, and the initial container parameters of the initial container, and then determine the offset distance between the target merged background image and the target container based on the offset ratio, and move the target merged background image according to the offset distance. Therefore, the embodiment of the present application can determine the offset ratio between the target merged background image and the target container based on the offset ratio between the initial merged background image and the initial container, and then determine the offset distance between the target merged background image and the target container, thereby solving the problem of the initial merged background image responsively adjusting according to the resolution change of the initial container, so as to display the sprite image (the target sub-icon in it) normally in web pages with different resolutions.

[0157] Further, see Figure 8 , Figure 8 This is a flow chart of a data processing method provided by an embodiment of the present application. The method can be executed by a server, or by a user terminal, or by both a server and a user terminal. The server can be the above-mentioned Figure 2a and Figure 2b The corresponding implementation of the server 20a, the user terminal can be the above Figure 2a and Figure 2b For ease of understanding, the present application embodiment takes the method executed by the user terminal as an example for explanation. The data processing method may include the following steps S201-S207:

[0158] Step S201, obtaining a zoom ratio of an initial webpage, and scaling the initial webpage according to the zoom ratio to obtain a target webpage;

[0159] The initial webpage includes an initial container for displaying the initial sub-icons in the initial merged background image.

[0160] The specific process of the user terminal scaling the initial web page can be found in the above Figure 3 The description of step S101 in the corresponding embodiment will not be repeated here.

[0161] Step S202: Obtain container configuration parameters for the initial container, and determine target container width parameters and target container height parameters according to the size of the target webpage and the container configuration parameters;

[0162] Specifically, the user terminal can obtain the containing block width ratio, containing block height ratio, and containing block padding ratio for the initial container. The container configuration parameters include the containing block width ratio, containing block height ratio, and containing block padding ratio. Furthermore, the user terminal can determine the target container width parameter based on the webpage width parameter indicated by the size of the target webpage and the containing block width ratio. Furthermore, the user terminal can determine the target container height parameter based on the webpage height parameter indicated by the size of the target webpage, the containing block height ratio, and the containing block padding ratio.

[0163] Optionally, the user terminal may determine the target container height parameter based on the webpage width parameter indicated by the size of the target webpage, as well as the containing block height ratio and the containing block padding ratio. It is understandable that the webpage width parameter and the webpage height parameter can be used to determine the width and height of the containing block, and then the target container width parameter and the target container height parameter can be determined based on the width and height of the containing block. The "containing block of a box (i.e., container)" refers to "the containing block in which the box is located", rather than the containing block it creates.

[0164] It's understood that the containing block width ratio and the containing block padding ratio are tied to the containing block width. Therefore, the target container width parameter can be determined by multiplying the containing block width by the containing block width ratio. The first container height parameter can be determined by multiplying the containing block width by the containing block padding ratio, and the second container height parameter can be determined by multiplying the containing block width by the containing block padding ratio. Therefore, the target container height parameter can be determined by adding the first and second container height parameters.

[0165] It is understandable that the user terminal can set an HTML (Hypertext Markup Language) element (i.e., a Sprite container) to maintain an unchanged aspect ratio when the element is scaled. The setting code can be expressed as ".box{width:z1;height:0;padding-top:z2;}". The aspect ratio z1:z2 caused by this setting code, where z1 and z2 can be the same value or different values, is not limited here. ".box" indicates that the style of the element with class="box" is set. For example, the setting code can be expressed as ".box{width:10%;height:0;padding-top:10%;}". The aspect ratio caused by the code ".box{width:10%;height:0;padding-top:10%;}" is 1:1. For another example, the setting code can be expressed as “.box{width:10%;height:0;padding-top:20%;}”. The aspect ratio caused by the code “.box{width:10%;height:0;padding-top:20%;}” is 1:2.

[0166] Among them, width can be expressed as the ratio of the containing block width, height can be expressed as the ratio of the containing block height, and padding-top can be expressed as the ratio of the containing block padding. In other words, the width of the container can be set by the ratio of the containing block width, the height of the container can be set by the ratio of the containing block height, and the top padding of the container can be set by the ratio of the containing block padding. The width of the container and the top padding of the container together determine the final width of the container.

[0167] It is understandable that flexible settings of width, height, and padding-top can keep the aspect ratio of HTML elements unchanged. The vertical padding-top value is calculated based on the width of the element's containing block. If the width is 10% of the containing block width, the height is 0, and the padding-top value is 10% or 20%, then the final width is 10% of the containing block width, and the final height is 10% of the containing block width or 20% of the containing block width, then the ratio is 1:1 or 1:2.

[0168] Step S203: Based on the target container width parameter and the target container height parameter, the initial container is synchronously scaled to obtain the target container;

[0169] Specifically, the user terminal can determine a horizontal scaling ratio (i.e., a horizontal scaling ratio of the container) based on the target container width parameter and the initial container width parameter of the initial container. Furthermore, the user terminal can determine a vertical scaling ratio (i.e., a vertical scaling ratio of the container) based on the target container height parameter and the initial container width parameter of the initial container. Furthermore, the user terminal can synchronously scale the initial container based on the horizontal scaling ratio and the vertical scaling ratio to obtain the target container.

[0170] The target container width parameter can be obtained by scaling the initial container width parameter by the container horizontal scaling ratio, and the target container height parameter can be obtained by scaling the initial container height parameter by the container vertical scaling ratio.

[0171] Step S204 , determining a target image width parameter according to the size ratio relationship between the initial sub-icon and the initial container, and a target container width parameter indicated by the size of the target container;

[0172] The specific process of the user terminal determining the target image width parameter can be found in the above Figure 3 The description of step S103 in the corresponding embodiment will not be repeated here.

[0173] Step S205 , determining a target image height parameter according to the size ratio relationship between the initial sub-icon and the initial container, and a target container height parameter indicated by the size of the target container;

[0174] The specific process of the user terminal determining the target image high parameters can be found in the above Figure 3 The description of step S103 in the corresponding embodiment will not be repeated here.

[0175] Step S206: Based on the target image width parameter and the target image height parameter, synchronously scale the initial merged background image to obtain a target merged background image;

[0176] Specifically, the user terminal can determine the horizontal scaling ratio (i.e., the horizontal scaling ratio of the image) based on the target image width parameter and the initial image width parameter of the initial merged background image. Furthermore, the user terminal can determine the vertical scaling ratio (i.e., the vertical scaling ratio of the image) based on the target image height parameter and the initial image height parameter of the initial merged background image. Furthermore, the user terminal can synchronously scale the initial merged background image based on the horizontal scaling ratio and the vertical scaling ratio to obtain the target merged background image.

[0177] The target image width parameter can be obtained by scaling the initial image width parameter by the horizontal scaling ratio of the image, and the target image height parameter can be obtained by scaling the initial image height parameter by the vertical scaling ratio of the image.

[0178] Step S207 , obtaining the offset ratio between the initial merged background image and the initial container, determining the offset distance corresponding to the target merged background image according to the offset ratio, and moving the target merged background image according to the offset distance.

[0179] The target sub-icon in the moved target merged background image is located in the target container.

[0180] The specific process of the user terminal determining the offset ratio can be found in the above Figure 6 The description of steps S1041-S1042 in the corresponding embodiment will not be repeated here. The specific process of the user terminal determining the offset distance can be found in the above Figure 3 The description of step S104 in the corresponding embodiment will not be repeated here.

[0181] It can be seen from this that the embodiment of the present application can achieve proportional responsive scaling of the container through the containing block feature of the container element, and at the same time achieve proportional responsive scaling of the merged background image (i.e., sprite image), and then adapt the background displacement of the sprite image through background technology, thereby solving the problem that the background sprite image cannot be responsively adjusted according to the resolution change, improving the universality of the application of sprite images in mobile web pages, improving the efficiency of responsive development, and reducing the number of HTTP requests, so that the sprite images can be displayed normally in web pages with different resolutions.

[0182] Further, see Figure 9 , Figure 9 : is a structural diagram of a data processing device provided in an embodiment of the present application. The data processing device 4000 can be a computer program (including program code) running in a computer device, for example, the data processing device 4000 is an application software; the data processing device 4000 can be used to execute the corresponding steps of the method provided in an embodiment of the present application. Figure 9 As shown, the data processing device 4000 can be run on a user terminal, which can be the above-mentioned Figure 2a and Figure 2b The data processing device 4000 may include: a webpage determination module 10, a container determination module 20, an image determination module 30, and a distance movement module 40;

[0183] The webpage determination module 10 is used to obtain a zoom ratio of the initial webpage and scale the initial webpage according to the zoom ratio to obtain a target webpage; the initial webpage includes an initial container for displaying initial sub-icons in the initial merged background image;

[0184] The webpage determining module 10 is specifically configured to obtain a display device for displaying the initial webpage, and determine a zoom ratio of the initial webpage according to a resolution of the display device.

[0185] The webpage determining module 10 is specifically configured to, in response to a zoom operation on the initial webpage, obtain a zoom ratio indicated by the zoom operation, and determine the zoom ratio indicated by the zoom operation as the zoom ratio of the initial webpage.

[0186] The container determination module 20 is used to synchronously scale the initial container according to the size of the target web page to obtain a target container;

[0187] The container determination module 20 includes: a parameter determination unit 201, a first scaling unit 202;

[0188] The parameter determination unit 201 is configured to obtain container configuration parameters for the initial container and determine a target container width parameter and a target container height parameter according to the size of the target webpage and the container configuration parameters;

[0189] Among them, the container configuration parameters include the containing block width ratio, the containing block height ratio, and the containing block padding ratio;

[0190] The parameter determination unit 201 is specifically configured to obtain a containing block width ratio, a containing block height ratio, and a containing block padding ratio for the initial container;

[0191] The parameter determination unit 201 is specifically configured to determine a target container width parameter according to a webpage width parameter indicated by the size of the target webpage and a containing block width ratio;

[0192] The parameter determination unit 201 is specifically configured to determine the target container height parameter according to the webpage height parameter indicated by the size of the target webpage, the containing block height ratio, and the containing block padding ratio.

[0193] The first scaling unit 202 is configured to perform synchronous scaling processing on the initial container based on the target container width parameter and the target container height parameter to obtain the target container.

[0194] The specific implementation of the parameter determination unit 201 and the first scaling unit 202 can be found in the above Figure 3 In the corresponding embodiment, steps S102 and Figure 8 The description of steps S202 to S203 in the corresponding embodiment will not be repeated here.

[0195] The image determination module 30 is configured to synchronously scale the initial merged background image according to the size of the target container to obtain a target merged background image; the target merged background image includes a target sub-icon, which is a result of scaling the initial sub-icon; the size ratio between the target sub-icon and the target container is the same as the size ratio between the initial sub-icon and the initial container;

[0196] The picture determination module 30 includes: a first determination unit 301, a second determination unit 302, and a second scaling unit 303;

[0197] The first determining unit 301 is configured to determine a target image width parameter according to a size ratio relationship between the initial sub-icon and the initial container and a target container width parameter indicated by a size of the target container;

[0198] The second determining unit 302 is configured to determine a target image height parameter according to a size ratio relationship between the initial sub-icon and the initial container and a target container height parameter indicated by a size of the target container;

[0199] The second scaling unit 303 is configured to perform synchronous scaling processing on the initial merged background image based on the target image width parameter and the target image height parameter to obtain a target merged background image.

[0200] The second scaling unit 303 is specifically configured to determine a horizontal scaling ratio according to a target image width parameter and an initial image width parameter of the initial merged background image;

[0201] The second scaling unit 303 is specifically configured to determine a vertical scaling ratio according to a target image height parameter and an initial image height parameter of the initial merged background image;

[0202] The second scaling unit 303 is specifically configured to perform synchronous scaling processing on the initial merged background image based on the horizontal scaling ratio and the vertical scaling ratio to obtain a target merged background image.

[0203] The specific implementation of the first determining unit 301, the second determining unit 302 and the second scaling unit 303 can be found in the above Figure 3 In the corresponding embodiment, steps S103 and Figure 8 The description of steps S204 to S206 in the corresponding embodiment will not be repeated here.

[0204] The distance movement module 40 is used to obtain the offset ratio between the initial merged background image and the initial container, determine the offset distance corresponding to the target merged background image based on the offset ratio, and move the target merged background image according to the offset distance; after the movement, the target sub-icon in the target merged background image is in the target container.

[0205] The offset ratio includes the horizontal offset ratio and the vertical offset ratio; the offset distance includes the target horizontal offset distance and the target vertical offset distance;

[0206] The distance movement module 40 includes: a first acquisition unit 401, a ratio determination unit 402, a second acquisition unit 403, a first offset unit 404, a second offset unit 405, and an image movement unit 406;

[0207] The first acquiring unit 401 is configured to acquire initial image parameters of an initial merged background image, an initial offset distance of an initial sub-icon relative to the initial merged background image, and initial container parameters of an initial container;

[0208] A ratio determination unit 402 is configured to determine an offset ratio between the initial merged background image and the initial container based on the initial image parameters, the initial offset distance, and the initial container parameters;

[0209] The initial image parameters include an initial image width parameter and an initial image height parameter; the initial offset distance includes an initial horizontal offset distance and an initial vertical offset distance; the initial container parameters include an initial container width parameter and an initial container height parameter;

[0210] The ratio determination unit 402 is specifically configured to determine the horizontal offset ratio between the initial merged background image and the initial container according to the initial image width parameter, the initial horizontal offset distance, and the initial container width parameter;

[0211] The ratio determination unit 402 is specifically configured to determine the vertical offset ratio between the initial merged background image and the initial container according to the initial image height parameter, the initial vertical offset distance, and the initial container height parameter;

[0212] The ratio determination unit 402 is specifically configured to determine the horizontal offset ratio and the vertical offset ratio as the offset ratio between the initial merged background image and the initial container.

[0213] The ratio determination unit 402 is specifically configured to determine the difference between the initial image width parameter and the initial container width parameter as the initial width parameter;

[0214] The ratio determining unit 402 is specifically configured to determine the ratio between the initial horizontal offset distance and the initial width parameter as the horizontal offset ratio between the initial merged background image and the initial container.

[0215] The second acquisition unit 403 is used to acquire target image parameters of the target merged background image and target container parameters of the target container; the target image parameters include a target image width parameter and a target image height parameter; the target container parameters include a target container width parameter and a target container height parameter;

[0216] A first offset unit 404 is configured to determine a target horizontal offset distance corresponding to a target merged background image according to a horizontal offset ratio, a target image width parameter, and a target container width parameter;

[0217] The second offset unit 405 is used to determine a target vertical offset distance corresponding to the target merged background image according to the vertical offset ratio, the target image height parameter, and the target container height parameter;

[0218] The image moving unit 406 is configured to move the target merged background image according to the target horizontal offset distance and the target vertical offset distance.

[0219] The specific implementation of the first acquisition unit 401 and the ratio determination unit 402 can be found in the above Figure 6 The description of steps S1041 to S1043 in the corresponding embodiment will not be repeated here. The specific implementation of the second acquisition unit 403, the first offset unit 404, the second offset unit 405 and the picture moving unit 406 can be found in the above Figure 3 The description of step S104 in the corresponding embodiment will not be repeated here.

[0220] The specific implementation of the web page determination module 10, the container determination module 20, the image determination module 30 and the distance movement module 40 can be found in the above Figure 3 In the corresponding embodiment, steps S101 to S104, Figure 6 In the corresponding embodiment, steps S1041 to S1043 and Figure 8 The description of steps S201 to S207 in the corresponding embodiment will not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated here either.

[0221] Further, see Figure 10 , Figure 10 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present application. Figure 10As shown, the computer device 1000 may include: a processor 1001, a network interface 1004 and a memory 1005. In addition, the above-mentioned computer device 1000 may also include: a user interface 1003, and at least one communication bus 1002. The communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. Optionally, the network interface 1004 may include a standard wired interface and a wireless interface (such as a WI-FI interface). The memory 1005 may be a high-speed RAM memory, or a non-volatile memory (non-volatile memory), such as at least one disk storage. Optionally, the memory 1005 may also be at least one storage device located away from the aforementioned processor 1001. As Figure 10 As shown, the memory 1005 as a computer-readable storage medium may include an operating system, a network communication module, a user interface module, and a device control application.

[0222] In such Figure 10 In the computer device 1000 shown, the network interface 1004 can provide network communication functions; the user interface 1003 is mainly used to provide an interface for user input; and the processor 1001 can be used to call the device control application stored in the memory 1005 to achieve:

[0223] Obtaining a zoom ratio of the initial webpage, and scaling the initial webpage according to the zoom ratio to obtain a target webpage; the initial webpage includes an initial container for displaying initial sub-icons in the initial merged background image;

[0224] According to the size of the target web page, the initial container is synchronously scaled to obtain the target container;

[0225] The initial merged background image is synchronously scaled according to the size of the target container to obtain a target merged background image; the target merged background image includes a target sub-icon, which is obtained by scaling the initial sub-icon; the size ratio between the target sub-icon and the target container is the same as the size ratio between the initial sub-icon and the initial container;

[0226] Get the offset ratio between the initial merged background image and the initial container, determine the offset distance corresponding to the target merged background image based on the offset ratio, and move the target merged background image according to the offset distance; after the move, the target sub-icon in the target merged background image is in the target container.

[0227] It should be understood that the computer device 1000 described in the embodiment of the present application can execute the above Figure 3 、 Figure 6 or Figure 8 The description of the data processing method in the corresponding embodiment can also be performed as described above. Figure 9 The description of the data processing device 4000 in the corresponding embodiment will not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated here either.

[0228] In addition, it should be noted that: the embodiment of the present application also provides a computer-readable storage medium, and the computer-readable storage medium stores a computer program executed by the data processing device 4000 mentioned above, and the computer program includes program instructions. When the processor executes the program instructions, it can execute the above-mentioned Figure 3 、 Figure 6 or Figure 8 Therefore, the description of the data processing method in the corresponding embodiment will not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated. For technical details not disclosed in the computer-readable storage medium embodiment involved in this application, please refer to the description of the method embodiment of this application.

[0229] In addition, it should be noted that: the embodiment of the present application also provides a computer program product or computer program, which may include computer instructions, which may be stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor may execute the computer instructions, so that the computer device performs the above Figure 3 、 Figure 6 or Figure 8 Therefore, the description of the data processing method in the corresponding embodiment will not be repeated here. In addition, the description of the beneficial effects of using the same method will not be repeated here. For technical details not disclosed in the computer program product or computer program embodiments involved in this application, please refer to the description of the method embodiments of this application.

[0230] 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 through a computer program. The computer program can be stored in a computer-readable storage medium. When executed, the program can include the processes in the above-described method embodiments. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0231] The above disclosure is only a preferred embodiment of the present application, and certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A data processing method, characterized in that: include: Obtaining a zoom ratio of an initial webpage, and scaling the initial webpage according to the zoom ratio to obtain a target webpage; the initial webpage includes an initial container for displaying an initial sub-icon in an initial merged background image, the initial merged background image includes at least two initial sub-icons, and the initial container is used to display any one of the at least two initial sub-icons; According to the size of the target webpage, the initial container is synchronously scaled to obtain a target container; performing synchronous scaling processing on the initial merged background image according to the size of the target container to obtain a target merged background image; the target merged background image includes a target sub-icon, which is obtained by scaling the initial sub-icon; the size ratio relationship between the target sub-icon and the target container is the same as the size ratio relationship between the initial sub-icon and the initial container; Acquire initial image parameters of the initial merged background image, an initial offset distance of the initial sub-icon relative to the initial merged background image, and initial container parameters of the initial container; Determining an offset ratio between the initial merged background image and the initial container according to the initial image parameters, the initial offset distance, and the initial container parameters; According to the offset ratio, an offset distance corresponding to the target merged background image is determined, and the target merged background image is moved according to the offset distance; after the movement, the target sub-icon in the target merged background image is within the target container.

2. The method according to claim 1, characterized in that The obtaining of the zoom ratio of the initial webpage includes: A display device for displaying an initial webpage is obtained, and a zoom ratio of the initial webpage is determined according to a resolution of the display device.

3. The method according to claim 1, characterized in that The obtaining of the zoom ratio of the initial webpage includes: In response to a zoom operation on an initial webpage, a zoom ratio indicated by the zoom operation is acquired, and the zoom ratio indicated by the zoom operation is determined as the zoom ratio of the initial webpage.

4. The method according to claim 1, wherein The step of synchronously scaling the initial container according to the size of the target webpage to obtain the target container includes: Obtaining container configuration parameters for the initial container, and determining a target container width parameter and a target container height parameter according to the size of the target webpage and the container configuration parameters; Based on the target container width parameter and the target container height parameter, synchronous scaling processing is performed on the initial container to obtain a target container.

5. The method according to claim 4, characterized in that The container configuration parameters include the containing block width ratio, the containing block height ratio, and the containing block padding ratio; The acquiring of container configuration parameters for the initial container and determining a target container width parameter and a target container height parameter according to the size of the target webpage and the container configuration parameters include: Get the containing block width ratio, the containing block height ratio, and the containing block padding ratio for the initial container; Determining a target container width parameter according to a webpage width parameter indicated by the size of the target webpage and the containing block width ratio; The target container height parameter is determined according to the webpage height parameter indicated by the size of the target webpage, the containing block height ratio, and the containing block padding ratio.

6. The method according to claim 1, characterized in that The step of synchronously scaling the initial merged background image according to the size of the target container to obtain a target merged background image includes: determining a target image width parameter according to a size ratio relationship between the initial sub-icon and the initial container and a target container width parameter indicated by the size of the target container; determining a target image height parameter according to a size ratio relationship between the initial sub-icon and the initial container and a target container height parameter indicated by the size of the target container; Based on the target picture width parameter and the target picture height parameter, the initial merged background picture is synchronously scaled to obtain a target merged background picture.

7. The method according to claim 6, characterized in that The synchronously scaling the initial merged background image based on the target image width parameter and the target image height parameter to obtain the target merged background image includes: Determining a horizontal scaling ratio according to the target image width parameter and the initial image width parameter of the initial merged background image; Determining a vertical scaling ratio according to the target image height parameter and the initial image height parameter of the initial merged background image; Based on the horizontal scaling ratio and the vertical scaling ratio, the initial merged background image is synchronously scaled to obtain a target merged background image.

8. The method according to claim 1, characterized in that The initial image parameters include an initial image width parameter and an initial image height parameter; the initial offset distance includes an initial horizontal offset distance and an initial vertical offset distance; the initial container parameters include an initial container width parameter and an initial container height parameter; The determining, according to the initial image parameters, the initial offset distance, and the initial container parameters, of an offset ratio between the initial merged background image and the initial container includes: Determining a horizontal offset ratio between the initial merged background image and the initial container according to the initial image width parameter, the initial horizontal offset distance, and the initial container width parameter; Determining a longitudinal offset ratio between the initial merged background image and the initial container according to the initial image height parameter, the initial longitudinal offset distance, and the initial container height parameter; The horizontal offset ratio and the vertical offset ratio are determined as the offset ratio between the initial merged background image and the initial container.

9. The method according to claim 8, characterized in that The determining, according to the initial image width parameter, the initial horizontal offset distance, and the initial container width parameter, of a horizontal offset ratio between the initial merged background image and the initial container includes: Determine the difference between the initial image width parameter and the initial container width parameter as the initial width parameter; The ratio of the initial horizontal offset distance to the initial width parameter is determined as the horizontal offset ratio between the initial merged background image and the initial container.

10. The method according to claim 1, characterized in that The offset ratio includes a lateral offset ratio and a longitudinal offset ratio; the offset distance includes a target lateral offset distance and a target longitudinal offset distance; The step of determining an offset distance corresponding to the target merged background image according to the offset ratio, and moving the target merged background image according to the offset distance, includes: Obtain target image parameters of the target merged background image and target container parameters of the target container; the target image parameters include a target image width parameter and a target image height parameter; the target container parameters include a target container width parameter and a target container height parameter; Determining the target horizontal offset distance corresponding to the target merged background image according to the horizontal offset ratio, the target image width parameter, and the target container width parameter; Determining the target longitudinal offset distance corresponding to the target merged background image according to the longitudinal offset ratio, the target image height parameter, and the target container height parameter; The target merged background image is moved according to the target horizontal offset distance and the target vertical offset distance.

11. A data processing device, characterized in that: include: a webpage determination module, configured to obtain a zoom ratio of an initial webpage and scale the initial webpage according to the zoom ratio to obtain a target webpage; the initial webpage includes an initial container for displaying initial sub-icons in an initial merged background image, the initial merged background image includes at least two initial sub-icons, and the initial container is configured to display any one of the at least two initial sub-icons; A container determination module, configured to synchronously scale the initial container according to the size of the target webpage to obtain a target container; An image determination module is configured to synchronously scale the initial merged background image according to the size of the target container to obtain a target merged background image; the target merged background image includes a target sub-icon, which is obtained by scaling the initial sub-icon; and the size ratio between the target sub-icon and the target container is the same as the size ratio between the initial sub-icon and the initial container; a distance movement module, configured to obtain an offset ratio between the initial merged background image and the initial container, determine an offset distance corresponding to the target merged background image based on the offset ratio, and move the target merged background image according to the offset distance; After the movement, the target sub-icon in the target merged background image is located within the target container; The distance movement module includes: A first acquiring unit is configured to acquire initial image parameters of the initial merged background image, an initial offset distance of the initial sub-icon relative to the initial merged background image, and initial container parameters of the initial container; A ratio determination unit is configured to determine an offset ratio between the initial merged background image and the initial container according to the initial image parameters, the initial offset distance, and the initial container parameters.

12. A computer device, characterized in that: include: processor and memory; The processor is connected to the memory, wherein the memory is used to store a computer program, and the processor is used to call the computer program to enable the computer device to execute the method according to any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, which is suitable for being loaded and executed by a processor, so that a computer device having the processor executes the method according to any one of claims 1 to 10.

14. A computer program product, characterized in that The computer program product includes computer instructions, which are stored in a computer-readable storage medium and are suitable for being read and executed by a processor, so as to enable a computer device having the processor to perform the method according to any one of claims 1 to 10.

Images