A method and device for displaying pictures

Abstract

The present invention discloses a method and apparatus for displaying images, relating to the field of computer technology. A specific implementation of the method includes: obtaining display page size data and image size restriction data; processing an original image based on the display page size data to obtain a first image, and processing the original image based on the image size restriction data to obtain a second image; when a predetermined event is detected, determining that a first condition is satisfied, and adding the second image to the display content to be displayed on the display page; and when the operation behavior data on the display page satisfies a second condition, displaying the first image on the display page. This implementation can achieve good advertising display effects without affecting the user's visual experience.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for displaying a picture. Background Art

[0002] Currently, among the existing advertising delivery methods, electronic advertisements, that is, advertisements delivered on electronic devices, are becoming increasingly important. In the prior art, pictures are displayed on the display page of the electronic device to achieve advertising effects.

[0003] In the process of implementing the present invention, the inventors discovered that the prior art has at least the following problems:

[0004] In existing technologies, either an image of the same size as the ad display area is prepared in advance, or the ad display area is adjusted on the display page based on the image size. The former requires preparing an image of a specified size in advance, which greatly limits its use cases. The latter may result in a large image occupying the display page, affecting the user experience. Summary of the Invention

[0005] In view of this, embodiments of the present invention provide a method and apparatus for displaying an image, which can improve the display effect of an image while ensuring user experience.

[0006] To achieve the above object, according to one aspect of an embodiment of the present invention, a method for displaying an image is provided, comprising:

[0007] Get the size data of the displayed page and the image size limit data;

[0008] Processing the original image based on the size data of the display page to obtain a first image, and processing the original image based on the image size restriction data to obtain a second image;

[0009] When a predetermined event is detected, it is determined that the first condition is satisfied, and the second image is added to the display content to be displayed on the display page; and

[0010] When the operation behavior data on the display page meets the second condition, the first picture is displayed on the display page.

[0011] Optionally, in the above-mentioned method for displaying pictures,

[0012] The step of processing the original image to obtain a first image includes:

[0013] Calculating a height ratio of the original image to the height of the display page, and calculating a width ratio of the original image to the width of the display page; and

[0014] The original image is scaled based on the height ratio or the width ratio to obtain the first image.

[0015] Optionally, in the above-mentioned method for displaying pictures,

[0016] The step of processing the original image to obtain a first image includes:

[0017] Calculating a height ratio of the original image to the height of the display page, and calculating a width ratio of the original image to the width of the display page; and

[0018] Determine whether the height ratio is greater than the width ratio. If so, scale the original image by the height ratio to obtain the first image; if not, scale the original image by the width ratio to obtain the first image.

[0019] Optionally, in the above-mentioned method for displaying pictures,

[0020] The step of processing the original image to obtain a first image includes:

[0021] Calculating a height ratio of the original image to the height of the display page, and calculating a width ratio of the original image to the width of the display page; and

[0022] After scaling the original image according to the height ratio or the width ratio, the scaled image is scaled a second time according to a preset intermediate value to obtain a first image.

[0023] Optionally, in the above-mentioned method for displaying pictures,

[0024] The step of processing the original image to obtain a second image includes:

[0025] The original image is cropped to obtain the second image that meets the image size restriction.

[0026] Optionally, in the above-mentioned method for displaying pictures,

[0027] The step of processing the original image to obtain a second image includes:

[0028] scaling the original image to obtain a scaled image; and

[0029] The scaled image is cropped to obtain the second image that meets the image size restriction.

[0030] Optionally, in the above-mentioned method for displaying pictures,

[0031] The step of displaying the first picture includes: inserting the first picture into the display page with a first transparency; and

[0032] When the operation on the display page satisfies a second condition, the transparency of the first picture is set to a second transparency lower than the first transparency.

[0033] Optionally, in the above-mentioned method for displaying pictures,

[0034] The second condition is to move the second image to a predetermined area of ​​the display page.

[0035] According to another embodiment of the present invention, there is provided a device for displaying an image, comprising:

