Image display method, image display device, electronic device, and computer storage medium

Abstract

The application discloses an image display method, an image display device, an electronic device and a computer storage medium. The method comprises the following steps: acquiring a first initial ratio, a second initial ratio, a target width value and a target height value of a target display area of a target device; determining an expected width value according to the first initial ratio and the target width value; determining an expected height value according to the second initial ratio and the target height value; determining an expected aspect ratio according to the expected width value and the expected height value; cropping a selected image according to the expected aspect ratio to obtain an initial image; scaling the initial image according to the expected aspect ratio to obtain a target image; and displaying the target image on the target display area of the target device. According to the embodiment of the application, the difference between the proportion of the target image in the target display area on different display devices can be reduced.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of image processing, and particularly relates to an image display method, an image display device, an electronic device and a computer storage medium. BACKGROUND

[0002] In some existing software or programs, information is often expressed by displaying images. The displayed images often have different sizes before being uploaded, and therefore, the images often need to be processed after being uploaded to be displayed, so that the sizes of the images displayed in the same display device have good uniformity, thereby improving the overall display effect of multiple images.

[0003] However, since the size of the processed image is often set as a fixed value, the size of the processed image displayed on display devices with different sizes is the same, so that the proportion of the image occupying the display area on different display devices is greatly different, and the user experience is poor. SUMMARY

[0004] The embodiment of the present application provides an image display method, which can reduce the difference in the proportion of a target image occupying a target display area on different display devices.

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

[0006] obtaining a first initial proportion, a second initial proportion, and a target width value and a target height value of a target display area of a target device, the first initial proportion being a ratio of a design width value of a design image to a reference width value of a reference display area of a reference device, and the second initial proportion being a ratio of a design height value of the design image to a reference height value of the reference display area of the reference device;

[0007] determining an expected width value according to the first initial proportion and the target width value;

[0008] determining an expected height value according to the second initial proportion and the target height value;

[0009] determining an expected aspect ratio according to the expected width value and the expected height value;

[0010] cropping the selected image according to the expected aspect ratio to obtain an initial image;

[0011] scaling the initial image according to the expected aspect ratio to obtain a target image;

[0012] displaying the target image in the target display area of the target device.

[0013] In one possible implementation, the method further includes:

[0014] In one possible implementation, the method further includes:

[0015] In one possible implementation, the method further includes:

[0016] In one possible implementation, the method further includes:

[0017] In one possible implementation, the method further includes:

[0018] In one possible implementation, the method further includes:

[0019] In one possible implementation, the method further includes:

[0020] In one possible implementation, the method further includes:

[0021] In one possible implementation, the method further includes:

[0022] In one possible implementation, the method further includes:

[0023] In one possible implementation, the method further includes:

[0024] In one possible implementation, the method further includes:

[0025] In one possible implementation, the method further includes:

[0026] In one possible implementation, the method further includes:

[0027] displaying the crop frame and the selected image in the target display area.

[0028] In one possible implementation, the selected image is cropped according to the expected aspect ratio to obtain the initial image, including:

[0029] obtaining a selected width value and a selected height value of the selected image;

[0030] calculating an aspect ratio of the selected image according to the selected width value and the selected height value of the selected image;

[0031] in a case that the aspect ratio of the selected image is greater than or equal to the expected aspect ratio, determining the selected height value as a crop height value of the crop frame;

[0032] determining a crop width value of the crop frame based on the crop height value of the crop frame and the expected aspect ratio;

[0033] cropping the selected image by using the crop frame to obtain the initial image.

[0034] In one possible implementation, before the selected image is cropped by using the crop frame to obtain the initial image, the method further includes:

[0035] when the shape of the selected image is a rectangle, obtaining an intersection point of a first selected side and a second selected side on the selected image, wherein a side length of the first selected side is equal to the selected width value, and a side length of the second selected side is equal to the selected height value;

[0036] establishing a coordinate system, taking the intersection point of the first selected side and the second selected side as an origin of the coordinate system, and setting a coordinate value of the origin in the coordinate system as (0, 0);

[0037] setting the first selected side parallel to an X-axis of the coordinate system, and setting the selected image in a first quadrant of the coordinate system;

[0038] setting a shape of the crop frame as a rectangle, and obtaining an intersection point of a first crop side and a second crop side on the crop frame, wherein a side length of the first crop side of the crop frame is equal to the crop width value, and a side length of the second crop side of the crop frame is equal to the crop height value;

[0039] determining the intersection point of the first crop side and the second crop side as a crop starting point of the crop frame, and setting a coordinate value of the crop starting point in the coordinate system as (i, k), setting a value of i in the crop starting point equal to a difference value of the selected width value and the crop width value divided by 2, and setting a value of k in the crop starting point equal to 0;

[0040] displaying the crop frame and the selected image in the target display area.

[0041] In one possible implementation, before the selected image is cropped by using the crop frame to obtain the initial image, the method further includes:

[0042] obtaining a geometric center of the cropping frame;

[0043] obtaining a geometric center of the selected image;

[0044] setting the geometric center of the cropping frame to coincide with the geometric center of the selected image, and displaying the cropping frame and the selected image in the target display area.

[0045] In one possible implementation, the method for displaying target images in a target display area of a target device includes:

[0046] The target display area includes a sub-display area, and when it is detected that the target images are multiple, the number of target images and a sub-display width value of the sub-display area in the target display area are obtained;

[0047] A preset number is obtained, and the preset number is the number of target images arranged in each row;

[0048] According to the preset number, the number of target images, and the sub-display width value, a first interval value and a second interval value are determined;

[0049] The multiple target images are arranged and displayed in the sub-display area along a first direction in sequence at equal intervals, and the first interval value is arranged between adjacent target images;

[0050] When it is detected that the number of target images arranged in each row is the preset number, a line break operation is performed, and the first interval value is arranged between adjacent two rows;

[0051] An outer contour of the sub-display area is obtained;

[0052] The multiple arranged target images are collected to form an image array, and the second interval value is arranged between the image array and the outer contour.

[0053] In one possible implementation, the first interval value is equal to the second interval value.

[0054] In one possible implementation, before the multiple target images are arranged and displayed in sequence at equal intervals along the first direction, the method further includes:

[0055] A ratio of the sub-display width value to the expected width value is calculated, a quotient is determined as the preset number, and a remainder is determined as a total width interval value;

[0056] The first interval value and the second interval value are determined through a relationship (n-1)*s1+2*s2+n*w0=w5, where n is the preset number, s1 is the first interval value, s2 is the second interval value, w0 is the expected width value, and w5 is the sub-display width value.

[0057] In one possible implementation, before the target images are displayed in the target display area of the target device, the method further includes:

[0058] obtaining a number of rows of the target image;

[0059] determining an actual occupied height value of the image array according to the number of rows, the first interval value, and the second interval value;

[0060] obtaining a sub-display height value of the sub-display area;

[0061] in a case where the actual occupied height value is greater than the sub-display height value, adding a scroll processing to the sub-display area;

[0062] displaying, by a target display area of a target device, a target image, including:

[0063] displaying, by a sub-display area of the target display area, the target image in a scroll manner.

[0064] In a second aspect, an embodiment of the present application provides an image display device, and the image display device includes:

[0065] an obtaining module, configured to obtain a first initial ratio, a second initial ratio, and a target width value and a target height value of a target display area of a target device, the first initial ratio being a ratio of a design width value of a design image to a reference width value of a reference display area of a reference device, and the second initial ratio being a ratio of a design height value of the design image to a reference height value of the reference display area of the reference device;

[0066] a determining module, configured to determine an expected width value according to the first initial ratio and the target width value;

[0067] the determining module is further configured to determine an expected height value according to the second initial ratio and the target height value;

[0068] the determining module is further configured to determine an expected aspect ratio according to the expected width value and the expected height value;

[0069] a clipping unit, configured to clip the selected image according to the expected aspect ratio to obtain an initial image;

[0070] a scaling module, configured to scale the initial image according to the expected aspect ratio to obtain a target image;

[0071] a display module, configured to display the target image on the target display area.

[0072] In a third aspect, an embodiment of the present application provides an electronic device, and the electronic device includes a processor and a memory storing computer program instructions; the processor reads and executes the computer program instructions to implement the image display method of the first aspect or any possible implementation manner of the first aspect.

[0073] In a fourth aspect, an embodiment of the present application provides a computer storage medium, which stores computer program instructions. When the computer program instructions are executed by a processor, the image display method according to the first aspect or any possible implementation of the first aspect is implemented.

[0074] In the image display method, the image display device, the electronic device and the computer storage medium provided in the embodiments of the present application, the first initial ratio can be obtained according to the ratio of the design width value of the design image to the reference width value of the reference display area of the reference device, and the second initial ratio can be obtained according to the ratio of the design height value of the design image to the reference height value of the reference display area of the reference device. The target width value and the target height value of the target display area of the target device are obtained, and the expected width value can be determined according to the target width value and the first initial ratio, and the expected height value can be determined according to the target height value and the second initial ratio, so that the expected width value after setting and the target width value can satisfy the first initial ratio, and the expected height value after setting and the target height value can satisfy the second initial ratio. According to the expected width value and the expected height value, the expected aspect ratio is determined, and the selected image is cropped according to the expected aspect ratio to obtain the initial image. The initial image is scaled to obtain the target image with the expected width value and the expected height value. The target image is displayed in the target display area, so that the expected width value and the expected height value of the target image displayed in the target display area are determined according to the target width and the target height of the target display area of the target device, so that the target image with different expected width values and expected height values can be displayed on different target devices, so that the proportion of the area of the target image displayed on different target devices to the area of the target display area is the same, and the difference in the proportion of the area of the target image to the area of the target display area on different display devices is reduced. BRIEF DESCRIPTION OF DRAWINGS

[0075] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments of the present application. Obviously, the drawings described below are only some embodiments of the present application, and other drawings can also be obtained by those skilled in the art without any creative effort on the basis of these drawings.

[0076] Figure 1 The flowchart of the image display method provided by some embodiments of the present application is shown in the figure;

[0077] Figure 2 The schematic diagram of the reference display area and the design image provided by some embodiments of the present application is shown in the figure;

[0078] Figure 3 The schematic diagram of the target display area and the target image provided by some embodiments of the present application is shown in the figure;

[0079] Figure 4 A schematic diagram of relative positions of a clipping frame and a selected image for some embodiments of the present application;

[0080] Figure 5 A schematic diagram of relative positions of a clipping frame and a selected image for some embodiments of the present application;

[0081] Figure 6 A schematic diagram of arrangement of target images on a sub-display for some embodiments of the present application;

[0082] Figure 7 A schematic diagram of structure of an image display apparatus for some embodiments of the present application;

[0083] Figure 8 A schematic diagram of structure of an electronic device for some embodiments of the present application.

[0084] Legend of reference signs:

[0085] 1 - reference display area; 2 - design image; 3 - target display area; 31 - sub-display area; 4 - clipping frame; 41 - first clipping edge; 42 - second clipping edge; 5 - target image; 6 - selected image; 61 - first selected edge; 62 - second selected edge;

[0086] 200 - image display apparatus; 210 - acquisition module; 220 - determination module; 230 - clipping unit; 240 - scaling module; 250 - display module;

[0087] 301 - processor; 302 - memory; 303 - communication interface; 310 - bus;

[0088] s1 - first interval value; s2 - second interval value;

[0089] P - clipping starting point;

[0090] O - origin;

[0091] Q - first direction;

[0092] E - second direction. DETAILED DESCRIPTION

[0093] In order to make the purposes, technical solutions and advantages of the present application clearer, the following further describes the present application in detail with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, but not to limit the present application. The present application can be implemented without some of the specific details by those skilled in the art. The following description of the embodiments is only to provide a better understanding of the present application by showing examples of the present application, in the accompanying drawings and the following description, at least some of the well-known structures and technologies are not shown in order to avoid unnecessary obscuring of the present application; and, in order to be clear, the size of some structures can be exaggerated. In addition, the features, structures or characteristics described below can be combined in any suitable way in one or more embodiments.

[0094] It should be noted that, in this paper, unless otherwise stated, the meaning of "a plurality of" is more than two; the orientation or position relationship indicated by the terms "upper", "lower", "left", "right", "inner", "outer" and the like is only for the convenience of describing the present application and simplifying the description, and does not indicate or imply that the device or element referred to must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as a limitation on the present application. In addition, relationship terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between the entities or operations. Moreover, the terms "include", "contain" or any other variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed or inherent to such process, method, article or device. Without more limitations, the elements defined by the statement "include" do not exclude the presence of other identical elements in the process, method, article or device that includes the elements.

[0095] In some existing software or programs, information is often expressed by displaying images. These displayed images often have different sizes before uploading, so these images often need to be processed after uploading to make the sizes of the images displayed in the same display device have better uniformity, thereby improving the overall display effect of multiple images. However, the applicant found that because the size of the processed image is often set to a fixed value, the size of the processed image displayed on display devices with different sizes is the same, so that the proportion of the image occupying the display area on different display devices is greatly different, resulting in poor user experience.

[0096] To solve the above technical problems, the present application is provided. Embodiments of the present application provide an image display method. The image display method provided by the embodiments of the present application is introduced below.

[0097] Figure 1 A flowchart of the image display method provided by some embodiments of the present application is shown in FIG. 1. Figure 2 A schematic diagram of the reference display area 1 and the design image 2 provided by some embodiments of the present application is shown in FIG. 2. Figure 3 A schematic diagram of the target display area 3 and the target image 5 provided by some embodiments of the present application is shown in FIG. 3, in which the Q direction is the first direction and the E direction is the second direction.

[0098] As shown in FIG. 1, the image display method provided by the embodiments of the present application includes the following steps. Figures 1 to 3

[0099] S101, obtaining a first initial ratio, a second initial ratio, a target width value and a target height value of a target display area 3 of a target device, the first initial ratio being a ratio of a design width value of a design image 2 to a reference width value of a reference display area 1 of a reference device, and the second initial ratio being a ratio of a design height value of the design image 2 to a reference height value of the reference display area 1 of the reference device.

[0100] In some embodiments, the first direction Q and the second direction E are arranged perpendicularly, and the target width value, the design width value and the reference width value can be the extension sizes of the target display area 3 in the first direction Q, the design image 2 in the first direction Q and the reference display area 1 in the first direction Q respectively. The target height value, the design height value and the reference height value can be the extension sizes of the target display area 3 in the second direction E, the design image 2 in the second direction E and the reference display area 1 in the second direction E respectively.

