Image display method, device and equipment

Abstract

The embodiment of the invention provides an image display method, device and equipment. The method comprises the following steps: acquiring an image display request, wherein the image display request comprises an identifier of at least one first element in a to-be-displayed first image, the image width of the first image and the resolution width of a first display screen for displaying the first image; determining a target proportion of each first element according to the image width and the resolution width; according to the target proportion of each first element, scaling the first image to obtain a target image; and displaying the target image through the first display screen. And the image display effect is improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to an image display method, device and equipment. Background Art

[0002] Users can display the content they want to express through the display screen. Since each display screen may have different resolutions and different aspect ratios, when displaying the content in the terminal device through the display screen, the content to be displayed needs to be scaled so that the scaled image fits the display screen.

[0003] In actual application, the image corresponding to the content to be displayed can be determined, and the image can be divided into multiple areas. According to the size of the display screen and the size of each area, each area is scaled to obtain the target image. The target image is then displayed on the display screen. In the above process, only each area is scaled, and the size of each element in the area cannot be set. In some extreme cases, there will be a proportional stretching phenomenon, resulting in poor image display effect. Summary of the invention

[0004] The embodiments of the present application provide an image display method, device and equipment to solve the problem of poor image display effect.

[0005] In a first aspect, an embodiment of the present application provides an image display method, comprising:

[0006] Acquire an image display request, where the image display request includes an identifier of at least one first element in a first image to be displayed, an image width of the first image, and a resolution width of a first display screen that displays the first image;

[0007] Determining a target ratio of each first element according to the image width and the resolution width;

[0008] According to the target ratio of each first element, scaling the first image to obtain a target image;

[0009] The target image is displayed through the first display screen.

[0010] In the embodiment of the present application, each first element is scaled according to the target ratio of each first element, rather than scaling each region, to avoid the situation where the size of each element in the region cannot be set, and in some extreme cases, the ratio may be stretched, thereby improving the image display effect.

[0011] In a possible implementation manner, determining a target ratio of each first element according to the image width and the resolution width includes:

[0012] Get the preset width;

[0013] When the resolution width is less than or equal to the preset width, a target ratio of each first element is determined according to the image width and the resolution width.

[0014] In the embodiment of the present application, when the resolution width is less than or equal to the preset width, the scaling capability of scale in CSS is used to set the target scaling more accurately, meet the display requirements on a small screen, and improve the flexibility of image display.

[0015] In a possible implementation manner, determining a target ratio of each first element according to the image width and the resolution width includes:

[0016] Determine the ratio of the resolution width to the image width as the image ratio;

[0017] Get the preset offset ratio;

[0018] Determine the sum of the preset offset ratio and the image ratio as the target offset ratio;

[0019] Determining the target ratio includes the image ratio and the target offset ratio.

[0020] In the embodiment of the present application, by setting a preset offset ratio, the stretching phenomenon caused by the inconsistency between the resolution of the user input signal and the physical resolution aspect ratio of the first display screen can be avoided, thereby improving the image display effect.

[0021] In a possible implementation, scaling the first image according to a target ratio of each first element to obtain a target image includes:

[0022] Determine the initial element width and initial element height of each first element;

[0023] determining a standard element width of each first element according to an initial element width of each first element, the image width and the resolution width;

[0024] determining a standard element height of each first element based on an initial element height of each first element, the image width, the image width, the image ratio, and the target offset ratio;

[0025] The first image is scaled according to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element to obtain the target image.

[0026] In the embodiment of the present application, each first element can be scaled, thereby improving the accuracy of image scaling. The scaling can be performed according to the target ratio, and the code is written according to the size set in the first image when determining the code, which is easy to use and has strong generalizability.

[0027] In a possible implementation, for any first element, determining an initial element width and an initial element height of the first element includes:

[0028] Obtaining the resolution height of the first display screen;

[0029] Get the proportional width and proportional height of the first element;

[0030] determining an initial element width of the first element according to the scale width and the resolution width;

[0031] An initial element height of the first element is determined according to the scale height and the resolution height.

[0032] In the embodiment of the present application, the initial element width and the initial element height of each first element are determined for subsequent scaling processing, thereby improving the accuracy of the scaling processing and thus improving the image display effect.

[0033] In a possible implementation manner, for any first element, determining a standard element width of the first element according to the element width of the first element, the image width, and the resolution width includes:

[0034] Determine the ratio of the initial element width to the resolution width as the intermediate width;

[0035] The product of the image width and the intermediate width is determined as the standard element width of the first element.

[0036] In the embodiment of the present application, the width set for the first element (the setting here refers to the width obtained by calculating according to the formula) is the minimum width. When the width of the content in the first element is greater than the set minimum width, the browser will automatically increase the width (applicable to all browsers), thereby avoiding the problem of insufficient width of the first element, resulting in the content being blocked.

[0037] In a possible implementation, for any first element, determining a standard element height of each first element according to the initial element height of each first element, the image width, the image width, the image ratio, and the target offset ratio includes:

[0038] Determine the ratio of the initial element height to the resolution width as the intermediate height;