[0036] A data acquisition module, wherein the data acquisition module acquires size data of the display page and image size limit data;

[0037] an image processing module, the image processing module processing an original image based on the size data of the display page to obtain a first image, and processing the original image based on the image size restriction data to obtain a second image;

[0038] a first display module, which, when detecting a predetermined event, determines that a first condition is satisfied and adds the second image to the display content to be displayed on the display page; and

[0039] The second display module displays the first image on the display page when it is determined that the operation behavior data on the display page meets a second condition.

[0040] According to another embodiment of the present invention, there is provided an electronic device for displaying a picture, characterized by comprising:

[0041] one or more processors;

[0042] a storage device for storing one or more programs,

[0043] When the one or more programs are executed by the one or more processors, the one or more processors are caused to implement the method described above.

[0044] According to another embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored, wherein the program implements the method described above when executed by a processor.

[0045] One embodiment of the above invention has the following advantages or beneficial effects: Because the original image is processed to obtain a second image for pre-display and a first image for full advertisement display, this overcomes the technical issues in the prior art, such as either inappropriate image proportions that affect the user experience, or the requirement for images of a specified size that limits application scenarios. Furthermore, using the second image for pre-display does not affect the user's visual experience, and displaying the first image when certain conditions are met can achieve a good advertisement display effect.

[0046] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] The accompanying drawings are provided for a better understanding of the present invention and are not intended to limit the present invention.

[0048] Figure 1 is a schematic diagram of the main process of a method for displaying an image according to an embodiment of the present invention;

[0049] Figure 2 is a schematic diagram of main modules of a picture display device according to an embodiment of the present invention;

[0050] Figure 3 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;

[0051] Figure 4 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0052] The following description of exemplary embodiments of the present invention is made in conjunction with the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding. These details should be considered as merely exemplary. Therefore, it should be appreciated by those skilled in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0053] Figure 1 is a schematic diagram of the main process of the method for displaying a picture according to an embodiment of the present invention, such as Figure 1 Shown, including:

[0054] Step S101: Acquire the size data of the display page and the image size limitation data.

[0055] The display page refers to the display page on the screen of the electronic device that displays the image, and the size data of the display page generally includes the height of the display page and the width of the display page. In the case where the display page occupies the entire screen of the electronic device, the size of the display page refers to the size of the entire screen of the electronic device (the height of the display page is equal to the height of the screen, and the width of the display page is equal to the width of the screen). However, the display page does not necessarily occupy the entire screen. For example, when using an electronic device, the user may also use split screen, in which case the display page only occupies a portion of the entire screen.

[0056] The picture size restriction data is a height and width restriction of a picture that is preset according to a required display effect, and includes, for example, a height size restriction and a width size restriction. The picture size restriction can be preset as required.

[0057] Step S102 : Processing the original image based on the size data of the display page to obtain a first image, and processing the original image based on the image size restriction data to obtain a second image.

[0058] Optionally, in an embodiment of the present invention, the step of processing the original image to obtain the first image is specifically:

[0059] First, the height ratio of the original image's height to the height of the display page is calculated, and the width ratio of the original image's width to the width of the display page is calculated. After calculating the height ratio and width ratio, the height ratio and width ratio are compared to determine the size of the height ratio and width ratio. If the height ratio is greater than the width ratio, it means that the original image's aspect ratio is greater than the aspect ratio of the display page (the original image is thinner and taller than the display page). In this case, the original image is scaled according to the height ratio to obtain a first image whose height is equal to the height of the display page (the width of the first image is less than the width of the display page), so that the display state of the first image in the display page can be set to the maximum while maintaining the aspect ratio.

[0060] In addition, if the above-mentioned height ratio is smaller than the width ratio, it means that the aspect ratio of the original image is smaller than the aspect ratio of the display page (the original image is shorter and wider than the display page). At this time, the original image is scaled according to the width ratio to obtain a first image whose width is equal to the width of the display page (at this time, the height of the first image is smaller than the height of the display page), so that the display status of the first image in the display page can be set to the maximum while maintaining the aspect ratio.