[0101] In some embodiments, the reference device can be a device preset for use by a UI (User Interface) designer, and in some embodiments, the reference display area 1 can be a display area preset for use by the UI designer, i.e., the design draft of the UI designer can be completed on the reference display area 1 on the reference device. In some embodiments, the design image 2 can be an image preset by the UI designer on the reference display area 1, i.e., the size of the design image 2 is designed by the UI designer according to the size of the reference display area 1.

[0102] ​In some embodiments, the relationship between the first initial ratio, the design width value of the design image 2, and the reference width value of the reference display area 1 of the reference device can satisfy: a = w1 / w2, where a is the first initial ratio, w1 is the design width value of the design image 2, and w2 is the reference width value of the reference display area 1.

[0103] In some embodiments, the relationship between the second initial ratio, the design height value of the design image 2, and the reference height value of the reference display area 1 of the reference device can satisfy: b = h1 / h2, where b is the second initial ratio, h1 is the design height value of the design image 2, and h2 is the reference height value of the reference display area 1.

[0104] In some embodiments, the target device can be a device currently used by the user, and in some embodiments, the target display area 3 can be an area for display on the target device.

[0105] By obtaining the first initial ratio and the second initial ratio, the size relationship between the design image 2 and the reference display area 1 as intended by the UI designer can be determined, and different target images 5 intended by different UI designers can be obtained for different target devices according to the first initial ratio and the second initial ratio.

[0106] S102, determining an expected width value according to the first initial ratio and a target width value.

[0107] In some embodiments, the expected width value can be the extension size of the target image 5 in the first direction Q.

[0108] In some embodiments, the relationship between the expected width value, the first initial ratio, and the target width value of the target device can satisfy: w0 = a*w3, where w0 is the expected width value, and w3 is the target width value of the target device. Through the above relationship, the expected width value of the target image 5 as intended by the UI designer for the current target device can be obtained.

[0109] S103, determining an expected height value according to the second initial ratio and a target height value.

[0110] In some embodiments, the expected height value can be the extension size of the target image 5 in the second direction E.

[0111] In some embodiments, the relationship between the expected height value, the second initial ratio, and the target height value of the target device can satisfy: h0 = b*h3, where h0 is the expected height value, and h3 is the target height value of the target device. Through the above relationship, the expected height value of the target image 5 as intended by the UI designer for the current target device can be obtained.

[0112] By determining the expected width value and the expected height value, the size of the target image 5 expected to be displayed by the UI designer can be determined for the target display area 3 of the current target device, so that when the user uses the target device with different sizes of the target display area 3, the proportion of the target display area occupied by the target image 5 displayed first on the target display area 3 is not easily changed, and the uniformity of the display effect of the target image 5 on different target devices is improved.

[0113] S104, determining an expected aspect ratio according to the expected width value and the expected height value.

[0114] In some embodiments, the relationship among the expected aspect ratio, the expected width value and the expected height value can satisfy: c = w0 / h0, where c is the expected aspect ratio.

[0115] S105, cropping the selected image 6 according to the expected aspect ratio to obtain an initial image.

[0116] In some embodiments, the selected image 6 can be an image uploaded to the target device by the user through photographing or local picture selection.

[0117] In some embodiments, the initial image has a cropped width value and a cropped height value, the cropped width value can be the extension size of the initial image in the first direction Q, and the cropped height value can be the extension size of the initial image in the second direction E, and the ratio between the extension size of the initial image in the first direction Q and the extension size of the initial image in the second direction E is the expected aspect ratio, that is, the ratio between the cropped width value and the cropped height value is the expected aspect ratio.

[0118] In some embodiments, the relationship among the cropped width value, the cropped height value and the expected aspect ratio can satisfy: w01 / h01 = c, where w01 is the cropped width value and h01 is the cropped height value. After the selected image 6 is cropped according to the expected aspect ratio, the initial image obtained has a better display effect without stretching in a certain direction to cause image distortion.

[0119] S106, scaling the initial image according to the expected aspect ratio to obtain the target image 5.

[0120] In some embodiments, since the ratio between the cropped width value and the cropped height value is the expected aspect ratio, and the ratio between the expected width value and the expected height value is also the expected aspect ratio, scaling the initial image can obtain the target image 5 with the expected width value and the expected height value.

[0121] S107, displaying the target image 5 on the target display area 3 of the target device.

[0122] The target image 5 with the expected width value and the expected height value is displayed on the target display area 3, so that the expected width value and the expected height value of the target image 5 displayed on the target display area 3 are determined according to the target width and the target height of the target display area 3 of the target device, so that the target image 5 with different expected width values and expected height values can be displayed on different target devices, so that the proportions of the areas of the target image 5 displayed on different target devices to the area of the target display area 3 are the same, and the difference in the proportion of the area of the target image 5 to the area of the target display area 3 on different display devices is reduced.

[0123] Figure 4 The relative position diagram of the cropping frame 4 and the selected image 6 provided for some embodiments of the present application is shown in the figure, Figure 5 The relative position diagram of the cropping frame 4 and the selected image 6 provided for some embodiments of the present application is shown in the figure, X represents the X axis, and Y represents the Y axis.

[0124] As Figure 4 As Figure 5 In some embodiments, the above S105 can include the following steps:

[0125] According to the expected aspect ratio, the selected image 6 is cropped by using the movable and / or scalable cropping frame 4 to obtain the initial image.

[0126] In some embodiments, the cropping frame 4 can be used to crop the selected image 6, the cropping width value can be the extension size of the cropping frame 4 in the first direction Q, and the cropping height value can be the extension size of the cropping frame 4 in the second direction E. Since the cropping frame 4 is movable, any part of the selected image 6 can be cropped. Since the cropping frame 4 is scalable, the ratio of the cropping width value to the cropping height value of the initial image cropped by the cropping frame 4 can be the expected aspect ratio.

[0127] The present application does not limit the shape of the reference display area 1, the target display area 3, the design image 2, the target image 5, and the cropping frame 4, and the shape of the reference display area 1, the target display area 3, the design image 2, the target image 5, and the cropping frame 4 can be any shape. In some embodiments, the shape of the cropping frame 4 is the same as that of the target image 5.

[0128] As Figure 5 As

[0129] The selected width value and the selected height value of the selected image 6 are obtained;

[0130] The selected aspect ratio of the selected image 6 is calculated according to the selected width value and the selected height value of the selected image 6;

[0131] In the case that the aspect ratio of the selected image 6 is less than the expected aspect ratio, the selected width value of the selected image 6 is determined as the crop width value of the crop frame 4;

[0132] Based on the crop width value of the crop frame 4 and the expected aspect ratio, the crop height value of the crop frame 4 is determined;

[0133] The selected image 6 is cropped by the crop frame 4 to obtain an initial image.

[0134] In some embodiments, the selected width value can be the extension size of the selected image 6 in the first direction Q, and the selected height value can be the extension size of the selected image 6 in the second direction E.

[0135] In some embodiments, the relationship between the selected aspect ratio, the selected width value and the selected height value can satisfy: d = w4 / h4, where d is the selected aspect ratio, w4 is the selected width value, and h4 is the selected height value.

