CN108196755B

CN108196755B - Background picture display method and device

Info

Publication number: CN108196755B
Application number: CN201810089355.0A
Authority: CN
Inventors: 张洋平
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2018-01-30
Filing date: 2018-01-30
Publication date: 2021-02-12
Anticipated expiration: 2038-01-30
Also published as: CN108196755A

Abstract

The invention discloses a background picture display method and device, and belongs to the technical field of application. The method comprises the following steps: when a zooming instruction is received, zooming the first application window to obtain a second application window; when the width-height ratio of the background picture in the first application window is equal to the width-height ratio of the second application window, acquiring the display position of each functional area in the second application window and the target scaling ratio of the background picture; and displaying the picture blocks corresponding to the functional areas in the background picture according to the target scaling at the display positions of the functional areas in the second application window. The method and the device can realize that the background picture after equal-scale scaling is displayed in the scaled application window, so that the background picture can be adapted to the scaled application window, the theme elements in the background picture can be completely displayed in the scaled application window, and the display effect of the background picture is improved.

Description

Background picture display method and device

Technical Field

The present invention relates to the field of network technologies, and in particular, to a method and an apparatus for displaying a background picture.

Background

As browsers have evolved, more and more users have used browsers to search for information. The beautiful appearance of the browser is an important factor for attracting users, wherein skin changing is the most important function in appearance presentation, and the browser can display background pictures through skin changing, so that the appearance of the browser is beautified.

Currently, a method for displaying a background picture by a browser is as follows: the user can operate the browser on the terminal, the terminal is triggered to display the skin changing page of the browser, and the user can select the favorite background picture in the skin changing page. The terminal can acquire a background picture selected by a user as the background picture to be displayed, the background picture is cut and zoomed according to the size (including the width and the height) of a maximized window of the browser and then stored in a memory, so that the size of the background picture is equal to the size of the maximized window of the browser, then starting pixel points and ending pixel points when the background picture is drawn in each functional area are respectively calculated according to the size of each functional area (such as a page display area, a status bar, a task bar and the like) of the browser window, and then the background picture in the memory is sequentially drawn from the corresponding starting pixel points until the ending pixel points are drawn, so that the background picture in the browser window is formed.

In the process of implementing the invention, the inventor finds that the related art has at least the following problems:

in the above technology, the size of the background picture is fixedly set according to the window size when the browser is maximized, and if the user performs a zoom operation on the current browser window to make the window size smaller than the size of the background picture, the size of the background picture stored in the memory is fixed, which causes the background picture to only display a certain part of the background picture in the zoomed browser window, so that the display effect of the background picture is poor.

Disclosure of Invention

The embodiment of the invention provides a background picture display method and a background picture display device, which can solve the problem of poor display effect in the related art. The technical scheme is as follows:

in one aspect, a method for displaying a background picture is provided, where the method includes:

when a zooming instruction is received, zooming the first application window to obtain a second application window;

when the width-height ratio of a background picture in the first application window is equal to the width-height ratio of the second application window, acquiring the display position of each functional area in the second application window and a target scaling ratio of the background picture, wherein the target scaling ratio is used for scaling the background picture to the same size as the second application window;

and displaying the picture blocks corresponding to the functional areas in the background picture according to the target scaling at the display positions of the functional areas in the second application window.

In one aspect, a background picture display apparatus is provided, the apparatus including:

the zooming module is used for zooming the first application window to obtain a second application window when a zooming instruction is received;

an obtaining module, configured to obtain, when a width-to-height ratio of a background picture in the first application window is equal to a width-to-height ratio of the second application window, a display position of each functional region in the second application window and a target scaling ratio of the background picture, where the target scaling ratio is used to scale the background picture to a size same as that of the second application window;

and a display module, configured to display, at the display position of each functional region in the second application window, a picture block corresponding to each functional region in the background picture according to the target scaling.

In one aspect, a terminal is provided, where the terminal includes a processor and a memory, where the memory stores at least one instruction, at least one program, a code set, or a set of instructions, and the at least one instruction, the at least one program, the code set, or the set of instructions is loaded and executed by the processor to implement the operations performed by the above background picture display method.

In one aspect, a computer-readable storage medium is provided, in which at least one instruction, at least one program, a set of codes, or a set of instructions is stored, and loaded and executed by a processor to implement the operations performed by the above background picture display method.

The technical scheme provided by the embodiment of the invention has the following beneficial effects:

the method comprises the steps of obtaining the scaling of a background picture after an application window is scaled, and then displaying picture blocks in the background picture according to the scaling at the display position of each functional area in the scaled application window, so that the background picture after equal scaling is displayed in the scaled application window, the background picture can be adapted to the scaled application window, theme elements in the background picture can be completely displayed in the scaled window, and the display effect of the background picture is improved.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.

Fig. 1 is a schematic diagram of an implementation environment of a background picture display method according to an embodiment of the present invention;

fig. 2 is a flowchart of a background picture displaying method according to an embodiment of the present invention;

fig. 3 is a flowchart of a background image display method according to an embodiment of the present invention;

FIG. 4 is a diagram of a browser window provided by an embodiment of the present invention;

FIG. 5 is a diagram illustrating an actual interface of a browser window according to an embodiment of the present invention;

FIG. 6 is a diagram of a background picture and a second browser window provided by an embodiment of the present invention;

FIG. 7 is a diagram illustrating an actual interface between a background picture and a second browser window according to an embodiment of the present invention;

FIG. 8 is a diagram of a background picture and a second browser window provided by an embodiment of the present invention;

FIG. 9 is a diagram illustrating an actual interface between a background picture and a second browser window according to an embodiment of the present invention;

fig. 10 is a flowchart of a background picture displaying method according to an embodiment of the present invention;

FIG. 11 is a schematic diagram of a skin change page provided by an embodiment of the invention;

FIG. 12 is a diagram of an actual interface of a skin change page according to an embodiment of the present invention;

FIG. 13 is a schematic diagram of a browser wallpaper provided in the related art;

FIG. 14 is a representation of an actual interface of a browser wallpaper provided in the related art;

FIG. 15 is a diagram illustrating a full-screen wallpaper of a browser according to an embodiment of the invention;

FIG. 16 is a diagram of an actual interface display of a full-screen wallpaper of a browser according to an embodiment of the present invention;

fig. 17 is a schematic diagram of displaying a background picture in a zoomed browser window provided in the related art;

FIG. 18 is a diagram of an actual interface display for displaying a background picture in a zoomed browser window provided in the related art;

FIG. 19 is a diagram illustrating a background picture displayed in a zoomed browser window according to an embodiment of the present invention;

FIG. 20 is a diagram of an actual interface displaying a background picture in a zoomed browser window according to an embodiment of the present invention;

fig. 21 is a schematic structural diagram of a background image display device according to an embodiment of the present invention;

fig. 22 is a schematic structural diagram of a background image display device according to an embodiment of the present invention;

fig. 23 is a schematic structural diagram of a terminal 2300 according to an embodiment of the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, embodiments of the present invention will be described in detail with reference to the accompanying drawings.

Fig. 1 is a schematic diagram of an implementation environment of a background picture display method according to an embodiment of the present invention, and referring to fig. 1, the implementation environment may include:

at least one server 101 and at least one terminal 102. The server 101 is configured to provide services, such as web services, for the terminal 102, and specifically, the server 101 may provide services to the terminal through an application (such as a browser) installed in the terminal 102. The terminal 102 is used to run an application provided by the server 101 and implement various functions based on the application. In addition, the server 101 may be configured with at least one database, such as a user database or the like. The user database is used to store personal data such as user names, passwords, and user relationship chains of users served by the server 101.

Fig. 2 is a flowchart of a background picture display method according to an embodiment of the present invention. The method is performed by a terminal, and referring to fig. 2, the method includes:

201. and when a zooming instruction is received, zooming the first application window to obtain a second application window.

In the embodiment of the invention, the first application window and the second application window are windows of the same application. The first application window may be a maximized window of the application, or may be a window obtained after performing scaling operation of any scaling ratio, and the second application window is a window obtained after the terminal scales the first application window.

The scaling instruction may be an equal scaling instruction, and when receiving the equal scaling instruction, the terminal may scale the first application window to obtain a second application window having the same width-height ratio as the first application window.