[0061] In addition, in the case where the height ratio and width ratio are equal, the aspect ratio of the original image is equal to the aspect ratio of the displayed page, and scaling the original image by the height ratio and scaling the original image by the width ratio will produce the same effect. In this embodiment, for example, in the case where the height ratio and width ratio are equal, the original image is scaled by the width ratio to obtain the first image.

[0062] That is, in an embodiment of the present invention, the original image is scaled according to the height ratio or width ratio (the larger of the two) of the original image and the display page to obtain the first image. In this way, the first image with the largest display range in the display page can be obtained without changing the aspect ratio of the image.

[0063] It should be noted that, although in the above embodiment, the original image is scaled based on the height ratio or the width ratio to obtain the first image, as a variation, the original image may be scaled based only on the height ratio or the width ratio, rather than scaling the original image completely based on the height ratio and the width ratio. Specifically, an intermediate value may be preset, such as 1 cm. For example, when the height ratio of the original image to the display page is greater than the width ratio and the original image is scaled based on the height ratio to obtain the scaled image, the scaled image is scaled again to reduce its height by 1 cm. Scaling in this manner can make the first image slightly smaller than the display page. Although the display range of the first image becomes smaller, the sense of tightness caused by the image display can be reduced, so that the user's visual experience is better.

[0064] In addition, in the above description, the middle value is set to 1cm, but an middle value can also be set in the form of a ratio. For example, after scaling the original image according to the height ratio or width ratio to obtain the scaled image, scaling it again with an middle value in the form of a ratio, such as ninety-five percent, can also achieve the same effect, reduce the sense of tightness caused by the image display, and give the user a better visual experience.

[0065] As described above, by setting an intermediate value, the image obtained by scaling the original image according to the height ratio or width ratio of the original image to the display page is scaled twice to obtain the first image, which can achieve a better display effect.

[0066] In addition, specific steps of processing the original image based on the image size restriction to obtain the second image are described below.

[0067] First, in an embodiment of the present invention, in order to retain as much content as possible in the original image, the original image is first scaled. For example, the height ratio of the original image's height to the height size limit in the image size limit is calculated, and the width ratio of the original image's width to the width size limit in the image size limit is calculated, and the height ratio and width ratio are compared. When the height ratio is greater than the width ratio, it means that the aspect ratio of the original image is greater than the aspect ratio of the image size limit. At this time, the original image is scaled with the above-mentioned width ratio to obtain a scaled image whose width is equal to the width size limit in the image size limit (the height of the image is greater than the height size limit in the image size limit). At this time, the scaled image is cropped according to the height size limit in the image size limit to obtain a second image whose height and width meet the image size limit.

[0068] Regarding a specific method for cropping a scaled image based on the height limit within the image size restriction, for example, cropping can be performed to preserve the center area of ​​the scaled image. Specifically, the amount by which the scaled image exceeds the height limit is calculated, for example, L. Then, L / 2 is removed from the top of the scaled image, and L / 2 is removed from the bottom of the scaled image to obtain a second image. In this case, the height of the second image also equals the height limit. However, the specific cropping method is not limited; for example, the excess portion can be directly cropped from one side.

[0069] If the height ratio is smaller than the width ratio, the original image is scaled by the height ratio. This results in the height of the scaled image being equal to the height limit and the width being greater than the width limit. The width of the scaled image is then cropped to obtain a second image whose width also equals the width limit. The specific cropping method is not limited; the center portion can be retained, or portions on one side can be cropped directly.

[0070] In addition, in the above description of obtaining the second image, the original image is directly scaled according to the width or height ratio of the image size limit and then cropped. However, an intermediate value can also be set. For example, if the intermediate value is set to 1 cm, when scaling in proportion to the height and the height size limit is 5 cm, the height of the image can be scaled to 6 cm. For the extra 1 cm (intermediate value) in the height size, the height of the image is also cropped by 1 cm while the width of the image is cropped.