[0039] The product of the image width and the middle height is determined as the height to be selected;

[0040] Determine the ratio of the image ratio to the target offset ratio as an intermediate ratio;

[0041] The product of the candidate height and the intermediate ratio is determined as the standard element height of the first element.

[0042] In the embodiment of the present application, the width set for the first element (the setting here refers to the width obtained by calculating according to the formula) is the minimum width. When the width of the content in the first element is greater than the set minimum width, the browser will automatically increase the width (applicable to all browsers), thereby avoiding the problem of insufficient width of the first element, resulting in the content being blocked.

[0043] In a possible implementation, scaling the first image according to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element to obtain the target image includes:

[0044] For any first element, obtain the first position of the first element;

[0045] Scaling the first element according to the first position and the target ratio of the first element to obtain a target element corresponding to the first element, where the element width of the target element is greater than or equal to the standard element width, and the element height of the target element is greater than or equal to the standard element height;

[0046] Determine a target width and a target height according to the target ratio, the image width and the image height;

[0047] It is determined that the target image includes at least one target element, the image width of the target image is the target width, and the image height of the target image is the target height.

[0048] In the embodiment of the present application, the image display method not only meets the screen adaptation requirement, but also solves the stretching phenomenon caused by the non-standard screen, and is more convenient and flexible to use.

[0049] In a second aspect, an embodiment of the present application provides an image display device, the device comprising:

[0050] an acquisition module, configured to acquire an image display request, wherein the image display request includes at least one first element in a first image to be displayed, an image width of the first image, and a resolution width of a first display screen for displaying the first image;

[0051] A determination module, configured to determine a target ratio of each first element according to the image width and the resolution width;

[0052] A processing module, configured to perform scaling processing on the first image according to a target ratio of each first element to obtain a target image;

[0053] A display module is used to display the target image through the first display screen.

[0054] In a possible implementation manner, the determining module is specifically configured to:

[0055] Get the preset width;

[0056] When the resolution width is less than or equal to the preset width, a target ratio of each first element is determined according to the image width and the resolution width.

[0057] In a possible implementation manner, the determining module is specifically configured to:

[0058] Determine the ratio of the resolution width to the image width as the image ratio;

[0059] Get the preset offset ratio;

[0060] Determine the sum of the preset offset ratio and the image ratio as the target offset ratio;

[0061] Determining the target ratio includes the image ratio and the target offset ratio.

[0062] In a possible implementation manner, the processing module is specifically used to:

[0063] Determine the initial element width and initial element height of each first element;

[0064] determining a standard element width of each first element according to an initial element width of each first element, the image width and the resolution width;

[0065] determining a standard element height of each first element based on an initial element height of each first element, the image width, the image width, the image ratio, and the target offset ratio;

[0066] The first image is scaled according to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element to obtain the target image.

[0067] In a possible implementation manner, the processing module is specifically used to:

[0068] Obtaining the resolution height of the first display screen;

[0069] Get the proportional width and proportional height of the first element;

[0070] determining an initial element width of the first element according to the scale width and the resolution width;

[0071] An initial element height of the first element is determined according to the scale height and the resolution height.

[0072] In a possible implementation manner, the processing module is specifically used to:

[0073] Determine the ratio of the initial element width to the resolution width as the intermediate width;

[0074] The product of the image width and the intermediate width is determined as the standard element width of the first element.

[0075] In a possible implementation manner, the processing module is specifically used to:

[0076] Determine the ratio of the initial element height to the resolution width as the intermediate height;

[0077] The product of the image width and the middle height is determined as the height to be selected;

[0078] Determine the ratio of the image ratio to the target offset ratio as an intermediate ratio;

[0079] The product of the candidate height and the intermediate ratio is determined as the standard element height of the first element.

[0080] In a possible implementation manner, the processing module is specifically used to:

[0081] For any first element, obtain the first position of the first element;

[0082] Scaling the first element according to the first position and the target ratio of the first element to obtain a target element corresponding to the first element, where the element width of the target element is greater than or equal to the standard element width, and the element height of the target element is greater than or equal to the standard element height;

[0083] Determine a target width and a target height according to the target ratio, the image width and the image height;

[0084] It is determined that the target image includes at least one target element, the image width of the target image is the target width, and the image height of the target image is the target height.

[0085] In a third aspect, an embodiment of the present application provides an image display device, including:

[0086] at least one processor; and

[0087] a memory communicatively connected to the at least one processor; wherein,

[0088] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute any method described in the first aspect.

[0089] In a fourth aspect, an embodiment of the present application provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable the computer to execute any one of the methods described in the first aspect.

[0090] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program, which implements any method in the first aspect when executed by a processor.

[0091] The image display method, device and equipment provided by the embodiments of the present application are as follows: after determining the resolution width of the first image to be displayed, the terminal device determines the target ratio of each first element according to the image width and the resolution width. According to the target ratio of each first element, the first image is scaled to obtain the target image. The terminal device displays the target image through the first display screen. In the above process, each first element can be scaled according to the target ratio of each first element. Instead of scaling each area only, it is avoided that the size of each element in the area cannot be set, and in some extreme cases, there may be a situation of proportional stretching. The effect of image display is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0092] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0093] Figure 1A A schematic diagram of an application scenario provided in an embodiment of the present application;