Of course, the scaling instruction may also be a width scaling instruction, and when receiving the width scaling instruction, the terminal may scale the width of the first application window to obtain a second application window different from the width of the first application window. The zoom instruction may also be a height zoom instruction, and when receiving the height zoom instruction, the terminal may zoom the height of the first application window to obtain a second application window with a height different from the height of the first application window.

202. When the width-to-height ratio of the background picture in the first application window is equal to the width-to-height ratio of the second application window, acquiring the display position of each functional region in the second application window and a target scaling ratio of the background picture, wherein the target scaling ratio is used for scaling the background picture to the same size as the second application window.

The background picture is a picture displayed as a background in the whole application window of the application, when one picture is set as the background of the application window, corresponding parts of the background picture can be correspondingly displayed in each functional area of the application window, and the background picture can also be called as wallpaper.

In the embodiment of the invention, the application window can be divided into a plurality of functional areas. The picture size of the background picture displayed in the first application window refers to the original size of the background picture, for example, the terminal may obtain the background configuration information of the application from the locally stored configuration file, including attribute information such as the original size of the background picture.

203. And displaying the picture blocks corresponding to the functional areas in the background picture according to the target scaling at the display positions of the functional areas in the second application window.

In the embodiment of the invention, the terminal can respectively draw different picture blocks in the background picture at the display positions of different functional areas in the second application window.

According to the method provided by the embodiment of the invention, the proportion of the background picture to be zoomed is acquired after the application window is zoomed, and the picture blocks in the background picture are displayed according to the proportion at the display position of each functional area in the zoomed application window, so that the background picture after being zoomed is displayed in the zoomed application window, the background picture can be adapted to the zoomed application window, the theme elements in the background picture can be completely displayed in the zoomed window, and the display effect of the background picture is improved.

In one possible implementation, the obtaining the target scaling of the background picture includes:

acquiring the ratio of the height of the second application window to the height of the background picture as the target scaling ratio; or the like, or, alternatively,

and acquiring the ratio of the width of the second application window to the width of the background picture as the target scaling.

In the method provided by the embodiment of the invention, because the width-to-height ratio of the second application window is the same as the width-to-height ratio of the background picture, the height ratio of the second application window and the width ratio of the background picture can be acquired as the target scaling ratio, and two implementation modes for acquiring the target scaling ratio are provided.

In a possible implementation manner, the displaying, at the display position of each functional region in the second application window, a picture block corresponding to each functional region in the background picture according to the target scaling includes:

scaling the first vertex coordinates of each functional area in the second application window according to the target scaling to obtain second vertex coordinates corresponding to each functional area;

in the background picture, determining picture blocks corresponding to the functional areas based on the second vertex coordinates corresponding to the functional areas;

and drawing the picture blocks corresponding to the functional areas according to the target scaling at the display positions of the functional areas for displaying.

And the proportion between the first vertex coordinate and the second vertex coordinate is a target scaling proportion. The ratio between the size of each functional area and the size of the picture block corresponding to each functional area is a target scaling ratio.

According to the method provided by the embodiment of the invention, the picture block corresponding to each functional area is determined according to the scaling and the first vertex coordinates of each functional area, and then the picture block is scaled in the drawing process. After the terminal finishes drawing the corresponding picture blocks in all the functional areas in the second application window, the background picture displayed in the second application window is obtained, and a mode for displaying the background picture in the second application window is provided.

zooming the background picture according to the target zooming proportion to obtain a zoomed background picture;

in the zoomed background picture, determining picture blocks corresponding to each functional area based on the first vertex coordinates of each functional area;

and drawing the picture blocks corresponding to the functional areas at the display positions of the functional areas for display.

In the method provided by the embodiment of the invention, the background picture is firstly zoomed, so that the zoomed background picture has the same size as the second application window, then the picture blocks corresponding to the functional areas are drawn, and the terminal obtains the background picture displayed in the second application window after drawing the corresponding picture blocks in all the functional areas in the second application window, thereby providing a mode for displaying the background picture in the second application window.

In a possible implementation manner, when a scaling instruction is received, the method further includes, after scaling the first application window to obtain a second application window:

when the width-height ratio of the background picture in the first application window is larger than that of the second application window, determining a first target area from the background picture, wherein the height of the first target area is the same as that of the background picture, and the width-height ratio of the first target area is the same as that of the second application window;

and executing the target scaling and display process for acquiring the display position and the first target area based on the first target area.

According to the method provided by the embodiment of the invention, when the application window is zoomed, if the width of the zoomed application window is smaller than that of the background picture, the first target area with the same width and height ratio as the second application window in the background picture is determined, and the first target area is displayed in the second application window, so that the theme elements of the background picture can be completely displayed, and the display effect is improved.

when the width-height ratio of the background picture in the first application window is smaller than that of the second application window, determining a second target area from the background picture, wherein the width of the second target area is the same as that of the background picture and the width-height ratio of the second target area is the same as that of the second application window;

and executing the target scaling and display process for acquiring the display position and the second target area based on the second target area.

According to the method provided by the embodiment of the invention, when the application window is zoomed, if the height of the zoomed application window is smaller than that of the background picture, the second target area with the same width and height ratio as the second application window in the background picture is determined, and the second target area is displayed in the second application window, so that the theme elements of the background picture can be completely displayed, and the display effect is improved.

All the above-mentioned optional technical solutions can be combined arbitrarily to form the optional embodiments of the present invention, and are not described herein again.

The background picture display method provided by the embodiment of the present invention is described in detail below by taking an application as an example, where the browser refers to a web browser installed on a terminal and used for browsing a web page, the background picture is a picture displayed as a background in a whole browser window of the browser, and when a picture is set as the background of the browser window, corresponding portions of the background picture may be correspondingly displayed in each functional region of the browser window.

Fig. 3 is a flowchart of a background picture display method according to an embodiment of the present invention. The method is performed by a terminal, and referring to fig. 3, the method includes:

301. and when a zooming instruction is received, zooming the first browser window to obtain a second browser window.

The first browser window may be a maximized window of the browser, or may be a window obtained by performing a scaling operation at any scaling ratio.

In the embodiment of the present invention, the zoom instruction may be triggered by an operation of a user, for example, in a process that the terminal displays the first browser window, the user may perform a zoom operation on the currently displayed first browser window, and trigger the zoom instruction that the terminal zooms the first browser window. The scaling instruction may be an equal scaling instruction, and when the terminal receives the equal scaling instruction, the terminal may scale the first browser window equally to obtain a second browser window having the same width-to-height ratio as the first browser window.

Of course, the zoom instruction may also be a width zoom instruction, and when receiving the width zoom instruction, the terminal may zoom the width of the first browser window to obtain a second browser window different from the width of the first browser window. The zoom instruction may also be a height zoom instruction, and when receiving the height zoom instruction, the terminal may zoom the height of the first browser window to obtain a second browser window different from the height of the first browser window.

Since the terminal zooms the first browser window, the background picture originally displayed in the first browser window cannot be adapted to the zoomed second browser window, and the incompatibility means that the size of the background picture is different from that of the browser window, so that the background picture cannot be completely displayed in the browser window. Therefore, the terminal needs to adapt the background picture to the scaled browser window again, so that the background picture can be completely displayed in the scaled browser window.

Accordingly, the terminal may obtain a picture size of the background picture displayed in the first browser window, where the picture size refers to an original size of the background picture, for example, the terminal may obtain background configuration information of the browser from a locally stored configuration file, including attribute information such as the original size of the background picture. For example, when the user selects to set the background picture as the background picture of the browser window in the skin change page of the browser, the terminal may obtain the attribute information of the background picture according to a Uniform Resource Locator (URL) address of the background picture, and store the attribute information of the background picture in the configuration file.

In the embodiment of the invention, the terminal can adopt a corresponding adaptive scheme according to the relation between the width-height ratio of the background picture and the width-height ratio of the second browser window, so that the background picture has a better display effect in the second browser window. Specifically, when the width-to-height ratio of the background picture is equal to the width-to-height ratio of the second browser window, the schemes shown in step 302 and step 303 are adopted; when the width-height ratio of the background picture is larger than that of the second browser window; the scheme shown in step 304 and step 305 is adopted, and when the width-to-height ratio of the background picture is smaller than the width-to-height ratio of the second browser window, the scheme shown in step 306 and step 307 is adopted.