[0136] In some embodiments, since the selected aspect ratio is less than the expected aspect ratio, that is, the ratio between the selected width value and the selected height value is less than the ratio between the expected width value and the expected height value, by setting the crop width value equal to the selected width value, the crop height value determined according to the expected aspect ratio will be less than the selected height value, so that the crop range of the crop frame 4 can be completely located within the selected image 6, so as to facilitate the cropping of the selected image 6 by the crop frame 4, and improve the cropping efficiency of the crop frame 4.

[0137] Based on this, in some embodiments, before the selected image 6 is cropped by the crop frame 4 to obtain an initial image in the above S105, the method can further include:

[0138] When the shape of the selected image 6 is a rectangle, the intersection point of the first selected edge 61 and the second selected edge 62 on the selected image 6 is obtained, where the length of the first selected edge 61 is equal to the selected width value, and the length of the second selected edge 62 is equal to the selected height value;

[0139] A coordinate system is established, taking the intersection point of the first selected edge 61 and the second selected edge 62 as the origin O of the coordinate system, and the coordinate value of the origin O in the coordinate system is (0, 0);

[0140] The first selected edge 61 is set to be parallel to the X-axis of the coordinate system, and the selected image 6 is set to be located in the first quadrant of the coordinate system;

[0141] The shape of the crop frame 4 is set to be a rectangle, and the intersection point of the first crop edge 41 and the second crop edge 42 on the crop frame 4 is obtained, where the length of the first crop edge 41 of the crop frame 4 is equal to the crop width value, and the length of the second crop edge 42 of the crop frame 4 is equal to the crop height value;

[0142] The intersection of the first clipping edge 41 and the second clipping edge 42 is determined as a clipping starting point P of the clipping frame 4, and the coordinate value of the clipping starting point P in the coordinate system is (i, k). The value of k in the clipping starting point P is set to be equal to the difference between the selected height value and the clipping height value divided by 2, and the value of i in the clipping starting point P is set to be equal to 0.

[0143] The clipping frame 4 and the selected image 6 are displayed in the target display area 3.

[0144] In some embodiments, the first selected edge 61 and the second selected edge 62 can be a set of adjacent edges on the outer contour of the selected image 6. In some embodiments, the first selected edge 61 can be parallel to the first direction Q, the second selected edge 62 can be parallel to the second direction E, and the first selected edge 61 and the second selected edge 62 can be perpendicular to each other and intersect.

[0145] In some embodiments, the established coordinate system has an X axis and a Y axis, wherein the X axis can be parallel to the first direction Q, and the Y axis can be parallel to the second direction E.

[0146] In some embodiments, the first clipping edge 41 and the second clipping edge 42 can be a set of adjacent edges on the outer contour of the clipping frame 4. In some embodiments, the length of the first clipping edge 41 can be equal to the clipping width value, and the width of the second clipping edge 42 can be equal to the clipping height value. In some embodiments, the first clipping edge 41 can be parallel to the first direction Q, the second clipping edge 42 can be parallel to the second direction E, and the first clipping edge 41 and the second clipping edge 42 can be perpendicular to each other and intersect.

[0147] In some embodiments, by setting the clipping starting point P to be (i, k), the position of the clipping frame 4 can be defined, and by setting the value of k in the clipping starting point P to be equal to the difference between the selected height value and the clipping height value divided by 2, i.e. k = (h4-h01) / 2, and setting the value of i in the clipping starting point P to be equal to 0, the position of the clipping frame 4 can be located in the middle of the selected picture, so that the clipping frame 4 can perform more balanced clipping on the selected picture.

[0148] As shown in FIG. 1, in some embodiments, S105 can include: Figure 4

[0149] The selected width value and the selected height value of the selected image 6 are obtained.

[0150] The selected aspect ratio of the selected image 6 is calculated according to the selected width value and the selected height value of the selected image 6.

[0151] In the case where the selected aspect ratio is greater than or equal to the expected aspect ratio, the selected height value is determined as the clipping height value of the clipping frame 4.

[0152] ​determine a crop width value of the crop frame 4 based on the crop height value of the crop frame 4 and the expected aspect ratio;

[0153] crop the selected image 6 using the crop frame 4 to obtain an initial image.

[0154] In some embodiments, the selected width value can be an extension dimension of the selected image 6 in the first direction Q, and the selected height value can be an extension dimension of the selected image 6 in the second direction E.

[0155] In some embodiments, the relationship between the selected aspect ratio, the selected width value and the selected height value can satisfy: d = w4 / h4, where d is the selected aspect ratio, w4 is the selected width value, and h4 is the selected height value.

[0156] In some embodiments, since the selected aspect ratio is greater than the expected aspect ratio, that is, the ratio between the selected width value and the selected height value is greater than the ratio between the expected width value and the expected height value, by setting the crop height value equal to the selected height value, the crop width value determined according to the expected aspect ratio will be less than the selected width value, so that the crop range of the crop frame 4 can be completely located within the selected image 6, so as to facilitate the cropping of the selected image 6 by the crop frame 4, and improve the cropping efficiency of the crop frame 4.

[0157] Based on this, in some embodiments, before the above-mentioned S105 of cropping the selected image 6 using the crop frame 4 to obtain an initial image, the method can further include:

[0158] When the shape of the selected image 6 is a rectangle, the intersection of the first selected edge 61 and the second selected edge 62 on the selected image 6 is obtained, where the length of the first selected edge 61 is equal to the selected width value, and the length of the second selected edge 62 is equal to the selected height value.

[0159] A coordinate system is established, and the intersection of the first selected edge 61 and the second selected edge 62 is taken as the origin O of the coordinate system, and the coordinate value of the origin O in the coordinate system is (0, 0);

[0160] The first selected edge 61 is set to be parallel to the X-axis of the coordinate system, and the selected image 6 is set to be located in the first quadrant of the coordinate system.

[0161] The shape of the crop frame 4 is set to be a rectangle, and the intersection of the first crop edge 41 and the second crop edge 42 on the crop frame 4 is obtained, where the length of the first crop edge 41 of the crop frame 4 is equal to the crop width value, and the length of the second crop edge 42 of the crop frame 4 is equal to the crop height value.

[0162] The intersection of the first clipping edge 41 and the second clipping edge 42 is determined as a clipping starting point P of the clipping frame 4, and the coordinate value of the clipping starting point P in the coordinate system is (i, k), the value of i in the clipping starting point P is set to be equal to the difference between the selected width value and the clipping width value divided by 2, and the value of k in the clipping starting point P is set to be equal to 0;

[0163] The clipping frame 4 and the selected image 6 are displayed in the target display area 3.

[0164] In some embodiments, the first selected edge 61 and the second selected edge 62 can be a set of adjacent edges on the outer contour of the selected image 6. In some embodiments, the first selected edge 61 can be parallel to the first direction Q, the second selected edge 62 can be parallel to the second direction E, and the first selected edge 61 and the second selected edge 62 can be perpendicular to each other and intersect.

[0165] In some embodiments, the established coordinate system has an X axis and a Y axis, wherein the X axis can be parallel to the first direction Q, and the Y axis can be parallel to the second direction E.