[0094] Figure 1B A schematic diagram of another application scenario provided by an embodiment of the present application;

[0095] Figure 2 A schematic diagram of a flow chart of an image display method provided in an embodiment of the present application;

[0096] Figure 3 A schematic diagram of a process of requesting image display provided by an embodiment of the present application;

[0097] Figure 4 A schematic diagram of a flow chart of another image display method provided in an embodiment of the present application;

[0098] Figure 5 A schematic diagram of the image display process provided by an embodiment of the present application;

[0099] Figure 6 A schematic diagram of the structure of an image display device provided in an embodiment of the present application;

[0100] Figure 7 A schematic diagram of the structure of an image display device provided in an embodiment of the present application.

[0101] The above drawings have shown clear embodiments of the present application, which will be described in more detail later. These drawings and text descriptions are not intended to limit the scope of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. DETAILED DESCRIPTION

[0102] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0103] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0104] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0105] For ease of understanding, the application scenarios applicable to the embodiments of the present application are described below in conjunction with FIG. 1 .

[0106] Figure 1A A schematic diagram of an application scenario provided by an embodiment of the present application. Figure 1A , including a terminal device 101 and a display screen 102. The terminal device 101 may be a tablet computer, a computer, etc. The display device 102 may be a terminal device, a smart screen, a projector, a smart TV, a smart screen, etc. After the terminal device 101 and the display device 102 are connected via a wireless network, Bluetooth, or a Universal Serial Bus (USB), the display screen of the display device 102 may display the page or image displayed by the terminal device 101 in real time. Since the size and resolution of the display screen of the display device 102 may not match the size and resolution of the display screen in the terminal device 101. Therefore, it is necessary to scale the image to be displayed so that the scaled image fits the display screen.

[0107] Figure 1B This is a schematic diagram of another application scenario provided by the embodiment of the present application. Figure 1B , including a display device 103. The display device 103 may be a terminal device, a smart screen, a projector, a smart TV, a smart screen, etc. When the display screen of the display device 103 displays the first image, the resolution of the display device 103 may not match that of the first image. At this time, the display device 103 needs to scale the first image to obtain a target image so that the target image matches the display screen of the display device 103.

[0108] In actual application, the image corresponding to the content to be displayed can be determined, and the image can be divided into multiple areas. According to the size of the display screen and the size of each area, each area is scaled to obtain the target image. The target image is then displayed on the display screen. In the above process, only each area is scaled, and the size of each element in the area cannot be set. In some extreme cases, there may be a proportional stretching phenomenon, resulting in poor image display effect.

[0109] In an embodiment of the present application, after determining the resolution width of the first image to be displayed, the terminal device determines the target ratio of each first element according to the image width and the resolution width. According to the target ratio of each first element, the first image is scaled to obtain a target image. The terminal device displays the target image through the first display screen. In the above process, each first element can be scaled according to the target ratio of each first element. Instead of only scaling each area, it is avoided that the size of each element in the area cannot be set, and in some extreme cases, there may be a situation of proportional stretching. The effect of image display is improved.

[0110] The method shown in the present application is described below through specific embodiments. It should be noted that the following embodiments can exist independently or in combination with each other, and the same or similar contents will not be described repeatedly in different embodiments.

[0111] Figure 2 This is a flow chart of an image display method provided in an embodiment of the present application. Figure 2 , the method may include:

[0112] S201: Obtain an image display request.

[0113] The execution subject of the embodiment of the present application may be an image display device, or an image display device arranged in the image display device. The image display device may be implemented by software, or by a combination of software and hardware. The image display device may be a terminal device, a smart screen, a projector, a smart TV, a smart screen, etc. The terminal device may be a tablet computer, a computer, etc. The image display device includes a first display screen, or the first display screen is connected to the image display device.

[0114] The image display request includes an identifier of at least one first element in a first image to be displayed, an image width of the first image, and a resolution width of a first display screen that displays the first image.

[0115] The first image may be a design drawing of a web page. The first image includes the layout of the web page and at least one first element. The first element may be an image, text, table, etc.

[0116] The user can determine the identifier of each first element and the image width in the page provided by the image display device. The terminal device responds to the user's input selection operation and obtains the resolution width of the first display screen through a command. And generates an image display request. For example, the command can be the window.innerwidth command of js.

[0117] The operation page can be displayed through a preset command or an application in the image display device. This application does not make any restrictions.

[0118] Next, combine Figure 3 , the process of obtaining an image display request is described. Figure 3 A schematic diagram of the process of image display request provided by the embodiment of the present application. Figure 3, including interface 301 and interface 302. Interface 301 and interface 302 may be pages provided by the image display device. Referring to interface 301, the user may input a preset command in the image display device, and the image display device displays an operation page in response to the user's input operation. The operation page includes a drop-down selection menu corresponding to at least one element, a drop-down selection menu corresponding to the image width, and a text input box.