302. When the width-height ratio of the background picture in the first browser window is equal to the width-height ratio of the second browser window, acquiring the display position of each functional area in the second browser window and the target scaling ratio of the background picture, wherein the target scaling ratio is used for scaling the background picture to the same size as the second browser window.

In the embodiment of the present invention, the functional area of the browser window may be divided into two types, one type is a frame area of the browser window, the frame area may include at least one area, the content displayed by the frame area is not related to a web page accessed by the browser and is displayed based on a configuration file in a browser installation file on the terminal, and the other type is a web page area of the browser window, and the web page area is used for displaying a web page accessed by the browser.

Referring to fig. 4 and 5, fig. 4 is a schematic diagram of a browser window according to an embodiment of the present invention, fig. 5 is a display diagram of an actual interface of a browser window according to an embodiment of the present invention, and as shown in fig. 4 or 5, the browser window includes three areas, i.e., an area 1, an area 2, and an area 3. Area 1 and area 2 belong to the frame portion of the browser, and area 3 belongs to the web page area. The full-screen wallpaper is realized depending on the area 1, the area 2 and the area 3, and as the three areas belong to different functional areas, in order to achieve the effect of overall seamless splicing, the terminal needs to separately process the three areas, that is, different picture blocks in the background picture are respectively drawn in different areas. The embodiment of the present invention is described by taking only an example that the browser window includes the area 1, the area 2, and the area 3 shown in fig. 3, and actually, the browser window may have other division manners, which is not limited in the embodiment of the present invention.

If the width-to-height ratio of the background picture is equal to the width-to-height ratio of the second browser window, in this case, the background picture can be enlarged or reduced in equal proportion to keep the original ratio, and the theme elements in the background picture cannot be deformed. Therefore, the terminal only needs to draw the corresponding picture block at the display position of each area in the second browser window according to the target scaling. Therefore, the terminal needs to first acquire the display position of each region and the target zoom ratio.

In one possible implementation manner, the terminal can locate the display position of each functional area in the second browser window through the first vertex coordinates of the functional area. The first vertex coordinates of each functional area in the second browser window can be obtained by the following method: and the terminal determines the first vertex coordinates of each functional area according to the size and layout of each functional area in the second browser window. The size of each functional region includes the width and height of each functional region, and the layout of each functional region refers to the relative position of each functional region.

The first vertex coordinates of any one of the functional areas may include four vertex coordinates of the functional area for indicating a display position of the functional area in the second browser window. Of course, the first vertex coordinate may only include the upper left vertex coordinate and the lower right vertex coordinate of the functional area, and since the diagonal line formed by the two points may indicate one area, the upper left vertex coordinate and the lower right vertex coordinate may be used to indicate the display position of the functional area in the second browser window. The first vertex coordinate is not specifically limited, as long as the display position of the functional region in the second browser window can be located, and the vertex coordinate locating mode is actually an absolute coordinate locating mode, so that the terminal can clearly know the display position of each functional region in the second browser window.

The origin of the coordinate system corresponding to the first vertex coordinate may be an upper left vertex of the second browser window, and taking the example that the first vertex coordinate includes an upper left vertex coordinate and a lower right vertex coordinate of the functional region, as shown in fig. 4, the upper left vertex coordinate of the region 1 may be (0,0), and the lower right vertex coordinate may be (s, h), which indicates that the width of the region 1 is s and the height is h; the coordinates of the upper left vertex of the area 2 can be (s,0) and the coordinates of the lower right vertex can be (w, r), which means that the width of the area 2 is w-s and the height is r; the coordinates of the upper left vertex of the region 3 may be (s, r) and the coordinates of the lower right vertex may be (w, h), which means that the width of the region 3 is w-s and the height is h-r.

Since the picture size of the background picture and the size of the second browser window may be different, when the terminal draws the background picture in the second browser window, a scaling parameter ratio is also required. This parameter ratio represents the scale to which the background picture needs to be scaled when rendered. In one possible implementation manner, the obtaining, by the terminal, the target scaling of the background picture includes: acquiring the ratio of the height of the second browser window to the height of the background picture as the target scaling ratio; or, the terminal obtains the ratio of the width of the second browser window to the width of the background picture as the target scaling ratio. For example, ratio/width/image _ w height/image _ h. Wherein, width and height respectively represent the width and height of the second browser window, and image _ w and image _ h respectively represent the width and height of the background picture.

For example, if the picture size of the background picture is 200 × 200, the size of the second browser window is 100 × 100, and the ratio is 1/2, it represents that the background picture needs to be reduced by two times to be drawn. If the picture size of the background picture is 100 × 200, the size of the browser window is 200 × 400, and the ratio is 2, this means that the background picture needs to be enlarged by two times to be drawn.

303. And displaying the picture blocks corresponding to the functional areas in the background picture according to the target scaling at the display positions of the functional areas in the second browser window.

In the embodiment of the present invention, the terminal may respectively draw different picture blocks in the background picture at the display positions of different functional regions in the second browser window, and since the picture size of the background picture is different from the size of the second browser window, the terminal may zoom and draw the background picture in the second browser window, that is, zoom and draw the picture blocks corresponding to the functional regions at the display positions of the functional regions in the second browser window.

For the zoom drawing, the process of displaying the picture block corresponding to each functional area at the display position of each functional area by the terminal may include: the terminal zooms the first vertex coordinates of each functional area in the second browser window according to the target zoom scale to obtain second vertex coordinates corresponding to each functional area; in the background picture, determining picture blocks corresponding to the functional areas based on the second vertex coordinates corresponding to the functional areas; and drawing the picture blocks corresponding to the functional areas according to the target scaling at the display positions of the functional areas for displaying.

And the proportion between the first vertex coordinate and the second vertex coordinate is a target scaling proportion. Taking the example that the first vertex coordinates include the upper left vertex coordinates and the lower right vertex coordinates of the functional region, the second vertex coordinates include the upper left vertex coordinates and the lower right vertex coordinates of the picture block.

Accordingly, the process of the terminal determining the picture blocks corresponding to the functional areas may include: for each functional area in the second browser window, the terminal can determine the coordinates of a first pixel point in the background picture according to the coordinates of the top left vertex of the functional area, and the ratio between the coordinates of the top left vertex of the functional area and the coordinates of the first pixel point is a target scaling ratio; and determining a second pixel point coordinate in the background picture according to the lower right vertex coordinate of the functional region, wherein the ratio between the lower right vertex coordinate of the functional region and the second pixel point coordinate is a target scaling ratio, and further, the terminal can acquire a picture block in the background picture, which takes the first pixel point coordinate as an upper left vertex coordinate and the second pixel point coordinate as a lower right vertex coordinate, as a picture block corresponding to the functional region. In this way, the ratio between the size of each functional area and the size of the picture block corresponding to each functional area is a target scaling ratio, and the terminal needs to scale and draw the picture block in the background picture in the corresponding functional area.

And the coordinates of the upper left vertex of the picture block are used for indicating the display position of the upper left vertex of the picture block in the background picture, and the coordinates of the lower right vertex of the picture block are used for indicating the display position of the lower right vertex of the picture block in the background picture. The upper left vertex of the whole background picture is used as the origin of coordinates, the position of the pixel point in the whole background picture is positioned by utilizing the coordinates of the pixel point in the background picture, and actually, the method is a mode of positioning by using absolute coordinates, so that the terminal can definitely know the display position of each picture block in the background picture.

Taking area 1 in fig. 4 or 5 as an example, if the target scaling is 1/2, the coordinates of the top left vertex of area 1 are (0,0), and the coordinates of the bottom right vertex are (10,100), area 1 corresponds to a picture block in the background picture with the coordinates of the top left vertex being (0,0) and the coordinates of the bottom right vertex being (20, 200).

Taking any functional area as an example, the process of drawing, by the terminal, the picture block corresponding to the functional area at the display position of the functional area according to the target zoom scale may include: the terminal can call a system function, the size of the functional area is used as a target size to be obtained by scaling and drawing, the size of the picture block is used as the size before scaling and drawing, and the size is input into the system function, so that the system function scales and draws the picture block in the corresponding functional area. The system function may be constructed based on an interpolation algorithm, for example, the interpolation algorithm may be any algorithm for scaling and drawing a picture, such as bilinear interpolation, bicubic interpolation, and multiphase interpolation.