[0071] In the above, the intermediate value is set as the size information, but the intermediate value can also be set in a proportional form as described in the part about obtaining the first picture, and the repeated description is omitted here.

[0072] In this way, for example, the information density around some images is low, so this part can be cropped and removed after scaling, which can make the display effect of the image better.

[0073] The above description describes a case where the original image is scaled based on the height or width ratio between the original image and the image size limit, and then the scaled image is cropped. However, the original image can also be scaled based on the height or width ratio between the original image and the display page, and the scaled image can be cropped to obtain a second image.

[0074] Specifically, the original image is scaled by the larger of the height ratio or width ratio of the original image to the display page to obtain a scaled image (the same as the first image), and then the scaled image is cropped to obtain a second image that meets the image size limit.

[0075] It should be noted that when the second image is obtained in this manner, when the original image is scaled, for example, when scaling the image in height ratio, the width of the scaled image may be smaller than the width size limit. That is, in this embodiment of the present invention, the image size limit information only limits the maximum size of the second image, and the size of the second image can be smaller than this size.

[0076] In the above, the original image is scaled and then the scaled image is cropped to obtain a second image that meets the image size limit. The present invention does not limit the specific scaling ratio, and it is preferred that the content of the original image be retained as much as possible after cropping.

[0077] In addition, although in the above description, the original image is scaled and then cropped to obtain the second image, since the second image is only used for pre-display and its integrity is not required to be high, the original image can also be directly cropped to obtain a second image with a size that meets the image size limit.

[0078] The above description describes the case where the image size is limited to a specific value. However, the image size limit can also be a ratio relative to the display page. For example, the image size limit can be: the height limit is 20% of the display page height, and the width limit is 100% of the display page width.

[0079] In the case where the width size limit is 100% of the display page width, the width size limit is equal to the page display width.

[0080] Step S103: When a predetermined event is detected, it is determined that the first condition is satisfied, and a second image is added to the display content to be displayed on the display page.

[0081] In embodiments of the present invention, predetermined events include, for example, the occurrence of a predetermined time since the last ad display, the user performing a specific action, or the user accessing a specific page. When any of these predetermined times occurs, the first condition is determined to be satisfied. However, in embodiments of the present invention, predetermined events are not limited to the aforementioned list and may be added or modified at any time as needed.

[0082] When the first condition is met, the second image is added to the display content to be displayed on the display page. The display content to be displayed on the display page is, for example, obtained from a server. After the display content is obtained, the second image is added to the content and waits for display. For example, the display content to be displayed on the display page is an information stream.

[0083] The second image obtained according to step S102 is a cropped image that meets the image size limit. By inserting the second image into the display content (information stream in the embodiment of the present invention), the user's visual experience will not be affected by the original image being too large.

[0084] Step S104: When the operation behavior data on the display page meets the second condition, the first picture is displayed on the display page.

[0085] In this embodiment, for example, the second condition may be that, as the display page is operated, the second image moves along with the displayed content (information flow) to a predetermined area of ​​the display page, or as the display page is operated, the second image remains on the display page for more than a predetermined time. The second condition is not limited to the above and can be designed according to actual needs.

[0086] With the above solution, because the first image obtained in step S102 is the largest image that fits the screen while maintaining the original image's aspect ratio, the first image can achieve better ad exposure. Furthermore, according to an embodiment of the present invention, the first image does not always occupy the displayed page, obscuring other information stream content. Instead, it only appears when an operation on the second image meets certain conditions. This prevents a degradation in user experience while ensuring ad exposure.

[0087] As a variation of an embodiment of the present invention, for example, when a first condition is met and a second image is added to the display content to be displayed on a display page, the first image is inserted into the display page as a background image. However, when an operation on the second image does not meet the second condition, the first image remains transparent and is not displayed. For example, the first image is inserted into the display page with a first transparency (e.g., 100%), and until an operation on the second image meets the second condition, the transparency of the first image is set to a second transparency (e.g., 0%), which is lower than the first transparency.