[0119] Referring to interface 302, the user determines that the identifier of the first element is element A1 in the drop-down selection menu corresponding to element 1, determines that the identifier of the first element is element A2 in the drop-down selection menu corresponding to element 2, determines that the identifier of the first element is element A3 in the drop-down selection menu corresponding to element 3, determines that the image width is 1024 in the drop-down selection menu corresponding to the image width, and clicks the OK icon. In response to the user's input selection operation, the image display device obtains the resolution width of the first display screen as 800 through the command. In summary, the image display device generates an image display request as shown in Table 1:

[0120] Table 1

[0121]

[0122] S202: Determine a target ratio of each first element according to the image width and the resolution width.

[0123] The target ratio of each first element may be determined according to the image width and the resolution width in the following manner: obtaining a preset width; and when the resolution width is less than or equal to the preset width, determining the target ratio of each first element according to the image width and the resolution width.

[0124] The preset width may be the image width of the first image. The preset width may be set in advance and stored in a preset storage space of the image display device.

[0125] When the resolution width is greater than the preset width, the target ratio of each first element can be determined by a percentage unit adaptation method, that is, the target ratio of the first element is determined according to the width and height of the first element and the width and height of the parent element of the first element.

[0126] It should be noted that the image display method provided in the embodiment of the present application can be implemented through the scale attribute of CSS.

[0127] The target ratio is determined by adapting the percentage unit and the scaling capability of the scale in CSS, which can meet the display requirements on both ultra-large screens and small screens, thereby improving the flexibility of image display.

[0128] The target ratio of each first element can be determined according to the image width and the resolution width in the following manner: the ratio of the resolution width to the image width is determined as the image ratio; a preset offset ratio is obtained; the sum of the preset offset ratio and the image ratio is determined as the target offset ratio; and the target ratio is determined to include the image ratio and the target offset ratio.

[0129] The preset offset ratio may be set in advance and stored in a preset storage space of the image display device. The preset offset ratio may be 0. The preset storage space of the image display device may be the local storage of the browser.

[0130] If the preset offset ratio is greater than 0, the element is stretched in the horizontal direction. If the preset offset ratio is less than 0, the element is stretched in the vertical direction.

[0131] In actual application, the user may set a preset offset ratio, and adjust the preset offset ratio according to the display effect of each first element in the displayed target image to improve the image display effect.

[0132] By setting a preset offset ratio, the stretching phenomenon caused by the inconsistency between the aspect ratio of the resolution input by the user and the physical resolution of the first display screen can be avoided, thereby improving the image display effect.

[0133] For example, according to Table 1 above, it can be determined that the resolution width of the first display screen is smaller than the image width. Therefore, the image display device obtains a preset offset ratio of 0. The image display device determines that the image ratio is 800 / 1024=0.78, and determines that the target offset ratio is 0. The image display device determines that the target ratio = (0.78, 0.78). Therefore, the image display device sets the transform value of the CSS to scale (0.78, 0.78).

[0134] S203 . Scaling the first image according to the target ratio of each first element to obtain a target image.

[0135] The first image can be scaled according to the target ratio of each first element in the following manner to obtain the target image: determine the initial element width and the initial element height of each first element; determine the standard element width of each first element according to the initial element width, image width and resolution width of each first element; determine the standard element height of each first element according to the initial element height, image width, image width, image ratio and target offset ratio of each first element; scale the first image according to the standard element width of each first element, the standard element height of each first element and the target ratio of each first element to obtain the target image.

[0136] Each first element can be scaled, which improves the accuracy of image scaling. It can also be scaled according to a target ratio, and when determining a code, the code is written according to the size set in the first image, which is easy to use and has strong generalizability.

[0137] For example, according to the above example, the target ratio is determined to be (0.78, 0.78). The image display device determines the initial element width and initial element height of each first element shown in Table 1 as shown in Table 2:

[0138] Table 2

[0139]

[0140] The image display device determines the standard element width of each first element according to the initial element width, image width and resolution width of each first element. And determines the standard element height of each first element according to the initial element height, image width, image width, image ratio and target offset ratio of each first element. The image display device performs scaling processing on the first image according to the standard element width of each first element, the standard element height of each first element and the target ratio of each first element, and obtains the target image as image A.

[0141] S204: Display the target image via the first display screen.

[0142] It should be noted that when an image display request is obtained, the first display screen will display an initialized first image, and after determining the target image corresponding to the first image, the first display screen will display the target image. The time interval between the two image displays is short and cannot be detected by the naked eye.

[0143] For example, according to the above example, the target image is determined to be image A. The image display device displays the target image A through the first display screen.

[0144] The image display method provided in the embodiment of the present application obtains an image display request. According to the image width and the resolution width, the target ratio of each first element is determined. According to the target ratio of each first element, the first image is scaled to obtain a target image. The target image is displayed through the first display screen. In the above process, each first element can be scaled according to the target ratio of each first element. Instead of only scaling each area, it is avoided that the size of each element in the area cannot be set, and in some extreme cases, there may be a situation of proportional stretching. The effect of image display is improved.

[0145] Based on any of the above embodiments, Figure 4 , the detailed process of image display is explained.