In this case, the terminal determines the tile corresponding to each functional region directly according to the scaling and the first vertex coordinates of each functional region, and further scales the tile in the drawing process, for example, draws by enlarging twice or draws by enlarging twice. And after the terminal draws the corresponding picture blocks in all the functional areas in the second browser window, the background picture displayed in the second browser window is obtained.

In fact, the terminal may also zoom the background picture first, so that the zoomed background picture has the same size as the second browser window, and then draw the picture blocks corresponding to the functional regions.

For the case of zooming before drawing, the process of displaying the picture block corresponding to each functional region at the display position of each functional region by the terminal may include: zooming the background picture according to the target zooming proportion to obtain a zoomed background picture; in the zoomed background picture, determining picture blocks corresponding to each functional area based on the first vertex coordinates of each functional area; and drawing the picture blocks corresponding to the functional areas at the display positions of the functional areas for display.

In this case, the terminal may also implement scaling of the background picture by calling a system function, and the size of the scaled background picture is the same as the size of the second browser window. Taking the example that the first vertex coordinates include the upper left vertex coordinate and the lower right vertex coordinate of the functional area, the process of the terminal determining the picture block corresponding to each functional area may include: for each functional area in the second browser window, the terminal can determine a first pixel point coordinate in the background picture according to an upper left vertex coordinate of the functional area, the upper left vertex coordinate of the functional area is the same as the first pixel point coordinate, and determine a second pixel point coordinate in the background picture according to a lower right vertex coordinate of the functional area, the lower right vertex coordinate of the functional area is the same as the second pixel point coordinate, so that the terminal can acquire a picture block in the background picture, which takes the first pixel point coordinate as the upper left vertex coordinate and the second pixel point coordinate as the lower right vertex coordinate, as a picture block corresponding to the functional area. In this way, the size of each functional area is the same as the size of the picture block corresponding to each functional area, and the terminal can directly draw the picture block in the background picture into the corresponding functional area without scaling in the drawing process.

Taking area 1 in fig. 4 or fig. 5 as an example, if the target scaling is 1/2, the terminal may first reduce the background picture by two times, and if the coordinates of the top left vertex of area 1 are (0,0) and the coordinates of the bottom right vertex of area 1 are (10,100), area 1 corresponds to a picture block in the background picture whose coordinates of the top left vertex are (0,0) and the coordinates of the bottom right vertex are (10, 100). Because the zoomed background picture has the same size as the second browser window, the first vertex coordinates of each functional region in the second browser window can correspond to the pixel point coordinates of each picture block in the background picture one by one, so that each functional region can draw the corresponding picture block according to the one-to-one corresponding coordinates.

When the terminal draws the corresponding picture block in each functional area, the terminal may draw the picture block corresponding to the area 1 from the (0,0) position of the second browser window, where (s, h) is the lower-right vertex coordinate of the area 1, that is, the width of the area is s, and the height is h. Then, an area 2 of the second browser window is drawn, and since an area 1 exists, the terminal needs to start drawing next to the rightmost side of the area 1, that is, the terminal starts drawing the picture block corresponding to the area 2 from the (s,0) position of the second browser window, the coordinates of the lower right vertex of the area 2 are (w, r), which indicates that the width of the area is w-s, and the height is r. And finally, an area 3 for drawing the second browser window is arranged, and the area 3 is offset from the width of the top left vertex s and the height of r of the second browser window, so that the terminal can draw a picture block corresponding to the area 3 from the (s, r) position of the browser window, wherein (w, h) is the coordinates of the bottom right vertex of the area 3, namely, the width of the area is w-s, and the height of the area is h-r.

When the browser window is zoomed, if the size of the zoomed browser window is smaller, the width-height ratio of the background picture can be kept unchanged by zooming the background picture in equal proportion, so that no matter how the browser window is enlarged or reduced, the browser window can display an undeformed and complete background picture under any length-width ratio, and the theme of the background picture can be completely displayed.

It should be noted that, because the web page area in the second browser window is not within the control range of the browser, the terminal needs the server (server providing web service) to return the relevant data of the web page area to the terminal, and then the terminal can display the web page content and the picture content in the web page area according to the relevant data. The related data includes web page data (e.g., web page source code) and picture data of picture blocks displayed in the web page area, etc. In order to enable the server to specify the picture blocks to be displayed in the webpage area, the terminal may notify the server of the related information of the second browser window through the browser, where the related information may include size information of the second browser window, size information of each functional area, and scaling information, so that the server may determine, according to the related information, a display position of the webpage area in the second browser window and a position of the picture block corresponding to the webpage area in the background picture, and further acquire webpage data and picture data corresponding to the picture block. Of course, the related information may also only include the position of the picture block corresponding to the webpage area in the background picture, so that the server may directly acquire the webpage data and the picture data of the corresponding picture block.

For example, the browser can provide the relevant information to the server by using a Json character string through a JavaScript extension interface, and the format of the Json character string is as follows:

{“sidebar_width”:s,”width”:w,”height”:h,”rebar_height”:r}

wherein, sidebar _ width represents the width of the area 1, width and height represent the width and height of the whole browser window, respectively, and rebabar _ height represents the height of the area 2.

In addition to the width of the area 1, the width and height of the whole browser window, the height of the area 2, and the like, two other parameters, image _ w and image _ h, are required, where image _ w represents the width of the background picture, and image _ h represents the height of the background picture. Because the browser window (i.e. the frame area of the browser) and the web page area use the background picture with the same format, and the server can obtain the width and the height of the background picture, for example, the server can obtain the attribute information of the background picture, including the width and the height of the background picture, according to the URL address of the background picture. Therefore, the two parameters can be notified to the server without the browser through a JavaScript extension interface. Of course, since the size of the background picture is different from the size of the browser window, in order for the server to accurately determine the picture block corresponding to the webpage area in the background picture, the terminal needs to provide the target scaling to the server through the browser.

After the browser synchronizes the relevant information (including the width of the area 1, the width and height of the whole browser window, the height of the area 2, and the target scaling ratio) to the server, the server may determine, according to the relevant information, the display position of the web page area in the second browser window and the picture block corresponding to the web page area in the background picture, where the specific determination process is the same as the process of determining the display position and the picture block by the terminal.

Of course, the terminal may also directly provide the position of the picture block corresponding to the webpage area in the background picture to the server through the browser, so that the server may directly obtain the picture data of the picture block corresponding to the webpage area, and return the picture data and the webpage data of the webpage area to the terminal, so that the terminal may directly render or draw in the webpage area according to the picture data and the webpage data, and obtain the picture block and the webpage content displayed in the webpage area.

In the above steps 302 to 303, for the case that the aspect ratio of the second browser window is the same as the aspect ratio of the background picture, the terminal may display the background picture in the second browser window. In this case, since the coordinates of the top left vertex of the background picture are (0,0), the terminal starts drawing and presentation from the (0,0) position of the background picture in the second browser window. In fact, the width-to-height ratio of the scaled second browser window may also be different from the width-to-height ratio of the background picture, in this case, the terminal cannot scale the background picture to the size of the browser window by equal scaling, and if the background picture is not scaled by equal scaling, the background picture may be deformed, so the terminal needs to determine a target region with the same width-to-height ratio as the width-to-height ratio of the second browser window from the background picture, and draw the target region. See the following steps 304 to 305 or 306 to 307 for the specific process.

304. When the width-height ratio of the background picture in the first browser window is larger than that of the second browser window, a first target area is determined from the background picture, the height of the first target area is the same as that of the background picture, and the width-height ratio of the first target area is the same as that of the second browser window.

Referring to fig. 6 and 7, fig. 6 is a schematic diagram of a background picture and a second browser window provided in an embodiment of the present invention, and fig. 7 is an actual interface display diagram of a background picture and a second browser window provided in an embodiment of the present invention, as shown in fig. 6 or fig. 7, image _ w/image _ h > width/height indicates that the background picture is too wide relative to the second browser window, and the terminal needs to determine a first target area in the background picture that is the same as the second browser window in the aspect ratio.