[0166] In some embodiments, the first clipping edge 41 and the second clipping edge 42 can be a set of adjacent edges on the outer contour of the clipping frame 4, and in some embodiments, the length of the first clipping edge 41 can be equal to the clipping width value, and the width of the second clipping edge 42 can be equal to the clipping height value. In some embodiments, the first clipping edge 41 can be parallel to the first direction Q, the second clipping edge 42 can be parallel to the second direction E, and the first clipping edge 41 and the second clipping edge 42 can be perpendicular to each other and intersect.

[0167] In some embodiments, by setting the clipping starting point P to be (i, k), the position of the clipping frame 4 can be defined, and by setting the value of i in the clipping starting point P to be equal to the difference between the selected width value and the clipping width value divided by 2, i.e. i = (w4-w01) / 2, and setting the value of k in the clipping starting point P to be equal to 0, the position of the clipping frame 4 can be located in the middle of the selected picture, so that the clipping frame 4 can perform more balanced clipping on the selected picture.

[0168] In addition to the relative position settings of the clipping frame 4 and the selected image 6 in the two aforementioned embodiments, in some other embodiments, before the clipping of the selected image 6 by the clipping frame 4 in S105 to obtain the initial image, the method further comprises:

[0169] obtaining the geometric center of the clipping frame 4;

[0170] obtaining the geometric center of the selected image 6;

[0171] setting the geometric center of the clipping frame 4 to coincide with the geometric center of the selected image 6, and displaying the clipping frame 4 and the selected image 6 in the target display area 3.

[0172] In the embodiments of the present application, by setting the geometric center of the cropping frame 4 to coincide with the geometric center of the selected image 6, the position of the cropping frame 4 can also be located in the middle of the selected image, so that the cropping frame 4 can perform more balanced cropping on the selected image.

[0173] Based on any of the foregoing embodiments, since the cropping frame 4 is movable and / or can be scaled by a constant ratio, the cropping width value, the cropping height value, and the cropping starting point P of the cropping frame 4 determined in any of the foregoing S105 can all be the dimensions and positions possessed by the initial state of the cropping frame 4, that is, the cropping frame 4 in the initial state can still be changed in the cropping width value, the cropping height value, and the cropping starting point P. By displaying the cropping frame 4 and the selected image 6 in the target display area 3, the user can select to change the cropping width value, the cropping height value, and the cropping starting point P of the cropping frame 4 in the initial state to obtain the final state of the cropping frame 4, so that the cropping frame 4 in the final state can crop the selected image 6 to obtain the target image 5 desired by the user, thereby improving the user experience.

[0174] Moreover, since the cropping frame 4 can only be scaled by a constant ratio, the ratio of the cropping width value and the cropping height value changed by the user can still be equal to the expected aspect ratio, that is, after the processing of the S106 step, the dimensions of the target image 5 expected by the UI designer for the current target device can still be obtained, and the difference in the proportion of the area of the target image 5 in the target display area 3 on different display devices can still be reduced.

[0175] Figure 6 The present application provides a schematic diagram of the arrangement of the target image 5 on the sub-display area 31 for some embodiments of the present application.

[0176] As Figure 6 shown, based on this, in some embodiments, the S107 step can include:

[0177] The target display area 3 includes a sub-display area 31. In the case where it is detected that the target image 5 is multiple, the number of target images 5 and the sub-display width value of the sub-display area 31 in the target display area 3 are obtained.

[0178] A preset number is obtained, which is the number of target images 5 arranged in each row;

[0179] According to the preset number, the number of target images 5, and the sub-display width value, a first interval value s1 and a second interval value s2 are determined.

[0180] The plurality of target images 5 are arranged in the sub-display area 31 along the first direction Q in sequence at equal intervals, wherein adjacent target images 5 are spaced apart by the first interval value s1.

[0181] In a case where the number of the target images 5 arranged in each row is detected as the preset number, a line break operation is performed, wherein a first interval value s1 is arranged between adjacent two rows;

[0182] An outer contour of the sub-display area 31 is obtained;

[0183] The arranged plurality of target images 5 is formed into an image array, and a second interval value s2 is arranged between the image array and the outer contour.

[0184] In some embodiments, the target display area 3 can include a sub-display area 31, the sub-display area 31 has a sub-display width value in the extension dimension in the first direction Q, which can be less than or equal to the extension dimension of the target display area 3 in the first direction Q, and has a sub-display height value in the extension dimension in the second direction E, which can be less than or equal to the extension dimension of the target display area 3 in the second direction E. In some embodiments, the sub-display area 31 can be the entire target display area 3 of the target device.

[0185] In some embodiments, the first interval value s1 is arranged between the target images 5 adjacent in the first direction Q and in the second direction E, and the second interval value s2 is arranged between the image array formed by the plurality of target images 5 and the outer contour of the sub-display area 31.

[0186] In some embodiments, the preset number can be a fixed value set by a UI designer, so that the number of target images 5 in each row in the sub-display area 31 is fixed, and the relationship between the preset number, the first interval value s1, the second interval value s2, the expected width value and the sub-display width value can satisfy: (n-1)*s1+2*s2+n*w0=w5, wherein n is the preset number, s1 is the first interval value, s2 is the second interval value, and w5 is the sub-display width value. By defining the value of any one of the first interval value s1 and the second interval value s2 by the UI designer, the value of the other one is obtained, so that the arrangement of the target images 5 in the sub-display area 31 can meet the expectation of the UI designer, and still has good display effect on different target devices, thereby improving the user experience.

[0187] In other embodiments, the first interval value s1 can also be equal to the second interval value s2, so that the target images 5 displayed in the sub-display area 31 are arranged more uniformly.

[0188] Therefore, the preset number can be determined according to the width of the sub-display area 31, and before the plurality of target images 5 is arranged and displayed in the first direction Q, the method further includes:

[0189] The ratio of the sub-display width value to the expected width value is calculated, the quotient is determined as the preset number, and the remainder is determined as a total width interval value;

[0190] The first interval value s1 and the second interval value s2 are determined through a relationship (n-1)*s1+2*s2+n*w0=w5, where n is a preset number, s1 is the first interval value s1, s2 is the second interval value s2, w0 is an expected width value, and w5 is a sub-display width value.

[0191] In some embodiments, the arrangement of the target images 5 in the sub-display area 31 can meet the expectation of the UI designer and still have a good display effect on different target devices, and the user experience is improved, through the relationship between the above-mentioned preset number, the first interval value s1, the second interval value s2, the expected width value, and the sub-display width value.

[0192] Based on this, in some embodiments, before S107, the method further includes:

[0193] obtaining a number of rows of the target images 5;

[0194] determining an actual occupied height value of the image array according to the number of rows, the first interval value s1, and the second interval value s2;

[0195] obtaining a sub-display height value of the sub-display area 31;

[0196] adding a scroll processing to the sub-display area 31 in a case where the actual occupied height value is greater than the sub-display height value;

[0197] The target display area 3 of the target device displays the target images 5, including:

[0198] The target images 5 are displayed in the sub-display area 31 of the target display area 3 in a scrolling manner.

[0199] In some embodiments, the relationship between the number of rows, the first interval value s1, the second interval value s2, and the actual occupied height value can meet h6=(v-1)*s1+2*s2+v*h0, where h6 is the actual occupied height value, and v is the number of rows.

[0200] The scroll processing is added to the sub-display area 31 when the actual occupied height value is greater than the sub-display height value, so that the plurality of target images 5 can be displayed through scrolling of the sub-display area 31.