[0088] In addition, the above describes the case where the first transparency is set to 100% and the second transparency is set to 0%. However, the first transparency only needs to ensure that the first image does not block the display content on the display page, and the second transparency only needs to enable the user to see the content of the first image. There is no specific limit on the value. For example, the first transparency can also be set to 95%, and the second transparency can be set to 20%. At this time, when the first condition is met, although the first image is inserted into the display page, the user still sees the display content on the display page, and the first image has not yet been displayed. When the second condition is met, the transparency of the first image becomes 20%. At this time, the second image is displayed, and the user can vaguely see the display content of the next layer of the image, so the display effect of the image will not be too abrupt.

[0089] In addition, in the above variation, the case where the first picture is inserted into the display page when the first condition is met is described, but as long as the first picture is inserted into the display page before the operation on the second picture meets the second condition, the above situation is met. For example, when the display content to be displayed on the display page is obtained from the server and the second picture is inserted into the display content to be displayed, if the user operation causes the second picture to enter the display page along with the information flow, the first picture is inserted into the display page with the first transparency. Then, when the user operation on the second picture meets the second condition (for example, causing the second picture to move to the center of the display page along with the display content (information flow)), the transparency of the first picture is set to the second transparency and displayed.

[0090] According to the image display method of an embodiment of the present invention, the original image is first processed to obtain the first image and the second image, and the second image is pre-displayed before the second condition is met. This prevents the image from occupying too large a portion of the display page, thereby preventing the user experience from being affected. Furthermore, when the predetermined condition is met, the first image is displayed on the display page, thereby ensuring a complete display effect of the image.

[0091] Compared with the prior art solution that requires advertisers to provide advertising images that meet size requirements, the image display method of the present invention can handle images of various sizes and proportions, so it has a wider range of references and can use the first image to achieve good advertising display effects.

[0092] Compared with the prior art solution of setting the advertisement display area according to the advertisement image provided by the advertiser, the image display method of the present invention can avoid the problem that the advertisement image has an inappropriate proportion and occupies a large area of ​​the display page, affecting the user experience.

[0093] A specific embodiment of the image display method of the present invention is described below.

[0094] In this specific embodiment, the picture is an advertisement picture, which is displayed on a display page, and information flow information is also displayed on the display page.

[0095] First, obtain the display page size data and image size limit data from the server. In this embodiment, the display page is the entire screen, and the display page size is the screen size. For image size limits, the height limit is 20% of the screen height (initial value, which can be changed according to user settings), and the width limit is the display width of the information flow. The initial value is 100% of the screen width and can be changed according to user settings.

[0096] Next, the original picture is processed to obtain a second picture for adding to the information stream for pre-display and a first picture for full advertisement display.

[0097] In this embodiment, the server selects the advertisement to be displayed based on the advertisement weight information, including information such as the advertisement image, the advertisement title, the image link address, and the advertisement jump address. Detailed description of the advertisement title, image link address, and advertisement jump address is omitted here.

[0098] In this embodiment, the first image is obtained by calculating the height ratio and width ratio of the original image to the screen height ratio and width ratio, and scaling the original image to the larger of the height ratio and width ratio, thereby obtaining the largest first image that fits the screen. The height or width of the first image obtained in this manner is equal to the screen height or width, and the other is smaller than the screen height or width.

[0099] In this embodiment, the second image is obtained by calculating the height ratio and width ratio of the original image to the screen height ratio and width ratio, scaling the original image by the larger of the height ratio and width ratio, thereby obtaining a scaled image. The scaled image is then cropped to obtain a second image that meets the image size restrictions.

[0100] As can be seen, the scaled image obtained in this manner is the first image. Therefore, in this embodiment, the scaled image obtained during the process of obtaining the second image can also be used as the first image. This can reduce the amount of computation and processing time. However, the present invention does not limit the relationship between the first and second images; the first and second images can be obtained from the original images.