The first target area may be an area in which the left boundary of the background picture deviates from the left boundary of the background picture by a certain distance x, and the right boundary deviates from the right boundary of the background picture by the same distance x. In this case, the determination process of x may include: taking the width of the background picture as image _ w, the height as image _ h, the width of the second browser window as width and the height as examples, the width of the first target area is image _ w-2x, and the height is height, and according to the fact that the width-height ratio of the first target area is equal to the width-height ratio of the second browser window, the following relation exists: (image _ w-2x)/image _ h ═ width/height, and x ═ height ═ image _ w-width ═ image _ h)/2 ═ height can be obtained. Where ". x" is a multiplication operation.

It should be noted that, considering that the theme element in the background picture may not be located in the middle of the background picture but is biased to the left or right of the background picture, in order to make the theme element fully displayed in the second browser window as much as possible, the left boundary and the right boundary of the first target region may also be respectively offset from the left boundary and the right boundary in the background picture by different distances, for example, the first target region may be a region in which the left boundary in the background picture is offset from the left boundary of the background picture by a distance x1, and the right boundary is offset from the right boundary of the background picture by a distance x2, and the values of x1 and x2 may both be greater than 0, or one of them may be equal to 0, and the other is greater than 0.

According to the aspect ratio of the first target area being equal to the aspect ratio of the second browser window, the following relationship exists: (image _ w-x1-x2)/image _ h is width/height, and x1+ x2 is (height _ image _ w-width _ image _ h)/(height). In this case, the terminal may identify the theme elements in the background picture by using a picture identification technology to obtain the width and height of the region where the theme elements are located, so as to determine specific values of the distances x1 and x2, so that the first target region has the same width ratio as that of the second browser window, and the first target region may further include the complete theme elements in the background picture, thereby ensuring that the theme elements in the background picture can be finally and completely displayed in the second browser window, and improving the display effect of the background picture.

305. And executing the target scaling and display process for acquiring the display position and the first target area based on the first target area.

In the embodiment of the present invention, since the aspect ratio of the first target area in the background picture is the same as the aspect ratio of the second browser window, the processing method with the same ratio mentioned in the above step 302 is returned, and then the terminal continues to process according to the processing method with the same ratio, where the processing procedure includes: acquiring the display position of each functional area in the second browser window and the target scaling of the first target area, wherein the target scaling is used for scaling the first target area to the same size as the second browser window; and displaying the picture blocks corresponding to the functional areas in the first target area according to the target scaling at the display positions of the functional areas in the second browser window.

By performing the process of obtaining the display position of each functional region and the target scaling of the first target region in step 302 and displaying each picture block in the first target region in step 303 based on the first target region, seamless docking can be achieved, so that the first target region can be completely displayed in the scaled browser window, and the theme elements in the first target region are not deformed.

Although the scaling ratio of width/image _ w is height/image _ h in step 302, the terminal may use ratio of height/image _ h as the scaling ratio of the background picture because the width of the first target region actually drawn in the background picture is changed from the width of the background picture and the height of the first target region is not changed from the height of the background picture.

The

above steps

304 and 305 are for the case that the aspect ratio of the background picture is larger than the aspect ratio of the second browser window, the terminal can display the first target area in the background picture in the second browser window. In this case, since the coordinates of the top left vertex of the first target region are (x, 0), which means that the display position of the top left vertex of the first target region in the background picture is (x, 0), the terminal starts drawing and displaying from the (x, 0) position of the background picture in the second browser window. When the browser window is zoomed, if the width of the zoomed browser window is smaller than that of the background picture, the technical means can ensure that the theme elements of the background picture can be completely displayed, and the display effect is improved.

306. When the width-to-height ratio of the background picture in the first browser window is smaller than that of the second browser window, a second target area is determined from the background picture, the width of the second target area is the same as that of the background picture, and the width-to-height ratio of the second target area is the same as that of the second browser window.

Referring to fig. 8 and 9, fig. 8 is a schematic diagram of a background picture and a second browser window provided in an embodiment of the present invention, and fig. 9 is an actual interface display diagram of a background picture and a second browser window provided in an embodiment of the present invention, as shown in fig. 8 or fig. 9, image _ w/image _ h < width/height indicates that the background picture is too high relative to the second browser window, and the terminal needs to determine a second target area in the background picture, which is the same as the width-height ratio of the second browser window.

The second target region may be a region in which the upper boundary of the background picture deviates from the upper boundary of the background picture by a certain distance y, and the lower boundary of the background picture deviates from the lower boundary of the background picture by the same distance y. In this case, the determination process of y may include: taking the width of the background picture as image _ w, the height as image _ h, the width of the second browser window as width and the height as examples, the width of the second target area as image _ w and the height as height-2y, and according to the fact that the width-height ratio of the second target area is equal to the width-height ratio of the second browser window, then image _ w/(image _ h-2y) ═ width/height, y ═ image _ h-height, ((w) image _ w)/2width can be obtained.

It should be noted that, considering that the theme element in the background picture may not be located in the middle of the background picture, but is biased to the upper side or the lower side of the background picture, in order to make the theme element fully displayed in the second browser window as much as possible, the upper boundary and the lower boundary of the second target region may also be respectively offset from the upper boundary and the lower boundary in the background picture by different distances, for example, the second target region may be a region where the upper boundary in the background picture is offset from the upper boundary in the background picture by a distance y1, and the lower boundary is offset from the lower boundary in the background picture by a distance y2, and values of y1 and y2 may both be greater than 0, or one of them may be equal to 0, and the other is greater than 0.

Based on the aspect ratio of the second target area being equal to the aspect ratio of the second browser window, y1+ y2 (w × image _ h-height, × image _ w)/width can be obtained, where image _ w/(image _ h-y1-y2) is width/height. In this case, the terminal may identify the theme elements in the background picture by using a picture identification technology to obtain the width and height of the region where the theme elements are located, so as to determine the specific values of the distances y1 and y2, so that not only the width proportion of the second target region is the same as that of the second browser window, but also the second target region may include the complete theme elements in the background picture, thereby ensuring that the theme elements in the background picture can be finally and completely displayed in the second browser window, and improving the display effect of the background picture.

307. And executing the target scaling and display process for acquiring the display position and the second target area based on the second target area.

In the embodiment of the present invention, since the aspect ratio of the second target area in the background picture is the same as the aspect ratio of the second browser window, the processing method with the same ratio mentioned in step 302 is returned to, and then the terminal continues to process according to the processing method with the same ratio, where the processing procedure includes: acquiring the display position of each functional area in the second browser window and the target scaling of the second target area, wherein the target scaling is used for scaling the second target area to the same size as the second browser window; and displaying the picture blocks corresponding to the functional areas in the second target area according to the target scaling at the display positions of the functional areas in the second browser window.

By executing the process of obtaining the display position of each functional region and the target scaling of the second target region in step 302 and displaying each picture block in the second target region in step 303 based on the second target region, seamless docking can be achieved, so that the second target region can be completely displayed in the zoomed browser window, and the theme elements in the second target region are not deformed.

Although the scaling ratio of the background picture is width/image _ w or height/image _ h in step 302, the terminal may use the ratio of the width/image _ w as the scaling ratio of the background picture because the height of the second target region actually drawn in the background picture is changed from the height of the background picture and the width of the second target region is not changed from the width of the background picture.

The

above steps

306 and 307 are for the case that the aspect ratio of the background picture is smaller than the aspect ratio of the second browser window, and the terminal can display the second target area in the background picture in the second browser window. In this case, since the coordinates of the top left vertex of the second target region are (0, y), where (0, y) means that the display position of the top left vertex of the second target region in the background picture is (0, y), the terminal starts drawing and displaying from the (0, y) position of the background picture in the second browser window.

When the browser window is zoomed, if the height of the zoomed browser window is smaller than that of the background picture, by the technical means, the theme elements of the background picture can be completely displayed, and the display effect is improved.

Referring to fig. 10, fig. 10 is a flowchart of a background picture display method according to an embodiment of the present invention, as shown in fig. 10, the terminal may first determine whether the width-to-height ratio of the second browser window is equal to the width-to-height ratio of the background picture, and if so, the terminal may obtain the display position of each functional area and draw the background picture, where the process corresponds to the foregoing steps 302 to 303. If not, the terminal judges whether the first target area or the second target area in the background picture needs to be drawn.