[0146] Figure 4 This is a flowchart of another image display method provided in an embodiment of the present application. Figure 4 , the method comprising:

[0147] S401: Obtain an image display request.

[0148] It should be noted that the user may also determine, as required, to perform scaling processing on at least one first element in the first image instead of performing processing on each first element in the first image.

[0149] Since users can independently set the elements to be scaled, the flexibility of image display is improved.

[0150] S402: Determine a target ratio of each first element according to the image width and the resolution width.

[0151] For example, the image display request obtained by the image display device may be specifically as shown in Table 3:

[0152] Table 3

[0153]

[0154] According to Table 3, it can be determined that the resolution width of the first display screen is smaller than the image width. Therefore, the image display device obtains a preset offset ratio of 0. The image display device determines that the image ratio is 640 / 1440=0.44, and determines that the target offset ratio is 0. The image display device determines that the target ratio=(0.44, 0.44).

[0155] S403: Determine an initial element width and an initial element height of each first element.

[0156] For any first element, the initial element width and initial element height of each first element can be determined in the following manner: obtain the proportional width and proportional height of the first element; obtain the resolution height of the first display screen; determine the initial element width of the first element based on the proportional width and the resolution width; determine the initial element height of the first element based on the proportional height and the resolution height.

[0157] The proportional width of the first element is the proportion of the width of the first element in the first image, and the proportional height of the first element is the proportion of the height of the first element in the first image. The user can determine the proportional width and proportional height of each first element on the operation page provided by the image display device. The image display device obtains the proportional width and proportional height of each first element in response to the user's input selection operation.

[0158] It should be noted that if the proportional height of the first element is not set (for example, a long article whose height varies with the content of the article), not setting the proportional height will not affect the acquisition of the initial element height.

[0159] The image display device may obtain the resolution height of the first display screen through a command. The image display device may determine the product of the proportional width and the resolution width as the initial element width of the first element. The initial element height of the first element may be determined by multiplying the product of the proportional height and the resolution height.

[0160] When the initial element width and the initial element height are not scaled, the first display screen displays the element width and element height of the first element.

[0161] Optionally, the initial element width and initial element height of each first element may be obtained through an interface. The interface may be a js interface or a web framework interface, and this application does not impose any restrictions.

[0162] The initial element width and initial element height of each first element are determined for subsequent scaling processing, thereby improving the accuracy of the scaling processing and thus improving the image display effect.

[0163] For example, according to the above example, the first elements are determined to be element B1 and element B2. The user enters a preset command in the image display device, and the image display device displays an operation page in response to the user's input operation. The user determines the proportional width and proportional height of each first element in the operation page, and the image display device selects the operation in response to the user's input, and obtains the proportional width of element B1 as 0.2 and the proportional height as 0.2. The proportional width of element B2 is obtained as 0.3 and the proportional height is 0.5. The image display device obtains the resolution height of the first display screen as 640, and determines the initial element width and initial element height of each first element based on the resolution width, resolution height, and the proportional width and proportional height of each first element, which can be specifically shown in Table 4:

[0164] Table 4

[0165]

[0166] S404: Determine a standard element width of each first element according to the initial element width, the image width, and the resolution width of each first element.

[0167] The standard element width of each first element can be determined according to the initial element width, image width and resolution width of each first element in the following manner: the ratio of the initial element width to the resolution width is determined as the intermediate width; the product of the image width and the intermediate width is determined as the standard element width of the first element.

[0168] When scaling, the width of the first element (here the setting refers to the width calculated by the formula) is the minimum width. When the width of the content in the first element is greater than the minimum width, the browser will automatically increase the width (applicable to all browsers), avoiding the problem of the first element being insufficient and causing the content to be blocked. This improves the image display effect.

[0169] For example, for the element B1 shown in the above example, the middle width of the element B1 is determined to be 128 / 640=0.2, and the standard element width of the element B1 is determined to be 1440*0.2=228. According to this method, the standard element width of the element B2 is determined to be 228.

[0170] S405 . Determine a standard element height of each first element according to the initial element height, image width, image width, image ratio, and target offset ratio of each first element.

[0171] The standard element height of each first element can be determined according to the initial element height, image width, image width, image ratio and target offset ratio of each first element in the following manner: the ratio of the initial element height and the resolution width is determined as the intermediate height; the product of the image width and the intermediate height is determined as the height to be selected; the ratio of the image ratio and the target offset ratio is determined as the intermediate ratio; the product of the to-be-selected height and the intermediate ratio is determined as the standard element height of the first element.

[0172] When zooming, the width set for the first element (the setting here refers to the width calculated by the formula) is the minimum width. When the width of the content in the first element is greater than the set minimum width, the browser will automatically increase the width (applicable to all browsers). This improves the image display effect.

[0173] For example, for the element B1 shown in the above example, the middle height of element B1 is determined to be 192 / 640=0.3, the candidate height of element B1 is determined to be 1440*0.3=432, and the middle ratio of element B1 is determined to be 0.44 / 0.44=1. Therefore, the standard element height of element B1 can be determined to be 432. According to this method, the standard element height of element B2 is determined to be 720.