[0101] It should be noted that when obtaining the second image in this manner, if the height ratio and width ratio of the original image to the screen are such that the height ratio is greater than the width ratio, the original image will be scaled according to the height ratio. As a result, the height of the scaled image is equal to the screen height, and the width is less than the screen width. Since the width size limit in the image size limit in this embodiment is equal to the screen width, the width of the second image obtained by cropping the scaled image is less than the width size limit. In other words, the width size limit only limits the maximum height and width of the second image; the height or width of the second image can be less than the image size limit.

[0102] From the above, the second picture for adding to the information flow (display content) for pre-display and the first picture for complete advertisement display are obtained.

[0103] Next, a predetermined event is monitored, that is, whether the first condition is satisfied. In this embodiment, the predetermined event is, for example, any one of the following events:

[0104] 1) Whether the scheduled time has passed since the last advertisement was displayed;

[0105] 2) Whether the user has performed a specific action;

[0106] 3) Whether the user has entered a specific page.

[0107] When the electronic device detects any of the above events, it determines that the first condition is met. In this case, an advertisement image is added to the information stream (displayed content) obtained from the server (for example, at the end). As the user browses, when the bottom information stream slides up to enter the display page, the advertisement image also enters the display page.

[0108] Thus, the second image that has been processed and is smaller than the image size limit can be used for pre-display, so that it does not occupy too large an area of ​​the display page and affect the user experience.

[0109] In this embodiment, when a second image is added to the displayed information stream, the first image is inserted into the display area and set as the background image for the entire information stream list area. Before the operation on the second image satisfies the second condition, the transparency of the first image is set to 100%, that is, the first image is set to be completely transparent, and the user cannot see the first image at this time.

[0110] Then, when the electronic device detects that the user's operation on the display page meets the second condition, the transparency of the first image is set to zero percent, thereby displaying the first image. In this embodiment, the second condition is, for example:

[0111] 1) As the information flow slides up, the user moves the second image to a predetermined area of ​​the display page (e.g., the center of the height of the display page, i.e., the center point of the height of the second image coincides with the center point of the height of the display page);

[0112] 2) The second image enters the display page and stays on the display page for more than a predetermined time.

[0113] When either of the above two conditions is met, it is determined that the operation on the second picture meets the second condition. At this time, the transparency of the first picture is set to zero percent in the display page, and the first picture is displayed.

[0114] In this embodiment, when the second image moves completely beyond the display area, the display of the first image is stopped, for example, the transparency of the first image is set to 100%. If the second image re-enters the display area, it is determined whether the operation on the second image meets the second condition, and the above steps are repeated.

[0115] According to the image display method of the present invention, by processing the original image to obtain a second image for pre-display and a first image for full advertisement display, the second image can be used for pre-display without affecting the user's visual experience. When certain conditions are met, the first image is displayed, achieving a good advertisement display effect.

[0116] Figure 2 FIG. 1 is a schematic diagram of main modules of a picture display device according to an embodiment of the present invention.

[0117] According to one embodiment of the present invention, there is provided a picture display device 200, comprising:

[0118] A data acquisition module 201, which acquires size data of a display page and image size restriction data;

[0119] an image processing module 202, which processes the original image based on the display page size data acquired by the data acquisition module 201 to obtain a first image, and processes the original image based on the image size restriction data acquired by the data acquisition module 201 to obtain a second image;

[0120] a first display module 203, which, when detecting a predetermined event, determines that a first condition is satisfied and adds the second image to the display content to be displayed on the display page; and

[0121] The second display module 204 displays the first image on the display page when it is determined that the operation behavior data on the display page meets the second condition.

[0122] In the display device 200 in the above picture, it can be,

[0123] The image processing module 202 calculates a height ratio of the original image to the height of the display page, and calculates a width ratio of the original image to the width of the display page; and

[0124] The original image is scaled based on the height ratio or the width ratio to obtain the first image.