Since the coordinates of the top left vertex of the first target area are (x, 0), the terminal draws the first target area in the second browser window, that is, the first target area is shifted to the (x, 0) position of the background picture, and then draws the first target area with the (x, 0) position as the drawing starting point. Since the coordinates of the top-left vertex of the second target area are (0, y), the terminal draws the second target area in the second browser window, that is, the second target area is shifted to the (0, y) position of the background picture, and then draws the second target area with the (0, y) position as the drawing starting point. Therefore, the terminal determines whether the first target region or the second target region in the background picture needs to be drawn, that is, whether the offset width or the height needs to be determined. If the first target area in the background picture is determined to be drawn, that is, the offset width, shifting to the (x, 0) position of the background picture, and then drawing, where the process corresponds to the above steps 304 to 305; if it is determined that the second target region in the background picture is to be drawn, that is, the height is offset, the second target region is offset to the (0, y) position of the background picture, and then drawing is performed, which corresponds to the above steps 306 to 307.

The terminal draws the background picture in the browser frame area and the webpage area by using the technical scheme, so that the seamless butt joint effect can be achieved, no matter the browser window is zoomed in any proportion, the target area with the same width and height proportion as the zoomed browser window in the background picture can be found, namely the corresponding offset position is found, the theme part of the background picture is displayed, and the full-screen wallpaper effect is achieved. The problem of how to align a piece of wallpaper shared by multiple areas in the browser is solved, and meanwhile, the background picture cannot be deformed when the browser is stretched, so that the relative position of the theme elements of the background picture is unchanged. No matter the browser window changes in any proportion, the real-time adaptation of the background picture can be carried out according to the change of the browser window, the effect of no deformation is achieved, and the display effect of the background picture in the browser window is improved.

An example of an actual application scene is given below, in which the wallpaper is a background picture, so as to more intuitively embody the effect brought by the background picture display scheme provided by the embodiment of the present invention, and the scheme is used in a browser installed on a terminal.

Before the browser window is zoomed, a user can set wallpaper in the browser window, for example, the user can operate the browser on the terminal to trigger the terminal to display a skin change page of the browser. Referring to fig. 11 and 12, fig. 11 is a schematic diagram of a skin change page provided by an embodiment of the present invention, fig. 12 is an actual interface display diagram of the skin change page provided by the embodiment of the present invention, and as shown in fig. 11 or 12, a plurality of wallpaper skins may be displayed in the skin change page, and all of the wallpaper skins may be used as background pictures of a browser window. When the user switches to the full-screen wallpaper on the skin changing page, the user can switch to the corresponding wallpaper skin. For example, a user may select one wallpaper skin, and trigger the terminal to set the wallpaper skin selected by the user as the wallpaper of the browser window, and after the wallpaper skin is set, the browser window of the terminal may exhibit the effect of full-screen wallpaper.

Referring to fig. 13 to 16, fig. 13 is a schematic diagram of a browser wallpaper provided in the related art, fig. 14 is a display diagram of an actual interface of a browser wallpaper provided in the related art, fig. 15 is a schematic diagram of a full-screen wallpaper of a browser provided in an embodiment of the present invention, and fig. 16 is a display diagram of an actual interface of a full-screen wallpaper of a browser provided in an embodiment of the present invention. It can be seen that the full-screen wallpaper in fig. 15 or 16 is used to fill the browser window with a whole piece of wallpaper, giving a stronger visual impact than the wallpaper displayed only in the frame area of the browser window in fig. 13 or 14. The full-screen wallpaper display mode of displaying the wallpaper in both the frame area and the webpage area of the browser window can replace skin wallpaper in the browser frame, and the same piece of wallpaper is used in the webpage area, so that the webpage area does not appear as a single-thin hollow space any more. Meanwhile, the set full-screen wallpapers can be all IP (Intellectual Property) related pictures which are used for transmitting elements having a cooperative relationship with the browser, such as a celebrity of the browser, a popular game belonging to the same operator with the browser and the like.

After the browser window is zoomed, the browser window is small in size, and the theme of the background picture can be completely displayed by zooming the background picture in equal proportion. Referring to fig. 17 to 20, fig. 17 is a schematic diagram of displaying a background picture in a zoomed browser window provided in the related art, fig. 18 is an actual interface display diagram of displaying a background picture in a zoomed browser window provided in the related art, fig. 19 is a schematic diagram of displaying a background picture in a zoomed browser window provided in the embodiment of the present invention, and fig. 20 is an actual interface display diagram of displaying a background picture in a zoomed browser window provided in the embodiment of the present invention.

According to the method provided by the embodiment of the invention, the proportion of the background picture to be zoomed is acquired after the browser window is zoomed, and the picture blocks in the background picture are displayed according to the proportion at the display position of each functional area in the zoomed browser window, so that the background picture after being zoomed is displayed in the zoomed browser window, the background picture can be adapted to the zoomed browser window, the theme elements in the background picture can be completely displayed in the zoomed window, and the display effect of the background picture is improved.

Fig. 21 is a schematic structural diagram of a background image display device according to an embodiment of the present invention. Referring to fig. 21, the apparatus includes:

the scaling module 2101 is configured to scale the first application window to obtain a second application window when a scaling instruction is received;

an obtaining module 2102, configured to obtain, when a width-to-height ratio of a background picture in the first application window is equal to a width-to-height ratio of the second application window, a display position of each functional region in the second application window and a target scaling ratio of the background picture, where the target scaling ratio is used to scale the background picture to a size same as that of the second application window;

a display module 2103, configured to display, at the display position of each functional region in the second application window, a picture block corresponding to each functional region in the background picture according to the target scaling.

Optionally, the obtaining module 2102 is configured to obtain a ratio of a height of the second application window to a height of the background picture as the target scaling ratio; or the like, or, alternatively,

the obtaining module 2102 is configured to obtain a ratio of a width of the second application window to a width of the background picture as the target scaling ratio.

Optionally, the display module 2103 is configured to scale the first vertex coordinates of each functional area in the second application window according to the target scaling ratio, so as to obtain second vertex coordinates corresponding to each functional area; in the background picture, determining picture blocks corresponding to the functional areas based on second vertex coordinates corresponding to the functional areas; and drawing the picture blocks corresponding to the functional areas according to the target scaling at the display positions of the functional areas for displaying.

Optionally, the display module 2103 is configured to zoom the background picture according to the target zoom ratio to obtain a zoomed background picture; determining a picture block corresponding to each functional area in the zoomed background picture based on the first vertex coordinates of each functional area; and drawing the picture blocks corresponding to the functional areas at the display positions of the functional areas for display.

Optionally, referring to fig. 22, the apparatus further comprises:

a determining module 2104 for determining a first target region from the background picture when the aspect ratio of the background picture in the first application window is greater than the aspect ratio of the second application window, the height of the first target region being the same as the height of the background picture and the aspect ratio of the first target region being the same as the aspect ratio of the second application window;

the obtaining module 2102 is further configured to perform a process of obtaining a display position and a target scaling of the first target area based on the first target area;

the display module 2103 is further configured to perform a display process based on the first target area.

Optionally, the determining module 2104 is further configured to determine a second target region from the background picture when the aspect ratio of the background picture in the first application window is smaller than the aspect ratio of the second application window, where the width of the second target region is the same as the width of the background picture and the aspect ratio of the second target region is the same as the aspect ratio of the second application window;

the obtaining module 2102 is further configured to perform a process of obtaining a display position and a target scaling of the second target area based on the second target area;

According to the device provided by the embodiment of the invention, the proportion of the background picture to be zoomed is acquired after the application window is zoomed, and the picture blocks in the background picture are displayed according to the proportion at the display position of each functional area in the zoomed application window, so that the background picture after being zoomed in the zoomed application window is displayed, the background picture can be adapted to the zoomed application window, the theme elements in the background picture can be completely displayed in the zoomed application window, and the display effect of the background picture is improved.

It should be noted that: in the background picture display apparatus provided in the above embodiment, when displaying the background picture, only the division of the above functional modules is taken as an example, and in practical applications, the above function distribution may be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the above described functions. In addition, the background picture display apparatus and the background picture display method provided by the above embodiments belong to the same concept, and specific implementation processes thereof are detailed in the method embodiments and are not described herein again.