[0174] It should be noted that the image width, initial element width, standard element width, and target width in the embodiments of the present application are all pixel widths. The image height, initial element height, standard element height, and target height in the embodiments of the present application are all pixel heights.

[0175] S406. For any first element, obtain the first position of the first element.

[0176] The user can determine the first position of each first element according to business needs and set the first position in the value of transformOrigin of transform. The first position is used to indicate the starting point of the first element when scaling.

[0177] The first position may be the center position of the first element, or may be the upper right corner, upper left corner, etc. of the first element, which is not limited in the present application.

[0178] For example, according to the above example, the image display device obtains the first position of the element B1 as position B1, and the first position of the element B2 as position B2.

[0179] S407: Scaling the first element according to the first position and the target ratio of the first element to obtain a target element corresponding to the first element.

[0180] The element width of the target element is greater than or equal to the standard element width, and the element height of the target element is greater than or equal to the standard element height.

[0181] When performing the scaling process, the scaling process is performed according to the first position and the target ratio. When it is determined that the element width of the first element is less than the standard element width and / or the element height of the first element is less than the standard element height during the scaling process, the scaling process is not continued on the first element, and the first element when the scaling process is stopped is determined as the target element.

[0182] For example, the image display device scales element B1 according to position B1 and target ratio (0.44, 0.44) to obtain target element B11 corresponding to the first element. The image display device scales element B2 according to position B2 and target ratio (0.44, 0.44) to obtain target element B21 corresponding to the first element.

[0183] S408: Determine the target width and target height according to the target ratio, the image width and the image height.

[0184] When scaling the first element, the entire image size needs to be scaled.

[0185] For example, according to the above example, the image width is determined to be 1440, and the image height is determined to be 1050. According to the target ratio, the image width and the image height, the target width is determined to be width B, and the height is determined to be height B.

[0186] S409: Determine that the target image includes at least one target element.

[0187] The image width of the target image is the target width, and the image height of the target image is the target height.

[0188] For example, according to the above example, it is determined that the target image B includes the target element B11 and the target element B21. The width of the target image B is width B, and the height is height B.

[0189] S410: Display a target image via a first display screen.

[0190] After the target image is displayed, the browser window can be resized to monitor window changes. When changes occur, all the above steps are triggered to adapt to the user manually stretching the window size during use.

[0191] In actual application, the image display method provided by the embodiment of the present application can be encapsulated into a js class, and a running program can be newly created where it is needed. The user only needs to input the identifier of each first element, the image width of the first image, and the first position of each first element on the operation page. The running program can perform scaling processing according to the parameters input by the user to obtain and display the target image. At the same time, the js class provides a method for adjusting the preset offset ratio. Using the set keyboard combination key, an input pop-up box will appear when calling this method. After entering the value and clicking OK, the data will be stored in the browser cache, and the page will be reloaded. When loading, the newly set preset offset ratio will be obtained from the browser cache to recalculate and scale. In this way, the method of adjusting the preset offset ratio allows users to adjust the page in a visual manner, without the need to obtain the preset offset ratio through tedious calculations, and is easier to use.

[0192] The image display method provided by the embodiment of the present application obtains an image display request. According to the image width and the resolution width, the target ratio of each first element is determined. The initial element width and the initial element height of each first element are determined. According to the initial element width, image width and resolution width of each first element, the standard element width of each first element is determined. According to the initial element height, image width, image width, image ratio and target offset ratio of each first element, the standard element height of each first element is determined. According to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element, the first image is scaled to obtain the target image. The target image is displayed through the first display screen. In the above process, each first element can be scaled according to the target ratio of each first element. Instead of only scaling each area, it is avoided that the size of each element in the area cannot be set, and the stretching phenomenon that may exist on non-standard screens after scaling can be avoided. The effect of image display is improved.

[0193] Based on any of the above embodiments, Figure 5 , the process of image display is illustrated with examples.

[0194] Figure 5 This is a schematic diagram of the image display process provided by the embodiment of the present application. Figure 5 , including an image display device 501. The image display device 501 can be a terminal device, a smart screen, a projector, a smart TV, a smart screen, etc. The image display device 501 includes a first display screen, and a browser and CSS code are set in the image display device 501. The CCS code is used for scaling. The user can enter the window.innerWdith command of js in the image display device 501, and the terminal device displays the operation page in response to the user's input operation. The user can determine the identifier, image width, and first position of each first element in the operation page of the image display device 501. The image display device 501 responds to the user's input selection operation and obtains the resolution width of the first display screen through a command. And generate an image display request. The image display request obtained by the image display device 501 can be specifically shown in Table 5:

[0195] Table 5

[0196]

[0197] As shown in Table 5, it can be determined that the resolution width of the first display screen of the image display device 501 is smaller than the image width. Therefore, the image display device 501 obtains a preset offset ratio of 0. The image display device 501 determines that the image ratio is 1024 / 1280=0.8, and determines that the target offset ratio is 0. The image display device determines the target ratio = (0.8, 0.8). The image display device 501 sets the transform value in the css code to scale (0.8, 0.8). The image display device 501 determines that the initial element width and initial element height of each first element can be specifically shown in Table 6:

[0198] Table 6

[0199]

[0200] The CSS code of the image display device 501 obtains an image height of 720. The CSS code of the image display device 501 determines the standard element width of each first element according to the initial element width, image width and resolution width of each first element. And according to the initial element height, image width, image width, image ratio and target offset ratio of each first element, the standard element height of each first element can be specifically determined as shown in Table 7:

[0201] Table 7

[0202]

[0203] The image display device 501 sets the transformOrigin value of transform according to the first position shown in Table 5. For any first element, the CSS code of the image display device 501 scales the first element according to the first position and the target ratio of the first element, and obtains the target element corresponding to the first element, which can be specifically shown in Table 8:

[0204] Table 8

[0205]

[0206] The CSS code of the image display device 501 determines the target width and the target height according to the target ratio, the image width and the image height, and determines that the target image includes at least one target element shown in Table 8. Among them, the image width of the target image is the target width, and the image height of the target image is the target height. The first display screen of the image display device 501 displays the target image.

[0207] The image display process provided by the embodiment of the present application obtains an image display request. According to the image width and the resolution width, the target ratio of each first element is determined. The initial element width and the initial element height of each first element are determined. According to the initial element width, image width and resolution width of each first element, the standard element width of each first element is determined. According to the initial element height, image width, image width, image ratio and target offset ratio of each first element, the standard element height of each first element is determined. According to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element, the first image is scaled to obtain the target image. The target image is displayed through the first display screen. In the above process, each first element can be scaled according to the target ratio of each first element. Instead of only scaling each area, it is avoided that the size of each element in the area cannot be set, and the stretching phenomenon that may exist on non-standard screens after scaling can be avoided. The effect of image display is improved.

[0208] Figure 6 This is a schematic diagram of the structure of the image display device provided in the embodiment of the present application. Figure 6 , the image display device 10 may include:

[0209] An acquisition module 11 is used to acquire an image display request, where the image display request includes at least one first element in a first image to be displayed, an image width of the first image, and a resolution width of a first display screen that displays the first image;

[0210] A determination module 12, configured to determine a target ratio of each first element according to the image width and the resolution width;

[0211] A processing module 13, configured to scale the first image according to a target ratio of each first element to obtain a target image;

[0212] The display module 14 is configured to display the target image via the first display screen.

[0213] In a possible implementation manner, the determining module 12 is specifically configured to:

[0214] Get the preset width;

[0215] When the resolution width is less than or equal to the preset width, a target ratio of each first element is determined according to the image width and the resolution width.

[0216] In a possible implementation manner, the determining module 12 is specifically configured to:

[0217] Determine the ratio of the resolution width to the image width as the image ratio;

[0218] Get the preset offset ratio;

[0219] Determine the sum of the preset offset ratio and the image ratio as the target offset ratio;

[0220] Determining the target ratio includes the image ratio and the target offset ratio.

[0221] In a possible implementation manner, the processing module 13 is specifically used to:

[0222] Determine the initial element width and initial element height of each first element;

[0223] determining a standard element width of each first element according to an initial element width of each first element, the image width and the resolution width;

[0224] determining a standard element height of each first element based on an initial element height of each first element, the image width, the image width, the image ratio, and the target offset ratio;

[0225] The first image is scaled according to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element to obtain the target image.

[0226] In a possible implementation manner, the processing module 13 is specifically used to:

[0227] Obtaining the resolution height of the first display screen;

[0228] Get the proportional width and proportional height of the first element;

[0229] determining an initial element width of the first element according to the scale width and the resolution width;

[0230] An initial element height of the first element is determined according to the scale height and the resolution height.

[0231] In a possible implementation manner, the processing module 13 is specifically used to:

[0232] Determine the ratio of the initial element width to the resolution width as the intermediate width;

[0233] The product of the image width and the intermediate width is determined as the standard element width of the first element.

[0234] In a possible implementation manner, the processing module 13 is specifically used to:

[0235] Determine the ratio of the initial element height to the resolution width as the intermediate height;

[0236] The product of the image width and the middle height is determined as the height to be selected;

[0237] Determine the ratio of the image ratio to the target offset ratio as an intermediate ratio;

[0238] The product of the candidate height and the intermediate ratio is determined as the standard element height of the first element.

[0239] In a possible implementation manner, the processing module 13 is specifically used to:

[0240] For any first element, obtain the first position of the first element;

[0241] Scaling the first element according to the first position and the target ratio of the first element to obtain a target element corresponding to the first element, where the element width of the target element is greater than or equal to the standard element width, and the element height of the target element is greater than or equal to the standard element height;

[0242] Determine a target width and a target height according to the target ratio, the image width and the image height;

[0243] It is determined that the target image includes at least one target element, the image width of the target image is the target width, and the image height of the target image is the target height.

[0244] The image display device provided in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.

[0245] Figure 7 This is a schematic diagram of the structure of the image display device provided in the embodiment of the present application. Figure 7 The image display device 20 may include: a memory 21 and a processor 22. Exemplarily, the memory 21 and the processor 22 are interconnected via a bus 23.