[0125] In the display device 200 in the above picture, it can be,

[0126] The image processing module 202 calculates a height ratio of the original image to the height of the display page, and calculates a width ratio of the original image to the width of the display page; and

[0127] Determine whether the height ratio is greater than the width ratio. If so, scale the original image by the height ratio to obtain the first image; if not, scale the original image by the width ratio to obtain the first image.

[0128] In the display device 200 in the above picture, it can be,

[0129] The image processing module 202 calculates a height ratio of the original image to the height of the display page, and calculates a width ratio of the original image to the width of the display page; and

[0130] After scaling the original image according to the height ratio or the width ratio, the scaled image is scaled a second time according to a preset intermediate value to obtain a first image.

[0131] In the display device 200 in the above picture, it can be,

[0132] The image processing module 202 crops the original image to obtain the second image that meets the image size restriction.

[0133] In the display device 200 in the above picture, it can be,

[0134] The image processing module 202 scales the original image to obtain a scaled image; and

[0135] The scaled image is cropped to obtain the second image that meets the image size restriction.

[0136] In the display device 200 in the above picture, it can be,

[0137] The second display module 204 inserts the first picture into the display page with a first transparency; and

[0138] When the operation on the display page satisfies a second condition, the transparency of the first picture is set to a second transparency lower than the first transparency.

[0139] In the display device 200 in the above picture, it can be,

[0140] The second condition is to move the second image to a predetermined area of ​​the display page.

[0141] Figure 3 An exemplary system architecture 300 is shown in which embodiments of the present invention may be applied.

[0142] like Figure 3 As shown, system architecture 300 may include terminal devices 301, 302, 303, a network 304, and a server 305. Network 304 is used to provide a medium for communication links between terminal devices 301, 302, 303 and server 305. Network 304 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0143] Users can use terminal devices 301, 302, and 303 to interact with server 305 via network 304 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 301, 302, and 303, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0144] The terminal devices 301 , 302 , and 303 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0145] Server 305 may be a server that provides various services, such as a backend management server (for example only) that supports shopping websites browsed by users using terminal devices 301, 302, and 303. The backend management server may analyze and process received data such as product information query requests, and feed back processing results (for example, targeted push information and product information—for example only) to the terminal device.

[0146] It should be noted that the image display method provided in the embodiment of the present invention is generally executed by the server 305 , and accordingly, the image display device is generally provided in the server 305 .

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

[0148] Reference below Figure 4 , which shows a schematic structural diagram of a computer system 400 of a terminal device suitable for implementing an embodiment of the present invention. Figure 4 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0149] like Figure 4 As shown, the computer system 400 includes a central processing unit (CPU) 401, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 402 or a program loaded from a storage unit 408 into a random access memory (RAM) 403. Various programs and data required for the operation of the system 400 are also stored in the RAM 403. The CPU 401, ROM 402, and RAM 403 are connected to each other via a bus 404. An input / output (I / O) interface 405 is also connected to the bus 404.

[0150] The following components are connected to the I / O interface 405: an input section 406 including a keyboard, a mouse, and the like; an output section 407 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 408 including a hard disk; and a communication section 409 including a network interface card such as a LAN card or a modem. The communication section 409 performs communication processing via a network such as the Internet. A drive 410 is also connected to the I / O interface 405 as needed. Removable media 411, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 410 as needed, so that computer programs read therefrom can be installed into the storage section 408 as needed.

[0151] In particular, according to the embodiments disclosed in the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 409, and / or installed from a removable medium 411. When the computer program is executed by the central processing unit (CPU) 401, the above-mentioned functions defined in the system of the present invention are performed.

[0152] It should be noted that the computer-readable medium described in the present invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. This propagated data signal can take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.

[0153] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present invention. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0154] The modules involved in the embodiments of the present invention may be implemented in software or hardware. The modules described may also be provided in a processor. For example, they may be described as follows: a processor includes a data acquisition module, an image processing module, a first display module, and a second display module. The names of these modules do not, in some cases, limit the modules themselves. For example, an image processing module may also be described as a "module for processing an original image."