Fig. 23 is a schematic structural diagram of a terminal 2300 according to an embodiment of the present invention. The terminal 2300 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, motion video Experts compression standard Audio Layer 3), an MP4 player (Moving Picture Experts Group Audio Layer IV, motion video Experts compression standard Audio Layer 4), a notebook computer, or a desktop computer. Terminal 2300 may also be referred to by other names such as user equipment, portable terminals, laptop terminals, desktop terminals, and the like.

In general, the terminal 2300 includes: a processor 2301 and a memory 2302.

The processor 2301 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and so on. The processor 2301 may be implemented in at least one hardware form of a DSP (Digital Signal Processing), an FPGA (Field-Programmable Gate Array), and a PLA (Programmable Logic Array). The processor 2301 may also include a main processor and a coprocessor, where the main processor is a processor for Processing data in an awake state, and is also called a Central Processing Unit (CPU); a coprocessor is a low power processor for processing data in a standby state. In some embodiments, the processor 2301 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the display screen. In some embodiments, the processor 2301 may further include an AI (Artificial Intelligence) processor for processing computing operations related to machine learning.

Memory 2302 may include one or more computer-readable storage media, which may be non-transitory. Memory 2302 may also include high-speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In some embodiments, a non-transitory computer readable storage medium in the memory 2302 is used to store at least one instruction for execution by the processor 2301 to implement the background picture display method provided by the method embodiments herein.

In some embodiments, the terminal 2300 may further optionally include: a peripheral interface 2303 and at least one peripheral. The processor 2301, memory 2302, and peripheral interface 2303 may be connected by bus or signal lines. Various peripheral devices may be connected to peripheral interface 2303 by buses, signal lines, or circuit boards. Specifically, the peripheral device includes: at least one of a radio frequency circuit 2304, a display screen 2305, a camera 2306, an audio circuit 2307, a positioning component 2308, and a power supply 2309.

The peripheral interface 2303 may be used to connect at least one peripheral related to I/O (Input/Output) to the processor 2301 and the memory 2302. In some embodiments, the processor 2301, memory 2302, and peripheral interface 2303 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 2301, the memory 2302, and the peripheral device interface 2303 can be implemented on separate chips or circuit boards, which are not limited by this embodiment.

The Radio Frequency circuit 2304 is used for receiving and transmitting RF (Radio Frequency) signals, also called electromagnetic signals. The radio frequency circuit 2304 communicates with communication networks and other communication devices via electromagnetic signals. The rf circuit 2304 converts an electrical signal into an electromagnetic signal to transmit, or converts a received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 2304 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a subscriber identity module card, and so forth. The radio frequency circuit 2304 may communicate with other terminals through at least one wireless communication protocol. The wireless communication protocols include, but are not limited to: metropolitan area networks, various generation mobile communication networks (2G, 3G, 4G, and 5G), Wireless local area networks, and/or WiFi (Wireless Fidelity) networks. In some embodiments, the rf circuit 2304 may also include NFC (Near Field Communication) related circuits, which are not limited in this application.

The display screen 2305 is used to display a UI (user interface). The UI may include graphics, text, icons, video, and any combination thereof. When the display screen 2305 is a touch display screen, the display screen 2305 also has the ability to capture touch signals on or over the surface of the display screen 2305. The touch signal may be input to the processor 2301 as a control signal for processing. At this point, the display 2305 may also be used to provide virtual buttons and/or a virtual keyboard, also referred to as soft buttons and/or a soft keyboard. In some embodiments, the display screen 2305 may be one, providing the front panel of the terminal 2300; in other embodiments, the display screen 2305 can be at least two, respectively disposed on different surfaces of the terminal 2300 or in a folded design; in still other embodiments, the display 2305 may be a flexible display disposed on a curved surface or a folded surface of the terminal 2300. Even more, the display screen 2305 may be arranged in a non-rectangular irregular figure, i.e. a shaped screen. The Display 2305 may be made of LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode), or other materials.

The camera assembly 2306 is used to capture images or video. Optionally, camera assembly 2306 includes a front camera and a rear camera. Generally, a front camera is disposed at a front panel of the terminal, and a rear camera is disposed at a rear surface of the terminal. In some embodiments, the number of the rear cameras is at least two, and each rear camera is any one of a main camera, a depth-of-field camera, a wide-angle camera and a telephoto camera, so that the main camera and the depth-of-field camera are fused to realize a background blurring function, and the main camera and the wide-angle camera are fused to realize panoramic shooting and VR (Virtual Reality) shooting functions or other fusion shooting functions. In some embodiments, camera assembly 2306 may also include a flash. The flash lamp can be a monochrome temperature flash lamp or a bicolor temperature flash lamp. The double-color-temperature flash lamp is a combination of a warm-light flash lamp and a cold-light flash lamp, and can be used for light compensation at different color temperatures.

The audio circuit 2307 may include a microphone and a speaker. The microphone is used for collecting sound waves of a user and the environment, converting the sound waves into electric signals, and inputting the electric signals into the processor 2301 for processing or inputting the electric signals into the radio frequency circuit 2304 to realize voice communication. For the purpose of stereo sound collection or noise reduction, a plurality of microphones may be provided at different positions of the terminal 2300. The microphone may also be an array microphone or an omni-directional pick-up microphone. The speaker is used to convert electrical signals from the processor 2301 or the radio frequency circuit 2304 into sound waves. The loudspeaker can be a traditional film loudspeaker or a piezoelectric ceramic loudspeaker. When the speaker is a piezoelectric ceramic speaker, the speaker can be used for purposes such as converting an electric signal into a sound wave audible to a human being, or converting an electric signal into a sound wave inaudible to a human being to measure a distance. In some embodiments, the audio circuit 2307 may also include a headphone jack.

The positioning component 2308 is used to locate the current geographic position of the terminal 2300 for navigation or LBS (Location Based Service). The Positioning component 2308 may be a Positioning component based on the united states GPS (Global Positioning System), the chinese beidou System, the russian graves System, or the european union galileo System.

Power supply 2309 is used to provide power to various components in terminal 2300. The power source 2309 may be alternating current, direct current, disposable batteries, or rechargeable batteries. When the power source 2309 includes a rechargeable battery, the rechargeable battery may support wired or wireless charging. The rechargeable battery may also be used to support fast charge technology.

In some embodiments, terminal 2300 also includes one or more sensors 2310. The one or more sensors 2310 include, but are not limited to: an acceleration sensor 2311, a gyro sensor 2312, a pressure sensor 2313, a fingerprint sensor 2314, an optical sensor 2315, and a proximity sensor 2316.

The acceleration sensor 2311 can detect the magnitude of acceleration in three coordinate axes of a coordinate system established with the terminal 2300. For example, the acceleration sensor 2311 may be used to detect components of the gravitational acceleration in three coordinate axes. The processor 2301 may control the touch display screen 2305 to display a user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 2311. The acceleration sensor 2311 may also be used for game or user motion data acquisition.