[0246] The memory 21 is used to store program instructions;

[0247] The processor 22 is used to execute the program instructions stored in the memory, so as to enable the data acquisition device 20 to execute the method shown in the above method embodiment.

[0248] The image display device provided in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.

[0249] An embodiment of the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the above method.

[0250] The embodiment of the present application may also provide a computer program product, including a computer program, which can implement the above method when executed by a processor.

[0251] All or part of the steps of the above-mentioned method embodiments can be completed by hardware related to program instructions. The above-mentioned program can be stored in a readable memory. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the above-mentioned memory (storage medium) includes: read-only memory (ROM), random access memory (RAM), flash memory, hard disk, solid state drive, magnetic tape, floppy disk, optical disc and any combination thereof.

[0252] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processing unit of the computer or other programmable data processing device generate a device for implementing the functions specified in one process or multiple processes in the flowchart and / or one box or multiple boxes in the block diagram.

[0253] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device that implements the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0254] These computer program instructions may also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0255] Obviously, those skilled in the art can make various changes and modifications to the embodiments of the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the embodiments of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

[0256] In the present application, the term "include" and its variations may refer to non-restrictive inclusion; the term "or" and its variations may refer to "and / or". The terms "first", "second", etc. in the present application are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. In the present application, "plurality" refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B may mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the previously associated objects are in an "or" relationship.

Claims

1. An image display method, characterized in that: include: Acquire an image display request, where the image display request includes an identifier of at least one first element in a first image to be displayed, an image width of the first image, and a resolution width of a first display screen that displays the first image; Determining a target ratio of each first element according to the image width and the resolution width; According to the target ratio of each first element, scaling the first image to obtain a target image; The target image is displayed through the first display screen.

2. The method according to claim 1, characterized in that Determining a target ratio of each first element according to the image width and the resolution width includes: Get the preset width; When the resolution width is less than or equal to the preset width, a target ratio of each first element is determined according to the image width and the resolution width.

3. The method according to claim 2, characterized in that Determining a target ratio of each first element according to the image width and the resolution width includes: Determine the ratio of the resolution width to the image width as the image ratio; Get the preset offset ratio; Determine the sum of the preset offset ratio and the image ratio as the target offset ratio; Determining the target ratio includes the image ratio and the target offset ratio.

4. The method according to any one of claims 1 to 3, characterized in that: Scaling the first image according to the target ratio of each first element to obtain a target image includes: Determine the initial element width and initial element height of each first element; determining a standard element width of each first element according to an initial element width of each first element, the image width and the resolution width; determining a standard element height of each first element according to an initial element height of each first element, the image width, the resolution width, the image ratio, and the target offset ratio; The first image is scaled according to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element to obtain the target image.

5. The method according to claim 4, characterized in that For any first element, determining an initial element width and an initial element height of the first element includes: Obtaining the resolution height of the first display screen; Get the proportional width and proportional height of the first element; determining an initial element width of the first element according to the scale width and the resolution width; An initial element height of the first element is determined according to the scale height and the resolution height.

6. The method according to claim 4 or 5, characterized in that: For any first element; Determining a standard element width of the first element according to the element width of the first element, the image width, and the resolution width includes: Determine the ratio of the initial element width to the resolution width as the intermediate width; The product of the image width and the intermediate width is determined as the standard element width of the first element.

7. The method according to claim 4 or 5, characterized in that: For any first element, determining a standard element height of each first element according to the initial element height of each first element, the image width, the image width, the image ratio and the target offset ratio includes: Determine the ratio of the initial element height to the resolution width as the intermediate height; The product of the image width and the middle height is determined as the height to be selected; Determine the ratio of the image ratio to the target offset ratio as an intermediate ratio; The product of the candidate height and the intermediate ratio is determined as the standard element height of the first element.

8. The method according to any one of claims 5 to 7, characterized in that: The first image is scaled according to the standard element width of each first element, the standard element height of each first element, and the target ratio of each first element to obtain the target image, including: For any first element, obtain the first position of the first element; Scaling the first element according to the first position and the target ratio of the first element to obtain a target element corresponding to the first element, where the element width of the target element is greater than or equal to the standard element width, and the element height of the target element is greater than or equal to the standard element height; Determine a target width and a target height according to the target ratio, the image width and the image height; It is determined that the target image includes at least one target element, the image width of the target image is the target width, and the image height of the target image is the target height.

9. An image display device, characterized in that: The device comprises: an acquisition module, configured to acquire an image display request, wherein the image display request includes at least one first element in a first image to be displayed, an image width of the first image, and a resolution width of a first display screen for displaying the first image; A determination module, configured to determine a target ratio of each first element according to the image width and the resolution width; A processing module, configured to perform scaling processing on the first image according to a target ratio of each first element to obtain a target image; A display module is used to display the target image through the first display screen.

10. An image display device, characterized in that: include: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 8.

11. A non-transitory computer-readable storage medium storing computer instructions, characterized in that: in, The computer instructions are used to make a computer execute the method according to any one of claims 1 to 8.

12. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the method according to any one of claims 1 to 8 is implemented.

Images