[0155] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiments, or may exist independently without being incorporated into the device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by the device, the device includes:

[0156] Get the size data of the displayed page and the image size limit data;

[0157] Processing the original image based on the size data of the display page to obtain a first image, and processing the original image based on the image size restriction data to obtain a second image;

[0158] When a predetermined event is detected, it is determined that the first condition is satisfied, and the second image is added to the display content to be displayed on the display page; and

[0159] When the operation behavior data on the display page meets the second condition, the first picture is displayed on the display page.

[0160] According to the technical solution of the embodiments of the present invention, the image display method of the present invention processes the original image to obtain a second image for pre-display and a first image for full advertisement display. This allows the second image to be used for pre-display without affecting the user's visual experience. When certain conditions are met, the first image is displayed, achieving a good advertisement display effect.

[0161] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.

Claims

1. A method for displaying a picture, characterized in that: include: Obtaining the size data of the display page and the image size limit data; wherein the image size limit data is the height and width limit of the image pre-set according to the required display effect; Processing the original image based on the size data of the display page to obtain a first image, including: calculating a height ratio of the original image to the height of the display page, and calculating a width ratio of the original image to the width of the display page; scaling the original image based on the height ratio or the width ratio to obtain the first image; and Processing the original image based on the image size restriction data to obtain a second image, including: calculating a height ratio of the original image to the height in the image size restriction data, and calculating a width ratio of the original image to the width in the image size restriction data; scaling the original image based on the height ratio or the width ratio, and cropping the scaled image to obtain a second image that meets the image size restriction; When a predetermined event is detected, it is determined that the first condition is satisfied, and the second image is added to the display content to be displayed on the display page; and When the operation behavior data on the display page meets the second condition, the first picture is displayed on the display page; wherein the second condition is that the second picture moves to a predetermined area of ​​the display page or stays on the display page for more than a predetermined time.

2. The method for displaying a picture according to claim 1, wherein: Scaling the original image based on the height ratio or the width ratio to obtain the first image includes: Determine whether the height ratio is greater than the width ratio. If so, scale the original image by the height ratio to obtain the first image; if not, scale the original image by the width ratio to obtain the first image.

3. The method for displaying a picture according to claim 1, wherein: Scaling the original image based on the height ratio or the width ratio to obtain the first image includes: After scaling the original image according to the height ratio or the width ratio, the scaled image is scaled a second time according to a preset intermediate value to obtain a first image.

4. The method for displaying a picture according to any one of claims 1 to 3, characterized in that: The step of displaying the first picture includes: inserting the first picture into the display page with a first transparency; and When the operation on the display page satisfies a second condition, the transparency of the first picture is set to a second transparency lower than the first transparency.

5. A picture display device, characterized in that: include: A data acquisition module, wherein the data acquisition module acquires the size data of the display page and the image size limitation data; wherein the image size limitation data is the height and width limitations of the image pre-set according to the required display effect; an image processing module, processing the original image based on the size data of the display page to obtain a first image, including: calculating a height ratio of the original image to the height of the display page, and calculating a width ratio of the original image to the width of the display page; scaling the original image based on the height ratio or the width ratio to obtain the first image; and Processing the original image based on the image size restriction data to obtain a second image, including: calculating a height ratio of the original image to the height in the image size restriction data, and calculating a width ratio of the original image to the width in the image size restriction data; scaling the original image based on the height ratio or the width ratio, and cropping the scaled image to obtain a second image that meets the image size restriction; a first display module, which, when detecting a predetermined event, determines that a first condition is satisfied and adds the second image to the display content to be displayed on the display page; and The second display module displays the first image on the display page when it is determined that the operation behavior data on the display page meets the second condition; wherein the second condition is that the second image moves to a predetermined area of ​​the display page or stays on the display page for more than a predetermined time.

6. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 4.

7. A computer-readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images