[0201] Figure 7 A structural schematic diagram of an image display device provided by some embodiments of the present application is provided.

[0202] The image display device provided by some embodiments of the present application is shown in FIG. 2. Figure 7 As shown in FIG. 2, the image display device 200 includes:

[0203] The acquisition module 210 is configured to acquire a first initial ratio, a second initial ratio, and target width and height values of a target display area 3 of a target device, the first initial ratio being a ratio of a design width value of the design image 2 to a reference width value of the reference display area 1 of the reference device, and the second initial ratio being a ratio of a design height value of the design image 2 to a reference height value of the reference display area 1 of the reference device.

[0204] The determination module 220 is configured to determine an expected width value according to the first initial ratio and the target width value.

[0205] The determination module 220 is further configured to determine an expected height value according to the second initial ratio and the target height value.

[0206] The determination module 220 is further configured to determine an expected aspect ratio according to the expected width value and the expected height value.

[0207] The cropping unit 230 is configured to crop the selected image 6 according to the expected aspect ratio to obtain an initial image.

[0208] The scaling module 240 is configured to scale the initial image according to the expected aspect ratio to obtain a target image 5.

[0209] The display module 250 is configured to display the target image 5 on the target display area 3.

[0210] In some embodiments, the cropping unit 230 is configured to crop the selected image 6 according to the expected aspect ratio to obtain the initial image, including:

[0211] The cropping unit 230 is configured to crop the selected image 6 according to the expected aspect ratio by using a movable and / or scalable cropping frame 4 to obtain the initial image.

[0212] In some embodiments, the image display apparatus further includes a calculation module.

[0213] The acquisition module 210 is configured to acquire a selected width value and a selected height value of the selected image 6.

[0214] The calculation module is configured to calculate a selected aspect ratio of the selected image 6 according to the selected width value and the selected height value of the selected image 6.

[0215] The determination module 220 is configured to determine, in a case where the selected aspect ratio is less than the expected aspect ratio, that the selected width value of the selected image 6 is a cropping width value of the cropping frame 4.

[0216] The determination module 220 is further configured to determine, based on the cropping width value of the cropping frame 4 and the expected aspect ratio, a cropping height value of the cropping frame 4.

[0217] The cropping unit 230 crops the selected image 6 using the cropping frame 4 to obtain an initial image.

[0218] In some embodiments, the image display device further comprises a constructing module and a setting module.

[0219] The obtaining module 210 is further configured to, when the shape of the selected image 6 is a rectangle, obtain an intersection point of a first selected edge 61 and a second selected edge 62 on the selected image 6, wherein the first selected edge 61 has a length equal to the selected width value, and the second selected edge 62 has a length equal to the selected height value.

[0220] The constructing module is configured to establish a coordinate system, with the intersection point of the first selected edge 61 and the second selected edge 62 as an origin O of the coordinate system, and the coordinate value of the origin O in the coordinate system being (0, 0).

[0221] The setting module is configured to set the first selected edge 61 parallel to an X-axis of the coordinate system, and set the selected image 6 in a first quadrant of the coordinate system; and set the shape of the cropping frame 4 as a rectangle.

[0222] The obtaining module is further configured to obtain an intersection point of a first cropping edge 41 and a second cropping edge 42 on the cropping frame 4, wherein the first cropping edge 41 of the cropping frame 4 has a length equal to the cropping width value, and the second cropping edge 42 of the cropping frame 4 has a length equal to the cropping height value.

[0223] The determining module is configured to determine the intersection point of the first cropping edge 41 and the second cropping edge 42 as a cropping starting point P of the cropping frame 4, and set the coordinate value of the cropping starting point P in the coordinate system as (i, k), set the value of k in the cropping starting point P equal to a difference between the selected height value and the cropping height value divided by 2, and set the value of i in the cropping starting point P equal to 0; and display the cropping frame 4 and the selected image 6 in the target display area 3.

[0224] In one embodiment,

[0225] The obtaining module 210 is further configured to obtain a selected width value and a selected height value of the selected image 6.

[0226] The calculating module is configured to calculate a selected aspect ratio of the selected image 6 according to the selected width value and the selected height value of the selected image 6.

[0227] The determining module 220 is configured to, in a case where the selected aspect ratio is greater than or equal to an expected aspect ratio, determine the selected height value as a cropping height value of the cropping frame 4.

[0228] The determining module 220 is further configured to determine a cropping width value of the cropping frame 4 based on the cropping height value of the cropping frame 4 and the expected aspect ratio.

[0229] The cropping unit 230 is configured to crop the selected image 6 using the cropping frame 4 to obtain an initial image.

[0230] In some embodiments,

[0231] The obtaining module 210 is further configured to obtain an intersection of the first selection edge 61 and the second selection edge 62 on the selected image 6, when the shape of the selected image 6 is a rectangle, wherein the length of the first selection edge 61 is equal to the selected width value, and the length of the second selection edge 62 is equal to the selected height value.

[0232] The establishing module is further configured to establish a coordinate system, with the intersection of the first selection edge 61 and the second selection edge 62 as the origin O of the coordinate system, and the coordinate value of the origin O in the coordinate system being (0, 0).

[0233] The setting module is further configured to set the first selection edge 61 parallel to the X-axis of the coordinate system, and set the selected image 6 in the first quadrant of the coordinate system; and set the shape of the cropping frame 4 as a rectangle.

[0234] The obtaining module 210 is further configured to obtain an intersection of the first cropping edge 41 and the second cropping edge 42 on the cropping frame 4, wherein the length of the first cropping edge 41 of the cropping frame 4 is equal to the cropping width value, and the length of the second cropping edge 42 of the cropping frame 4 is equal to the cropping height value.

[0235] The determining module 220 is further configured to determine the intersection of the first cropping edge 41 and the second cropping edge 42 as the cropping starting point P of the cropping frame 4, and set the value of i in the cropping starting point P equal to half of the difference between the selected width value and the cropping width value, and set the value of k in the cropping starting point P equal to 0.

[0236] The display module 250 is configured to display the cropping frame 4 and the selected image 6.

[0237] In some embodiments,

[0238] The obtaining module 210 is further configured to obtain the geometric center of the cropping frame 4.

[0239] The obtaining module 210 is further configured to obtain the geometric center of the selected image 6.

[0240] The setting module is further configured to set the geometric center of the cropping frame 4 coinciding with the geometric center of the selected image 6.

[0241] The display module 250 is configured to display the cropping frame 4 and the selected image 6 in the target display area 3.

[0242] In some embodiments, the image display device further comprises an arranging module.

[0243] The acquisition module 210 is further configured to acquire the number of target images 5 and a sub-display width value of the sub-display area 31 when it is detected that the target images 5 are multiple.

[0244] The acquisition module 210 is further configured to acquire a preset number, the preset number being the number of target images 5 arranged in each row.

[0245] The determination module 220 is further configured to determine the first interval value s1 and the second interval value s2 according to the preset number, the number of target images 5, and the sub-display width value.

[0246] The arrangement module is configured to arrange the multiple target images 5 in the sub-display area 31 along the first direction Q in sequence at equal intervals, wherein adjacent target images 5 are spaced apart by the first interval value s1.