The gyro sensor 2312 can detect the body direction and the rotation angle of the terminal 2300, and the gyro sensor 2312 can cooperate with the acceleration sensor 2311 to acquire the 3D action of the user on the terminal 2300. The processor 2301 may implement the following functions according to the data collected by the gyro sensor 2312: motion sensing (such as changing the UI according to a user's tilting operation), image stabilization at the time of photographing, game control, and inertial navigation.

Pressure sensor 2313 may be disposed on a side bezel of terminal 2300 and/or an underlying layer of touch display 2305. When the pressure sensor 2313 is arranged on the side frame of the terminal 2300, a holding signal of a user to the terminal 2300 can be detected, and the processor 2301 performs left-right hand identification or shortcut operation according to the holding signal collected by the pressure sensor 2313. When the pressure sensor 2313 is disposed at the lower layer of the touch display screen 2305, the processor 2301 controls the operability control on the UI interface according to the pressure operation of the user on the touch display screen 2305. The operability control comprises at least one of a button control, a scroll bar control, an icon control and a menu control.

The fingerprint sensor 2314 is used for collecting a fingerprint of the user, and the processor 2301 identifies the user according to the fingerprint collected by the fingerprint sensor 2314, or the fingerprint sensor 2314 identifies the user according to the collected fingerprint. Upon recognizing that the user's identity is a trusted identity, the processor 2301 authorizes the user to perform relevant sensitive operations including unlocking a screen, viewing encrypted information, downloading software, paying, and changing settings, etc. The fingerprint sensor 2314 may be disposed on the front, back, or side of the terminal 2300. When a physical key or a vendor Logo is provided on the terminal 2300, the fingerprint sensor 2314 may be integrated with the physical key or the vendor Logo.

The optical sensor 2315 is used to collect ambient light intensity. In one embodiment, the processor 2301 may control the display brightness of the touch display screen 2305 based on the ambient light intensity collected by the optical sensor 2315. Specifically, when the ambient light intensity is high, the display brightness of the touch display screen 2305 is increased; when the ambient light intensity is low, the display brightness of the touch display screen 2305 is turned down. In another embodiment, the processor 2301 may also dynamically adjust the shooting parameters of the camera assembly 2306 according to the intensity of ambient light collected by the optical sensor 2315.

A proximity sensor 2316, also known as a distance sensor, is typically disposed on the front panel of the terminal 2300. The proximity sensor 2316 is used to collect the distance between the user and the front surface of the terminal 2300. In one embodiment, the processor 2301 controls the touch display screen 2305 to switch from the bright screen state to the rest screen state when the proximity sensor 2316 detects that the distance between the user and the front surface of the terminal 2300 is gradually decreased; when the proximity sensor 2316 detects that the distance between the user and the front surface of the terminal 2300 is gradually increased, the processor 2301 controls the touch display screen 2305 to switch from a breath screen state to a bright screen state.

Those skilled in the art will appreciate that the configuration shown in fig. 23 does not constitute a limitation of terminal 2300, and may include more or fewer components than those shown, or may combine certain components, or may employ a different arrangement of components.

In an exemplary embodiment, a computer readable storage medium, such as a memory, including at least one instruction, at least one program, a set of codes, or a set of instructions, which may be loaded and executed by a processor to perform the background picture display method in the embodiment corresponding to fig. 2 or fig. 3 is also provided. For example, the computer-readable storage medium may be a Read-Only Memory (ROM), a Random-Access Memory (RAM), a Compact Disc Read-Only Memory (CD-ROM), a magnetic tape, a floppy disk, an optical data storage device, and the like.

It will be understood by those skilled in the art that all or part of the steps for implementing the above embodiments may be implemented by hardware, or may be implemented by a program instructing relevant hardware, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.

The present invention is not limited to the above preferred embodiments, and any modifications, equivalent replacements, improvements, etc. within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A background picture display method, comprising:

when the width-to-height ratio of a background picture in the first application window is equal to the width-to-height ratio of the second application window, acquiring the display position of each functional region in the second application window and a target scaling ratio of the background picture, wherein the target scaling ratio is used for scaling the background picture to the same size as the second application window, and the functional regions of the second application window comprise a frame region of the second application window and a webpage region of the second application window;

displaying the picture blocks corresponding to the functional areas in the background picture according to the target scaling at the display positions of the functional areas in the second application window;

displaying, at the display position of each functional region in the second application window, the picture block corresponding to each functional region in the background picture according to the target scaling, including:

sending related information of the second application window to a server, wherein the related information comprises size information of the second application window, size information of each functional area and the target scaling, or the related information comprises the position of a picture block corresponding to the webpage area in the background picture; the server is used for returning the related data of the webpage area according to the related information, wherein the related data comprises webpage data and picture data of a picture block corresponding to the webpage area;

and displaying the webpage content and the picture content in the webpage area according to the related data.

2. The method of claim 1, wherein obtaining the target scaling of the background picture comprises:

and acquiring the ratio of the width of the second application window to the width of the background picture as the target scaling ratio.

3. The method according to claim 1, wherein the displaying, at the display position of each functional region in the second application window, the picture block corresponding to each functional region in the background picture at the target zoom scale includes:

in the background picture, determining picture blocks corresponding to the functional areas based on second vertex coordinates corresponding to the functional areas;

4. The method according to claim 1, wherein the displaying, at the display position of each functional region in the second application window, the picture block corresponding to each functional region in the background picture at the target zoom scale includes:

determining a picture block corresponding to each functional area in the zoomed background picture based on the first vertex coordinates of each functional area;

5. The method of claim 1, wherein after the scaling instruction is received to scale the first application window to obtain the second application window, the method further comprises:

when the width-height ratio of a background picture in the first application window is larger than that of the second application window, determining a first target area from the background picture, wherein the height of the first target area is the same as that of the background picture, and the width-height ratio of the first target area is the same as that of the second application window;

6. The method of claim 1, wherein after the scaling instruction is received to scale the first application window to obtain the second application window, the method further comprises:

when the width-to-height ratio of a background picture in the first application window is smaller than that of the second application window, determining a second target area from the background picture, wherein the width of the second target area is the same as that of the background picture and the width-to-height ratio of the second target area is the same as that of the second application window;

7. A background picture display apparatus, comprising:

an obtaining module, configured to obtain, when a width-to-height ratio of a background picture in the first application window is equal to a width-to-height ratio of the second application window, a display position of each functional region in the second application window and a target scaling ratio of the background picture, where the target scaling ratio is used to scale the background picture to a size same as that of the second application window, and the functional region of the second application window includes a frame region of the second application window and a web page region of the second application window;

a display module, configured to display, at a display position of each functional region in the second application window, a picture block corresponding to each functional region in the background picture according to the target scaling;

the display module is further configured to send related information of the second application window to a server, where the related information includes size information of the second application window, size information of each functional region, and the target scaling, or the related information includes a position of a picture block corresponding to the web page region in the background picture; the server is used for returning the related data of the webpage area according to the related information, wherein the related data comprises webpage data and picture data of a picture block corresponding to the webpage area;

the display module is further used for displaying webpage content and picture content in the webpage area according to the related data.

8. The apparatus according to claim 7, wherein the obtaining module is configured to obtain a ratio of a height of the second application window to a height of the background picture as the target scaling ratio; or the like, or, alternatively,

the obtaining module is configured to obtain a ratio of the width of the second application window to the width of the background picture as the target scaling ratio.

9. The apparatus according to claim 7, wherein the display module is configured to scale the first vertex coordinates of each functional region in the second application window according to the target scaling ratio, so as to obtain second vertex coordinates corresponding to each functional region; in the background picture, determining picture blocks corresponding to the functional areas based on second vertex coordinates corresponding to the functional areas; and drawing the picture blocks corresponding to the functional areas according to the target scaling at the display positions of the functional areas for displaying.

10. The apparatus according to claim 7, wherein the display module is configured to zoom the background picture according to the target zoom ratio to obtain a zoomed background picture; determining a picture block corresponding to each functional area in the zoomed background picture based on the first vertex coordinates of each functional area; and drawing the picture blocks corresponding to the functional areas at the display positions of the functional areas for display.

11. The apparatus of claim 7, further comprising:

a determining module, configured to determine a first target region from the background picture when a width-to-height ratio of a background picture in the first application window is greater than a width-to-height ratio of the second application window, where a height of the first target region is the same as a height of the background picture and the width-to-height ratio of the first target region is the same as the width-to-height ratio of the second application window;

the obtaining module is further configured to perform a process of obtaining a display position and a target scaling of the first target area based on the first target area;

the display module is further configured to perform a display process based on the first target area.

12. The apparatus of claim 7, further comprising:

a determining module, configured to determine a second target region from the background picture when a width-to-height ratio of a background picture in the first application window is smaller than a width-to-height ratio of the second application window, where a width of the second target region is the same as a width of the background picture and a width-to-height ratio of the second target region is the same as a width-to-height ratio of the second application window;

the obtaining module is further configured to perform a process of obtaining a display position and a target scaling of the second target area based on the second target area;

the display module is further configured to perform a display process based on the second target area.

13. A terminal, characterized in that the terminal comprises a processor and a memory, wherein at least one instruction, at least one program, a set of codes, or a set of instructions is stored in the memory, and the at least one instruction, the at least one program, the set of codes, or the set of instructions is loaded and executed by the processor to implement the background picture display method according to any one of claims 1 to 6.

14. A computer-readable storage medium having stored therein at least one instruction, at least one program, a set of codes, or a set of instructions, which is loaded and executed by a processor to implement the background picture display method according to any one of claims 1 to 6.