[0247] The arrangement module is further configured to perform a line break operation when it is detected that the number of target images 5 arranged in each row is the preset number, wherein adjacent two rows are spaced apart by the first interval value s1.

[0248] The acquisition module 210 is further configured to acquire an outer contour of the sub-display area 31.

[0249] The multiple target images 5 arranged in sequence form an image array, and the image array is spaced apart from the outer contour by the second interval value s2.

[0250] In some embodiments, the first interval value s1 is equal to the second interval value s2.

[0251] The calculation module is further configured to calculate a ratio of the sub-display width value to an expected width value, determine a quotient as the preset number, and determine a remainder as a total width interval value.

[0252] The determination module 220 is further configured to determine the first interval value s1 and the second interval value s2 by a relationship (n-1)*s1+2*s2+n*w0=w5, wherein n is the preset number, s1 is the first interval value s1, s2 is the second interval value s2, w0 is the expected width value, and w5 is the sub-display width value.

[0253] In some embodiments,

[0254] The acquisition module 210 is further configured to acquire a number of rows of target images 5.

[0255] The determination module 220 is further configured to determine an actual occupied height value of the image array according to the number of rows, the first interval value s1, and the second interval value s2.

[0256] The acquisition module 210 is further configured to acquire a sub-display height value of the sub-display area 31.

[0257] In the case that the actual occupied height value is greater than the sub-display height value, a scroll processing is added to the sub-display area 31.

[0258] The display module 250 displays the target image 5 in a scrolling manner in the sub-display area 31.

[0259] Figure 7 The modules of the image display device shown in the figures have the functions of implementing Figure 1 The modules of the image display method shown in the figures have the functions of implementing

[0260] Figure 8 A hardware structure schematic diagram of an electronic device provided by an embodiment of the present application is shown.

[0261] The electronic device can include a processor 301 and a memory 302 having computer program instructions stored therein.

[0262] Specifically, the processor 301 described above can include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or can be configured to implement one or more integrated circuits of the embodiments of the present application.

[0263] The memory 302 can include a mass storage for data or instructions. By way of example and not limitation, the memory 302 can include a hard disk drive (HDD), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive or a combination of two or more of these. Where appropriate, the memory 302 can include removable or non-removable (or fixed) media. Where appropriate, the memory 302 can be internal or external to the integrated gateway disaster recovery device. In a particular embodiment, the memory 302 is non-volatile solid-state memory.

[0264] The memory can include read-only memory (ROM), random access memory (RAM), magnetic disk storage media devices, optical storage media devices, flash memory devices, electrical, optical, or other physical / tangible memory storage devices. Thus, in general, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., a memory device) encoded with software that, when executed (e.g., by one or more processors), is operable to perform the operations described with reference to the methods according to an aspect of the present disclosure.

[0265] The processor 301 implements the data processing method in any of the above embodiments by reading and executing computer program instructions stored in the memory 302.

[0266] In one example, the electronic device can further include a communication interface 303 and a bus 310. As shown, the processor 301, the memory 302, and the communication interface 303 are connected through the bus 310 and complete communication with each other. Figure 3

[0267] The communication interface 303 is mainly used to realize the communication between the modules, devices, units and / or equipment in the embodiments of the present application.

[0268] The bus 310 includes hardware, software or both to couple components of a data processing device to each other. By way of example, and not limitation, the bus can include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a HyperTransport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or another suitable bus or combination of two or more of these. Where appropriate, the bus 310 can include one or more buses. Although the present application describes and illustrates a particular bus, the present application contemplates any suitable bus or interconnect.

[0269] The electronic device can execute the data processing method in the embodiments of the present application based on the information of the payment application and based on the target regulatory information of the information of the payment application generated according to the preset regulatory rules, so as to realize the image display method described in combination Figure 1 with the above embodiments.

[0270] In addition, in combination with the data processing method in the above embodiments, the embodiments of the present application can provide a computer storage medium to realize. The computer storage medium has computer program instructions stored thereon; the computer program instructions are executed by the processor to realize any of the image display methods in the above embodiments.

[0271] It should be clear that the present application is not limited to the specific configurations and processes described above and shown in the drawings. For the sake of brevity, detailed descriptions of well-known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order of the steps, after understanding the spirit of the present application. ​

[0272] The functions noted in the structural block diagrams described above can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application specific integrated circuits (ASICs), appropriate firmware, plug-ins, functional cards, and the like. When implemented in software, the elements of the present application are program or code segments that are used to perform the required tasks. The program or code segments can be stored in a machine-readable medium or transmitted through a data signal carried in a carrier wave over a transmission medium or communication link. A "machine-readable medium" includes any medium that can store or transport information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, radio frequency (RF) links, and the like. The code segments can be downloaded via computer networks such as the Internet, intranets, and the like.

[0273] It is also noted that the exemplary embodiments mentioned in the present application describe some methods or systems based on a series of steps or devices. However, the present application is not limited to the order of the steps mentioned above, that is, the steps can be performed in the order mentioned in the embodiments, or in an order different from the embodiments, or several steps can be performed simultaneously.

[0274] The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks. These computer program instructions can also be stored in a computer readable medium that can direct a computer, other programmable data processing apparatus, or other processing devices to operate in a particular manner, such that the instructions stored in the computer readable medium produce an article of manufacture including instructions which implement the function / act specified in the flowchart and / or block diagram block or blocks. The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks. These computer program instructions can also be stored in a computer readable medium that can direct a computer, other programmable data processing apparatus, or other processing devices to operate in a particular manner, such that the instructions stored in the computer readable medium produce an article of manufacture including instructions which implement the function / act specified in the flowchart and / or block diagram block or blocks.

[0275] The above merely describes a specific implementation of the present application. Those skilled in the art can clearly understand the specific working processes of the system, modules and units described above for the convenience and brevity of description, and can refer to the corresponding processes in the foregoing method embodiments, which will not be described herein again. It should be understood that the protection scope of the present application is not limited to this, and any person skilled in the art can easily think of various equivalent modifications or replacements within the technical range disclosed by the present application, and these modifications or replacements should be covered within the protection scope of the present application.

Claims

1. An image display method characterized by, The method comprises: obtaining a first initial ratio, a second initial ratio, and target width and height values of a target display area of a target device, the first initial ratio being a ratio of a design width value of a design image to a reference width value of a reference display area of a reference device, and the second initial ratio being a ratio of a design height value of the design image to a reference height value of the reference display area of the reference device; determining an expected width value according to the first initial ratio and the target width value; determining an expected height value according to the second initial ratio and the target height value; determining an expected aspect ratio according to the expected width value and the expected height value; cropping a selected image according to the expected aspect ratio to obtain an initial image; scaling the initial image according to the expected aspect ratio to obtain a target image; displaying the target image on a target display area of the target device; wherein the cropping the selected image according to the expected aspect ratio to obtain the initial image comprises: cropping the selected image according to the expected aspect ratio using a movable and / or scalable cropping frame to obtain the initial image; the cropping the selected image according to the expected aspect ratio to obtain the initial image comprises: obtaining a selected width value and a selected height value of the selected image; calculating a selected aspect ratio of the selected image according to the selected width value and the selected height value of the selected image; in a case where the selected aspect ratio is less than the expected aspect ratio, determining the selected width value of the selected image as a cropping width value of the cropping frame, and determining a cropping height value of the cropping frame based on the cropping width value of the cropping frame and the expected aspect ratio; in a case where the selected aspect ratio is greater than or equal to the expected aspect ratio, determining the selected height value as the cropping height value of the cropping frame, and determining a cropping width value of the cropping frame based on the cropping height value of the cropping frame and the expected aspect ratio; cropping the selected image using the cropping frame to obtain the initial image.

2. The image display method according to claim 1, characterized by, before the cropping the selected image using the cropping frame to obtain the initial image, the method further comprises: when the shape of the selected image is a rectangle, obtaining an intersection point of a first selected side and a second selected side of the selected image, wherein the first selected side has a length equal to the selected width value, and the second selected side has a length equal to the selected height value; establishing a coordinate system with the intersection point of the first selected side and the second selected side as an origin of the coordinate system, and the coordinate value of the origin in the coordinate system being (0, 0); setting the first selected side parallel to the X-axis of the coordinate system, and setting the selected image in the first quadrant of the coordinate system; setting the shape of the cropping frame as a rectangle, and obtaining an intersection point of a first cropping side and a second cropping side of the cropping frame, wherein the first cropping side of the cropping frame has a length equal to the cropping width value, and the second cropping side of the cropping frame has a length equal to the cropping height value; determining the intersection point of the first clipping edge and the second clipping edge as a clipping starting point of the clipping frame, a coordinate value of the clipping starting point in the coordinate system being (i, k), setting the value of k in the clipping starting point to be equal to a difference between the selected height value and the clipping height value divided by 2, and setting the value of i in the clipping starting point to be equal to 0; displaying the clipping frame and the selected image in the target display area.

3. The image display method according to claim 1, characterized by, Before the selected image is cropped by using the clipping frame to obtain an initial image, the method further comprises: when the shape of the selected image is a rectangle, obtaining an intersection point of a first selected edge and a second selected edge on the selected image, wherein the first selected edge has a length equal to the selected width value, and the second selected edge has a length equal to the selected height value; establishing a coordinate system, taking the intersection point of the first selected edge and the second selected edge as an origin of the coordinate system, and a coordinate value of the origin in the coordinate system being (0, 0); setting the first selected edge to be parallel to an X-axis of the coordinate system, and setting the selected image to be located in a first quadrant of the coordinate system; setting the shape of the clipping frame to be a rectangle, and obtaining an intersection point of a first clipping edge and a second clipping edge on the clipping frame, wherein the first clipping edge of the clipping frame has a length equal to the clipping width value, and the second clipping edge of the clipping frame has a length equal to the clipping height value; determining the intersection point of the first clipping edge and the second clipping edge as a clipping starting point of the clipping frame, a coordinate value of the clipping starting point in the coordinate system being (i, k), setting the value of i in the clipping starting point to be equal to a difference between the selected width value and the clipping width value divided by 2, and setting the value of k in the clipping starting point to be equal to 0; displaying the clipping frame and the selected image in the target display area.

4. The image display method according to claim 1, characterized by, Before the selected image is cropped by using the clipping frame to obtain an initial image, the method further comprises: obtaining a geometric center of the clipping frame; obtaining a geometric center of the selected image; setting the geometric center of the clipping frame to coincide with the geometric center of the selected image, and displaying the clipping frame and the selected image in the target display area.

5. The image display method according to any one of claims 1 to 4, characterized by, displaying the target image in a target display area of the target device, comprising: the target display area comprises a sub-display area, when it is detected that the target image is multiple, obtaining a number of the target images and a sub-display width value of the sub-display area; obtaining a preset number, the preset number being a number of the target images arranged in each row; determining a first interval value and a second interval value according to the preset number, the number of the target images and the sub-display width value; arranging and displaying a plurality of the target images in the sub-display area along a first direction in sequence at equal intervals, wherein adjacent target images are spaced apart by the first interval value; when it is detected that the number of the target images arranged in each row is the preset number, performing a line feed operation, wherein adjacent two rows are spaced apart by the first interval value; obtaining an outer contour of the sub-display area; The arranged multiple target images form an image array, and the image array is arranged at a second interval value.

6. The image display method according to claim 5, wherein The first interval value is equal to the second interval value.

7. The image display method according to claim 6, wherein Before the multiple target images are arranged in the first direction, the method further comprises: calculating a ratio of the sub-display width value and the expected width value, determining a quotient as the preset number, and determining a remainder as a total width interval value; determining the first interval value and the second interval value according to a relationship (n-1)*s1+2*s2+n*w0=w5, where n is a preset number, s1 is the first interval value, s2 is the second interval value, w0 is the expected width value, and w5 is the sub-display width value.

8. The image display method according to claim 5, wherein Before the target device displays the target images on the target display area, the method further comprises: obtaining a number of rows of the target images; determining an actual occupied height value of the image array according to the number of rows, the first interval value, and the second interval value; obtaining a sub-display height value of the sub-display area; in a case where the actual occupied height value is greater than the sub-display height value, adding a scrolling process to the sub-display area; the target display area of the target device displays the target images, comprising: the target display area of the target device displays the target images in a scrolling manner.

9. An image display device, characterized by comprising: comprising: an obtaining module, configured to obtain a first initial ratio, a second initial ratio, a target width value, and a target height value of a target display area of a target device, the first initial ratio being a ratio of a design width value of a design image to a reference width value of a reference display area of a reference device, and the second initial ratio being a ratio of a design height value of the design image to a reference height value of the reference display area of the reference device; a determining module, configured to determine an expected width value according to the first initial ratio and the target width value; the determining module is further configured to determine an expected height value according to the second initial ratio and the target height value; the determining module is further configured to determine an expected aspect ratio according to the expected width value and the expected height value; a cropping unit, configured to crop a selected image according to the expected aspect ratio to obtain an initial image; a scaling module, configured to scale the initial image according to the expected aspect ratio to obtain a target image; a display module, configured to display the target image on a target display area; wherein the cropping unit is configured to crop the selected image according to the expected aspect ratio to obtain the initial image, comprising: the cropping unit is configured to crop the selected image according to the expected aspect ratio by using a movable and / or scalable cropping frame to obtain the initial image; the image display apparatus further comprises a calculating module; the obtaining module is configured to obtain a selected width value and a selected height value of the selected image; the calculating module is configured to calculate a selected aspect ratio of the selected image according to the selected width value and the selected height value of the selected image; The determining module is configured to, in a case where the selected aspect ratio is less than the expected aspect ratio, determine a selected width value of the selected image as a cropped width value of the cropping frame, and determine a cropped height value of the cropping frame based on the cropped width value of the cropping frame and the expected aspect ratio. The determining module is configured to, in a case where the selected aspect ratio is greater than or equal to the expected aspect ratio, determine the selected height value as a cropped height value of the cropping frame, and determine a cropped width value of the cropping frame based on the cropped height value of the cropping frame and the expected aspect ratio. The cropping unit is configured to crop the selected image using the cropping frame to obtain an initial image.

10. An electronic device, comprising: The electronic device includes a processor and a memory storing computer program instructions; the processor reads and executes the computer program instructions to implement the image display method according to any one of claims 1-8.

11. A computer storage medium, characterized in that The computer storage medium stores computer program instructions, and the computer program instructions are executed by a processor to implement the image display method according to any one of claims 1-8.

Images