Methods and electronic devices for displaying images

Abstract

This application provides a method and electronic device for displaying images. The method includes: in response to detecting a first operation by a user, a first device displays a first interface including a first combined layout corresponding to M images. The first combined layout includes thumbnails of the M images. In the first combined layout, the thumbnail of the first image among the M images presents a broken display effect. The layout of the first combined layout is related to the content of the M images and / or the association between the M images, where M is a positive integer greater than 1. The broken display effect of the thumbnail of the first image includes the effect that the main body of the first image exceeds the default display area of ​​the thumbnail of the first image. Through this method and electronic device, multiple images can be displayed in combination according to the content of the images and / or the association between the images, and the images can present a broken display effect, providing users with a more story-like image presentation method and improving the user's image browsing experience.

Description

Technical Field

[0001] This application relates to the field of terminal display, and more specifically, to a method and electronic device for displaying images. Background Technology

[0002] Users use smart devices to record various moments in their lives, and these devices can store a large number of pictures. Currently, to enhance the user's picture browsing experience, electronic devices can present multiple pictures in a rotating manner. However, when pictures are presented in this way, the emotional connection is slow to develop, making it difficult to evoke emotions in the user while browsing. Summary of the Invention

[0003] This application provides a method and electronic device for displaying images. Through this method and electronic device, multiple images in a gallery can be displayed in combination based on the content of the images and / or the association between the images. Furthermore, one or more images can be displayed in a unique way, providing users with a more story-like image presentation and giving users an image browsing experience that is "surprising at first glance and tells a story upon closer inspection".

[0004] In a first aspect, a method for displaying images is provided, the method being applied to a first device, the method comprising: detecting a first operation by a user; and in response to the first operation, the first device displaying a first interface, the first interface including a first combined layout corresponding to M images, wherein the first combined layout includes thumbnails of the M images, and in the first combined layout, the thumbnail of the first image among the M images is displayed with a broken display effect, the layout method of the first combined layout being related to the content of the M images and / or the association relationship between the M images, where M is a positive integer greater than 1; wherein the broken display effect of the thumbnail of the first image includes the effect that the subject of the first image exceeds the default display area of ​​the thumbnail of the first image.

[0005] Optionally, in the first layout, the M images can be displayed in a multi-grid format.

[0006] Optionally, the direction of the grid break in the first image may include one or more.

[0007] In this embodiment, multiple images in the gallery can be displayed in combination based on the content of the images and / or the association between them. Furthermore, one or more images can be displayed exceptionally, providing users with a more story-driven way of presenting images and giving them a "surprising at first glance, and a story to be told upon closer inspection" image browsing experience.

[0008] In conjunction with the first aspect, in one possible implementation, when the first device displays the first interface, the thumbnail of the first image dynamically changes from displaying a non-grid-breaking display effect to displaying the grid-breaking display effect.

[0009] In this embodiment of the application, one or more images in the combined display present a dynamic grid effect, which can enhance the user's image browsing experience and provide the user with a more story-like image presentation method.

[0010] In conjunction with the first aspect, in one possible implementation, the method further includes: in response to a user's swiping operation on the first interface, the first device displays a second interface, the second interface including a second combined layout corresponding to N images, the second combined layout including thumbnails of the N images, wherein, in the second combined layout, the thumbnail of the second image among the N images presents a broken display effect, the layout method of the second combined layout is related to the content of the N images and / or the association relationship between the N images, where N is a positive integer greater than 1; wherein, the broken display effect of the thumbnail of the second image includes the effect that the subject of the second image exceeds the default display area of ​​the thumbnail of the second image.

[0011] Optionally, the swipe operation can be, for example, an upward swipe, a downward swipe, a leftward swipe, or a rightward swipe.

[0012] In this embodiment, different layout combinations can be displayed on different pages, and users can switch between different layout combinations by swiping, which can improve the user's image browsing experience.

[0013] In conjunction with the first aspect, in one possible implementation, the first combined layout and the second combined layout are arranged vertically, the first interface includes the entirety of the first combined layout, and in response to a user's swiping operation on the first interface, the first device displays the second interface, including: in response to a user's upward swiping operation on the first interface, the first device displays the second interface, and the second interface includes the entirety of the second combined layout.

[0014] In this embodiment, different layout combinations can be arranged on the same page, and users can browse different layout combinations by swiping up or down, which can improve the user's image browsing experience.

[0015] In conjunction with the first aspect, in one possible implementation, the method further includes: in response to a second operation by a user on a thumbnail of a third image among the M images in the first combined layout, the first device displays the third image.

[0016] In this embodiment of the application, when browsing a combination of images, if a user wants to focus on a particular image, for example, they can click on the image they want to focus on in the combination layout interface to preview a larger version of that image. This helps the user save and browse images of interest from the multiple images in the combination layout.

[0017] In conjunction with the first aspect, in one possible implementation, the first interface further includes a first switching control, and the method further includes: in response to a user clicking the first switching control, the first device displays a third interface, the third interface including independently displayed thumbnails of the M images; in response to a user clicking the thumbnail of a fourth image among the M images in the third interface, the first device displays the fourth image.

[0018] Optionally, the first toggle control is used to switch between displaying thumbnails of M images in a combined layout and displaying individual thumbnails.

[0019] In this embodiment, the first switching control allows for convenient switching between displaying thumbnails of M images in a combined layout and displaying individual thumbnails. In the individual thumbnail display interface, the thumbnails of the M images are displayed independently. Furthermore, if a user wishes to focus on a particular image, they can click on the thumbnail of that image to preview a larger version of it. This enables users to save and browse images of interest from a combined layout of multiple images.

[0020] In conjunction with the first aspect, in one possible implementation, the first device displays the third interface before displaying the first interface, the third interface including a second switching control, and the first operation being the user clicking the second switching control.

[0021] Optionally, the second switching control and the first switching control can be the same control, which has different functions on different interfaces, or they can be different controls.

[0022] In this embodiment, it is possible to easily switch between displaying thumbnails of M images in a combined layout and displaying individual thumbnails, thereby improving the convenience and efficiency of users browsing images.

[0023] In conjunction with the first aspect, in one possible implementation, before the first device displays the first interface, the first device displays a fourth interface, which is an interface for playing a first video, the first video being a video generated based on multiple images, the multiple images including the M images, and the first operation being an operation performed when the fourth interface is displayed.

[0024] In some embodiments, the plurality of images may also include the aforementioned N images.

[0025] In conjunction with the first aspect, in one possible implementation, the operation performed when the fourth interface is displayed includes a swipe gesture from the edge of the fourth interface inward, or a tap on a third switching control, wherein the fourth interface includes the third switching control.

[0026] In this embodiment, it is possible to easily switch between displaying thumbnails of M images in a combined layout and displaying a video, thereby improving the convenience and efficiency of users browsing images.

[0027] In conjunction with the first aspect, in one possible implementation, the method further includes: in response to a third operation by a user on a thumbnail of a fifth image among the M images in the first combined layout, the first device displays a fifth interface in which a first video is played starting from the position corresponding to the fifth image, the first video being a video generated from multiple images, including the M images.

[0028] In some embodiments, the plurality of images may also include the aforementioned N images.

[0029] In this embodiment, when the display mode of thumbnails of multiple images is switched from video display to combined layout display, the user can restore the interface display to a video display of thumbnails of multiple images by operating on the thumbnail of any image in the combined layout. Furthermore, the displayed video starts playing from the position corresponding to the image clicked by the user, which can improve the convenience and efficiency of the user in browsing images.

[0030] In conjunction with the first aspect, in one possible implementation, the first interface further includes a sharing control, and the method further includes: in response to a user clicking the sharing control, the first device displays a sixth interface, the sixth interface including a thumbnail of an image generated according to the first combined layout, and / or one or more sharing methods selectable by the user, and / or a first settings control for the user to set the image generated according to the first combined layout as the wallpaper of the first device.

[0031] In this embodiment, the electronic device can share an image generated from a combination layout of multiple images with other electronic devices, and can also set the image generated from the combination layout of multiple images as the wallpaper of the electronic device, thus broadening the application scope of the combination layout of images.

[0032] In conjunction with the first aspect, in one possible implementation, the first interface further includes a sharing control, and the method further includes: in response to a user clicking the sharing control, displaying a plurality of selectable combination layouts on the interface of the first device; in response to a user selecting the first combination layout and / or the second combination layout from the plurality of selectable combination layouts, the first device displays a seventh interface, the seventh interface including thumbnails of images generated according to the first combination layout and / or thumbnails of images generated according to the second combination layout, and / or one or more share options selectable by the user, and / or the second settings control, the second settings control being used by the user to set the images generated according to the first combination layout and / or the images generated according to the second combination layout as the wallpaper of the first device.

[0033] In this embodiment, the electronic device can simultaneously share multiple images generated based on the combined layout with other electronic devices based on the user's selection. It can also set multiple images generated based on the combined layout as the theme to set as the wallpaper of the electronic device, thereby improving the user's experience of using the electronic device.

[0034] In conjunction with the first aspect, in one possible implementation, in the first combined layout, the thumbnail of the first image is located at the top, and the thumbnail of the first image presents an upward-breaking display effect. Among the thumbnails of the M images, the thumbnail of the first image occupies the largest display area.

[0035] In some embodiments, the thumbnail of the first image is located at the top, for example, the thumbnail of the first image may be located in the upper left, upper right, or middle of the top of the first combined layout.

[0036] Among the thumbnails of the M images, the thumbnail of the first image occupies the largest display area. This can be understood as follows: because the thumbnail of the first image displays with an extended display effect (i.e., the main subject of the first image exceeds the default display area of ​​the thumbnail), when the default display area of ​​the thumbnail of the first image is the largest, the display area occupied by the thumbnail of the first image will also be the largest.

[0037] In conjunction with the first aspect, in one possible implementation, before the first device displays the first interface, the method further includes: determining M images from the multiple candidate images based on the grid-breaking information of the multiple candidate images, wherein the grid-breaking information is used to indicate whether the candidate image meets the grid-breaking condition; wherein, at least one of the determined M images meets the grid-breaking condition; and determining the first combined layout based on the content of the M images and / or the association relationship between the M images.

[0038] In this embodiment, multiple images can be determined based on the grid-breaking information of multiple candidate images. In other words, the grid-breaking calculation results of the images are taken into account when determining the multiple images to be displayed in the combined layout. This ensures that each generated combined layout contains images that are displayed with grid-breaking, which can further improve the user's image browsing experience.

[0039] In conjunction with the first aspect, in one possible implementation, before the first device displays the first interface, the method further includes: acquiring the M images; determining the images among the M images that meet the exception criteria; and determining the first combined layout based on the content of the M images and the association between the M images.

[0040] In this embodiment of the application, there are no restrictions on the multiple images used to generate the combined layout. The multiple images can be selected by the user from candidate images according to their own preferences, or they can be randomly selected. The electronic device can automatically obtain the grid-breaking information corresponding to the multiple images, and determine the image to be displayed according to the grid-breaking information. Combining the content and / or correlation of the multiple images, the image that can be displayed according to the grid-breaking information will be displayed in the final layout, which can improve the user's image browsing experience.

[0041] In conjunction with the first aspect, in one possible implementation, determining the image among the M images that meets the exception criteria includes: obtaining exception information for each of the M images, wherein the exception information for each image is used to indicate whether each image meets the exception criteria; and determining the image that meets the exception criteria based on the exception information for each image.

[0042] In conjunction with the first aspect, in one possible implementation, the breaking information is also used to indicate the breaking direction of the candidate image.

[0043] In conjunction with the first aspect, in one possible implementation, when the candidate image has more than one direction of grid breaking, the grid breaking information is also used to indicate the priority of the grid breaking direction. In conjunction with the first aspect, in one possible implementation, in the first combined layout, after the thumbnail of the first image displays with a grid breaking effect, the subject in the first image does not obscure the subjects in the other M images.

[0044] In this embodiment, collision detection can be performed on multiple images within a combined layout, ensuring that the main subject in an image that displays a unique display effect within the combined layout does not obscure the main subject in other images within the combined layout, thereby improving the user's image browsing experience.

[0045] In conjunction with the first aspect, in one possible implementation, the first interface further includes a second combined layout, which includes thumbnails of N images. In the second combined layout, the thumbnail of the second image among the N images is displayed with a broken grid effect. When the first combined layout and the second combined layout are arranged adjacent to each other, the subject in the first image does not obscure the subject in the N images; and the subject in the second image does not obscure the subject in the M images.

[0046] In this embodiment of the application, when multiple combined layouts are arranged on the same page, collision detection is performed not only within the combined layouts, but also between adjacent combined layouts. This ensures that the main subject in the image with the broken display effect in the combined layout will not obscure the main subject in other images within the combined layout, nor will it obscure the main subject in images within adjacent combined layouts.

[0047] In conjunction with the first aspect, in one possible implementation, the first combined layout and the second combined layout are arranged adjacent to each other, with the first combined layout located above the second combined layout. The thumbnail of the first image is located at the top of the first combined layout, and the thumbnail of the first image displays an upward-breaking effect. The thumbnail of the second image is located at the top of the second combined layout, and the thumbnail of the second image displays an upward-breaking effect. In this case, the subject in the second image does not obscure the subject in the M images.

[0048] In this embodiment of the application, when the images displayed in the grid pattern are both located at the top of the two adjacent combined layouts and the grid pattern direction is upward, it is only necessary to detect whether the subject in the image displayed in the lower combined layout will obscure the subject in the upper combined layout. It is not necessary to detect whether the subject in the image displayed in the upper combined layout will obscure the subject in the lower combined layout.

[0049] In conjunction with the first aspect, in one possible implementation, an image satisfies the grid-breaking condition when it meets one or more of the following conditions: The image satisfies the upward grid-breaking condition when the subject of the image intersects with the upper edge of its bounding rectangle at only one point; the image satisfies the leftward grid-breaking condition when the subject of the image intersects with the left edge of its bounding rectangle at only one point; the image satisfies the rightward grid-breaking condition when the subject of the image intersects with the right edge of its bounding rectangle at only one point; and the image satisfies the downward grid-breaking condition when the subject of the image intersects with the lower edge of its bounding rectangle at only one point.

[0050] In a second aspect, an electronic device is provided, comprising a memory and a processor, wherein the memory is used to store computer program code, and the processor is used to execute the computer program code stored in the memory to implement the method in the first aspect or any possible implementation thereof.

[0051] Thirdly, a computer-readable storage medium is provided, which stores a computer program or instructions that, when executed, implement the method of the first aspect or any possible implementation thereof.

[0052] Fourthly, a chip is provided, wherein instructions are stored that, when executed on a device, cause the chip to perform the methods described in the first aspect or any possible implementation thereof.

[0053] Fifthly, a computer program product is provided, which stores a computer program or instructions that, when executed, implement the method in the first aspect or any possible implementation of the first aspect. Attached Figure Description

[0054] Figure 1 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application;

[0055] Figure 2 This is a software structure block diagram of the electronic device provided in the embodiments of this application;

[0056] Figure 3 This is a schematic diagram of the interface corresponding to an image display method provided in an embodiment of this application;

[0057] Figure 4 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0058] Figure 5 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0059] Figure 6 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0060] Figure 7 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0061] Figure 8 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0062] Figure 9This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0063] Figure 10 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0064] Figure 11 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0065] Figure 12 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0066] Figure 13 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0067] Figure 14 This is a schematic diagram of the interface corresponding to another image display method provided in the embodiments of this application;

[0068] Figure 15 This is a schematic diagram illustrating the presentation of a micro-cartoon image provided in an embodiment of this application;

[0069] Figure 16 This is a schematic flowchart illustrating a method for displaying images provided in an embodiment of this application;

[0070] Figure 17 This is a schematic flowchart illustrating yet another method for displaying images provided in an embodiment of this application;

[0071] Figure 18 This is a schematic flowchart illustrating yet another method for displaying images provided in an embodiment of this application;

[0072] Figure 19 This is a schematic diagram of the method for determining whether an image can be modified according to the embodiments of this application;

[0073] Figure 20 This is a schematic diagram of a method for determining the priority of the direction of breaking the pattern in an image, as provided in an embodiment of this application.

[0074] Figure 21 This is a schematic diagram illustrating the image layout adjustment rules provided in the embodiments of this application. Detailed Implementation

[0075] The technical solutions of this application will now be described with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of this application, and not all embodiments.

[0076] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; "and / or" in this text is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Furthermore, in the description of the embodiments of this application, "plural" or "multiple" refers to two or more than two.

[0077] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this embodiment, unless otherwise stated, "a plurality of" means two or more.

[0078] The terminology used in the following embodiments is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to also include expressions such as “one or more,” unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, “at least one” and “one or more” refer to one, two, or more than two. The term “and / or” is used to describe the relationship between related objects, indicating that three relationships may exist; for example, A and / or B can indicate: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character “ / ” generally indicates that the preceding and following related objects are in an “or” relationship.

[0079] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "one embodiment," "some embodiments," "another embodiment," "other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0080] The methods provided in this application can be applied to electronic devices such as mobile phones, tablets, wearable devices, in-vehicle devices, augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, and personal digital assistants (PDAs). This application does not impose any restrictions on the specific type of electronic device.

[0081] For example, Figure 1 A schematic diagram of the structure of electronic device 100 is shown. Electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, antenna 1, antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0082] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0083] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0084] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0085] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0086] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0087] USB port 130 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 130 can be used to connect a charger to charge electronic device 100, and can also be used for data transfer between electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0088] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0089] The charging management module 140 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 receives charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0090] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, external memory, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

[0091] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0092] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with tuning switches.

[0093] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0094] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through an audio device (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In some embodiments, the modem processor may be a separate device. In other embodiments, the modem processor may be independent of the processor 110 and may be housed in the same device as the mobile communication module 150 or other functional modules.

[0095] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0096] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. The GNSS may include the Global Positioning System (GPS), the Global Navigation Satellite System (GLONASS), the BeiDou Navigation Satellite System (BDS), the Quasi-Zenith Satellite System (QZSS), and / or satellite-based augmentation systems (SBAS).

[0097] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0098] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a miniature LED, a microLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0099] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0100] The ISP (Image Signal Processor) is used to process data fed back from the camera 193. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, transforming it into an image visible to the naked eye. The ISP can also perform algorithmic optimization of image noise, brightness, and skin tone. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0101] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0102] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0103] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. Thus, electronic device 100 can play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG 2, MPEG 3, MPEG 4, etc.

[0104] An NPU (Neural Processing Unit) is a computational processor for neural networks (NNs). By borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it can rapidly process input information and continuously learn on its own. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0105] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0106] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0107] Electronic device 100 can implement audio functions, such as music playback and recording, through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0108] The audio module 170 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 170 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 170 may be located in the processor 110, or some functional modules of the audio module 170 may be located in the processor 110.

[0109] The speaker 170A, also known as a "loudspeaker," is used to convert audio electrical signals into sound signals. The electronic device 100 can listen to music or make hands-free calls through the speaker 170A.

[0110] The receiver 170B, also known as the "earpiece," is used to convert audio electrical signals into sound signals. When the electronic device 100 answers a telephone call or voice message, the receiver 170B can be brought close to the ear to listen to the voice.

[0111] Microphone 170C, also known as a "microphone" or "voice transducer," is used to convert sound signals into electrical signals. When making a phone call or sending a voice message, the user can speak by bringing their mouth close to microphone 170C, inputting the sound signal into microphone 170C. Electronic device 100 may have at least one microphone 170C. In some embodiments, electronic device 100 may have two microphones 170C, which, in addition to collecting sound signals, can also perform noise reduction. In other embodiments, electronic device 100 may also have three, four, or more microphones 170C, which can collect sound signals, reduce noise, identify the sound source, and perform directional recording, etc.

[0112] The 170D headphone jack is used to connect wired headphones. The 170D headphone jack can be a USB 130 interface or a 3.5mm Open Mobile Terminal Platform (OMTP) standard interface, a CTIA (Cellular Telecommunications Industry Association of the USA) standard interface.

[0113] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. Electronic device 100 can receive button input and generate key signal inputs related to user settings and function control of electronic device 100.

[0114] Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. For example, different vibration feedback effects can correspond to touch operations performed on different applications (such as taking photos, playing audio, etc.). Motor 191 can also correspond to different vibration feedback effects for touch operations performed on different areas of the display screen 194. Different application scenarios (such as time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also be customized.

[0115] Indicator 192 can be an indicator light, used to indicate charging status, power changes, or to indicate messages, missed calls, notifications, etc.

[0116] The SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to make contact with and separate from the electronic device 100. The electronic device 100 can support one or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc. Multiple cards can be inserted into the same SIM card interface 195 simultaneously. The multiple cards can be of the same or different types. The SIM card interface 195 is also compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to realize functions such as calls and data communication. In some embodiments, the electronic device 100 uses an embedded SIM (eSIM) card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

[0117] It should be understood that the phone cards in the embodiments of this application include, but are not limited to, SIM cards, eSIM cards, universal subscriber identity modules (USIM), universal integrated circuit cards (UICC), etc.

[0118] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application embodiment uses the layered architecture Android system as an example to exemplify the software structure of electronic device 100.

[0119] Figure 2This is a software structure block diagram of an electronic device 100 according to an embodiment of this application. The layered architecture divides the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer. The application layer may include a series of application packages.

[0120] like Figure 2 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

[0121] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0122] like Figure 2 As shown, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.

[0123] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0124] Content providers store and retrieve data, making that data accessible to applications. This data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

[0125] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0126] The phone manager is used to provide communication functions for electronic device 100. For example, it manages call status (including connection and disconnection).

[0127] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0128] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0129] The Android Runtime consists of core libraries and a virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.

[0130] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0131] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0132] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0133] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0134] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0135] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0136] A 2D graphics engine is a graphics engine for 2D drawing.

[0137] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0138] It should be understood that the technical solutions in the embodiments of this application can be used in systems such as Android, iOS, and HarmonyOS.

[0139] The technical solutions of this application embodiment can be applied to electronic devices with display functions, for example. Exemplarily, they can be applied to televisions, desktop computers, laptops, in-vehicle screens, and portable electronic devices such as mobile phones, foldable screens, tablets, cameras, camcorders, video recorders, watches, and wristbands. They can also be applied to other electronic devices with display functions, and to electronic devices in 5G networks or future evolved public land mobile networks (PLMNs), etc. The main application scenario can be a combined image display scenario.

[0140] Currently, users use smart devices to record various scenes in their lives, and these devices can store a large number of photos.

[0141] In some embodiments, to enhance the user's photo browsing experience, smart devices can automatically organize stored photos. Specifically, this includes selecting a portion of related photos from multiple stored photos, and then generating a video by adding background music, camera movement, or other techniques to the selected photos. Users can then browse multiple images by watching the video, thereby improving their photo browsing experience.

[0142] However, this method uses a rotating playback approach to present photos, and it does not comprehensively consider multiple factors such as music, transitions, camera movement, and photo content during the photo presentation process. As a result, the emotional transmission is slow and it is difficult to evoke the user's emotions.

[0143] In view of this, embodiments of this application provide a method and electronic device for displaying images. Through this method and electronic device, multiple images in a gallery can be displayed in combination according to the content of the images and the association between the images. Furthermore, one or more images can be displayed in a unique way, providing users with a more story-like image presentation method and giving users an image browsing experience that is "surprising at first glance and tells a story upon closer inspection".

[0144] Furthermore, in this embodiment, the layout of multiple images can be determined and adjusted based on factors such as the image content and image layout of the multiple images displayed in combination. For example, the size of some images and the margins between images can be processed, and the images can be slanted, which can make the image presentation effect more harmonious and further improve the user's image browsing experience.

[0145] The method provided in this application embodiment can be applied to a first device, for example. In some embodiments, after detecting a user's first operation, in response to the user's first operation, the first device displays an interface 1, which includes a combined layout 1 corresponding to M images. The combined layout 1 includes thumbnails of the M images. In the combined layout 1, the thumbnail of image 1 in the M images is displayed with a broken grid effect. The layout method of the combined layout 1 is related to the content of the M images and / or the association between the M images, where M is a positive integer greater than 1.

[0146] The thumbnail of Image 1 displays an aberration effect, which means that the subject of Image 1 extends beyond the default display area of ​​the thumbnail of Image 1.

[0147] The default display area of ​​image 1 refers to the closed area enclosed by the border lines of image 1. Figure 3 Taking image 304 as an example (c) in the diagram, the default display area of ​​image 304 is... Figure 3 (c) shows the rectangular area enclosed by the four border lines of image 304.

[0148] In this combination layout 1, the layout method is related to the content of the M images. For example, multiple events corresponding to the M images can be determined based on their content. The layout method of combination layout 1 is determined based on the development order of these multiple events. For example, if the M images are fishing-related images, including images of baiting, casting, fishing, and reeling in, then the development order of the events is baiting, casting, fishing, and reeling in. In combination layout 1, the images of baiting, casting, fishing, and reeling in are arranged in sequence.

[0149] The layout of Combination Layout 1 is related to the relationship between the M images. For example, the layout of Combination Layout 1 can be determined based on the distance or size of the same object in the M images, or it can be determined based on the time corresponding to the M images.

[0150] Understandably, when determining the layout of M images, the relationships between the images can be related to the content of the images (e.g., the order of events) or unrelated to the content of the images (e.g., when the images were taken).

[0151] In some embodiments, in the combined layout 1, the thumbnail of image 1 is positioned at the top, and the thumbnail of image 1 is displayed in an upward-breaking manner. Among the thumbnails of the M images, the thumbnail of image 1 occupies the largest display area.

[0152] In some embodiments, the thumbnail of image 1 is located at the top, for example, the thumbnail of image 1 may be located in the upper left, upper right, or middle of the top of the combined layout 1.

[0153] Among the thumbnails of M images, the one occupying the largest display area can be interpreted as the default display area of ​​the thumbnail of image 1 being the largest. This can be understood as follows: because the thumbnail of image 1 displays with an extended display effect (i.e., the main subject of image 1 extends beyond the default display area of ​​its thumbnail), when the default display area of ​​the thumbnail of image 1 is the largest, the display area occupied by the thumbnail of image 1 will inevitably also be the largest.

[0154] For example, taking electronic device 300 as the first device, the first operation could be, for example, clicking on the Magic Album on the interface of electronic device 300. Figure 3 This illustration shows a schematic diagram of an interface corresponding to a method for displaying images provided in an embodiment of this application.

[0155] like Figure 3 As shown in (a), the display interface of the electronic device 300 displays a magic album 301; when the user clicks on the magic album 301, the display interface of the electronic device 300 switches to display a micro-cartoon image from the magic album 301.

[0156] In this context, "micro-comic image" refers to a layout composed of multiple images, where one image displays a unique, unconventional effect. In other words, the layout described in this application's embodiments (e.g., layout 1 corresponding to M images) and "micro-comic image" describe the same object; they are simply two different names for the same object.

[0157] In one implementation, when the user clicks on the magic album 301, the display interface of the electronic device 300 first switches to, as shown below... Figure 3 The interface shown in (b) displays a micro-image composed of images 302, 303, and 304; subsequently, the micro-image is displayed on the screen of the electronic device 300 in a manner as follows: Figure 3 The interface shown in (b) dynamically switches to the following: Figure 3 The interface shown in (c) in the image, i.e., image 304, presents a dynamic grid-breaking display effect.

[0158] In another implementation, when the user clicks on the magic album 301, the display interface of the electronic device 300 directly switches to, as shown below. Figure 3 The interface shown in (c) is image 304, which presents a broken display effect.

[0159] Interface 1 could be, for example, Figure 3The interface shown in (c) is shown in the image.

[0160] In some embodiments, in response to a user's swiping operation on the interface 1 of a first device, the first device displays an interface 2, which includes a combined layout 2 corresponding to N images. The combined layout 2 includes thumbnails of the N images, wherein the thumbnails of the images 2 among the N images are displayed with a broken grid effect. The layout of the combined layout 2 is related to the content of the N images and / or the association between the N images, where N is a positive integer greater than 1.

[0161] Among them, the thumbnail of image 2 is displayed with an out-of-grid effect, which means that the subject of image 2 exceeds the default display area of ​​the thumbnail of image 2.

[0162] Interface 2 could be, for example, Figure 4 The interface shown in (c) is shown in the image.

[0163] The user's swiping operation on the interface 1 of the first device can be a swiping operation in a first direction, such as upward, downward, leftward, rightward, etc.

[0164] For example, taking electronic device 400 as the first device, Figure 4 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0165] like Figure 4 As shown in (a), the display interface of the electronic device 400 displays a micro-cartoon image composed of images 401, 402 and 403, wherein image 403 presents a unique display effect.

[0166] Users can switch between different micro-comic images by swiping left and right on the display screen of the electronic device 400.

[0167] In one implementation, when the display interface of the electronic device 400 displays a micro-image composed of images 401, 402, and 403, in response to the user's swipe-left operation on the display screen of the electronic device 400, the display interface of the electronic device 400 first switches to as shown in the image. Figure 4 The interface shown in (b) displays a micro-image composed of images 404, 405, and 406; subsequently, the micro-image is displayed on the screen of the electronic device 400 in a manner as follows: Figure 4 The interface shown in (b) dynamically switches to the following: Figure 4 The interface shown in (c) in the image, i.e., image 406, presents a dynamic grid-breaking display effect.

[0168] In another implementation, when the display interface of the electronic device 400 displays a micro-image composed of images 401, 402, and 403, in response to the user's swipe-left operation on the display screen of the electronic device 400, the display interface of the electronic device 400 directly switches to the image shown below. Figure 4 The interface shown in (c) in the image, i.e., image 406, presents a unique display effect.

[0169] In some embodiments, in response to a user's operation 2 on a thumbnail of image 3 among M images displayed in the combined layout 2 on the interface 2 of the first device, the first device displays image 3.

[0170] In this context, operation 2 can be understood as the user opening image 3, or as the user viewing a larger version of image 3.

[0171] For example, operation 2 could be clicking on the image 3 within the combined layout 2.

[0172] For example, taking electronic device 500 as the first device, Figure 5 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0173] like Figure 5 As shown in (a), the display interface of the electronic device 500 displays a micro-cartoon image composed of image 501, image 502 and image 503, wherein image 503 presents a unique display effect.

[0174] Users can switch the display interface of the electronic device 500 to a large preview interface of any image by clicking on any image in the micro-comic images on the screen of the electronic device 500.

[0175] For example, such as Figure 5 As shown in (b) above, users can access the system through methods such as... Figure 5 Click on image 503 in the micro-cartoon image shown in (a) to preview a larger version of image 503.

[0176] It is understandable that when users are in situations like... Figure 5 When the main subject of image 503 (e.g., the top of the head of the person in image 503) is clicked in the micro-cartoon image shown in (a), the electronic device 500 will display a larger image corresponding to image 503.

[0177] In some embodiments, before the first device displays interface 1, the first device displays interface 3, which is an interface for playing video 1. The video 1 is a video generated based on multiple images, including the M images. The first operation in interface 1 can be an operation performed by the user in interface 3.

[0178] In some embodiments, the plurality of images may further include N images used to generate the combined layout 2.

[0179] In one example, the interface 3 includes a toggle control 1 for switching the interface of the electronic device to a combined layout. The user's action on the interface 3 can be the user clicking the toggle control 1.

[0180] For example, taking electronic device 600 as the first device, Figure 6 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0181] like Figure 6 As shown in (a), in the display interface of the electronic device 600, multiple images are presented in the form of video. These multiple images include image 601, image 602, and image 603. The interface also includes a switching control 604, which is used to switch the presentation mode of the multiple images from comic to video, or to switch the presentation mode of the multiple images from video to comic. The switching control 1 included in the interface 3 can be the switching control 604.

[0182] In one implementation, when the user is in such Figure 6 When the presentation mode of multiple images is switched from video to comic in the interface shown in (a), the display interface of the electronic device 600 changes as follows: Figure 6 The interface shown in (a) switches to the one shown in the image. Figure 6 The interface shown in (b) displays a micro-image composed of images 601, 602, and 603; subsequently, the micro-image is displayed on the screen of the electronic device 600 in a manner as follows: Figure 6 The interface shown in (b) dynamically switches to the following: Figure 6 The interface shown in (c) in the image, i.e., image 603, presents a dynamic, grid-breaking display effect.

[0183] In another implementation, when the user is in such Figure 6 When the presentation mode of multiple images is switched from video to comic in the interface shown in (a), the display interface of the electronic device 600 changes as follows: Figure 6 The interface shown in (a) directly switches to the one shown in the image. Figure 6The interface shown in (c) displays a micro-cartoon image composed of images 601, 602 and 603, with image 603 exhibiting a unique display effect.

[0184] Interface 3 could be, for example, Figure 6 In the interface shown in (a), the switching control 1 can be the switching control 604.

[0185] In yet another example, the action performed by the user on interface 3 could be a swipe inward from the edge of interface 3.

[0186] Interface 3 could be, for example, Figure 7 The interface shown in (a) is shown in the image.

[0187] For example, taking electronic device 700 as the first device, Figure 7 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0188] like Figure 7 As shown in (a), multiple images are presented in the display interface of electronic device 700 in the form of video, including images 701, 702 and 703.

[0189] Users can switch the presentation of multiple images from video to comics by swiping along the edge of the display interface on the electronic device 700.

[0190] In one implementation, when the user is in such Figure 7 When performing a swipe-in ​​operation from the edge to the inside of the interface shown in (a), switching the presentation mode of multiple images from video to comics, the display interface of the electronic device 700 changes as follows: Figure 7 The interface shown in (a) switches to the one shown in the image. Figure 7 The interface shown in (b) displays a micro-cartoon image composed of images 701, 702 and 703, where image 703 presents a unique display effect.

[0191] In some embodiments, the broken display effect presented by image 703 can be presented dynamically. That is, when the user switches the presentation mode of multiple images from video to comic, the user can perceive the process of image 703 dynamically changing from non-broken display to broken display.

[0192] In such Figure 7 Based on the interface shown in (b), the user can trigger the display interface of the electronic device 700 to switch to the one shown in (b) by performing an upward swipe operation on the interface. Figure 7As shown in (c), a switching control 704 is displayed on the interface. The switching control 704 is used to switch the presentation mode of multiple images from comics to videos, or to switch the presentation mode of multiple images from videos to comics; it can also trigger the display of a return control 705 and a share control 706.

[0193] In some embodiments, when the display interface of the electronic device 700 is as follows: Figure 7 When the display interface shown in (c) is not detected by the electronic device 700 for a certain period of time, the display interface of the electronic device 700 can be switched to the one shown in (c). Figure 7 The display interface shown in (b) is shown in the image.

[0194] In some embodiments, in response to a user's operation 3 on image 4 among M images in the combined layout 1 displayed on interface 1, the first device displays interface 4, in which video 1 is played starting from the position corresponding to image 4. The video 1 is a video generated based on multiple images, including the M images.

[0195] Operation 3 could be, for example, clicking on the image 4 within the combined layout 2.

[0196] Understandable, Figure 5 The illustrated embodiments and Figure 7 The embodiments shown can be implemented individually or in combination. When these two embodiments are implemented individually, operations 2 and 3 can be the same, for example, both can be click operations or both can be long-press to pop up a menu and select the corresponding option from the menu. Operations 2 and 3 can also be different. When these two embodiments are implemented in combination, operations 2 and 3 are different. For example, operation 2 is a click operation, and operation 3 is a long-press to pop up a menu and select the "Play video from here" option from the menu.

[0197] For example, in such Figure 7 Based on the interface shown in (b), for example, a user can click on image 701 to restore the display interface of the electronic device 700 to an interface where multiple images are presented as a video, including images 701, 702, and 703, and in this interface, the video starts playing from the position corresponding to image 701; similarly, a user can click on image 702 to restore the display interface of the electronic device 700 to an interface where multiple images are presented as a video, and in this interface, the video starts playing from the position corresponding to image 702; a user can click on image 703 to restore the display interface of the electronic device 700 to an interface where multiple images are presented as a video, and in this interface, the video starts playing from the position corresponding to image 703.

[0198] In some embodiments, the interface 1 of the first device further includes a switching control 2. In response to a user clicking the switching control 2, the first device displays an interface 5, which includes thumbnails of M independently displayed images. In response to a user's operation on the thumbnail of image 5 among the M images in the interface 5, the first device displays image 5.

[0199] For example, taking electronic device 800 as the first device, Figure 8 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0200] like Figure 8 As shown in (a), in the display interface of the electronic device 800, multiple images are presented as one or more micro-cartoon images. For example, the currently displayed micro-cartoon image is composed of images 801, 802 and 803. The interface also includes a switching control 804, which is used to switch the presentation mode of the multiple images from comics to photos, or to switch the presentation mode of the multiple images from photos to comics.

[0201] Users can switch the presentation of multiple images from comics to photos by clicking "Photos" in the toggle control 804.

[0202] In one implementation, when a user switches the presentation of multiple images from video / comic to photos by clicking "Photos" in the switching control 804, the display interface of the electronic device 800 changes as follows: Figure 8 The interface shown in (a) switches to the one shown in the image. Figure 8 The interface shown in (b) displays multiple images in a photographic manner, including images 801, 802, and 803, and may also include images 805 and 806.

[0203] Users can click on things like Figure 8 The display interface of the electronic device 800 is switched to a large-scale preview interface of any image displayed in the interface shown in (b).

[0204] This can be understood as follows: the multiple images that make up a micro-comic image are thumbnails. After clicking on any thumbnail in the micro-comic image, the image displayed in the large image preview interface is the image with a higher pixel count than that thumbnail.

[0205] For example, in such Figure 8 Based on the interface shown in (b), the user can click on image 803 on this interface to trigger the display interface of the electronic device 800 to switch to the one shown in (b). Figure 8As shown in (c), the interface displays a large preview image of image 803. The interface can also display thumbnails of other images among multiple images. The interface can also include one or more functional controls for image 803, such as a "share" control, a "favorite" control, an "edit" control, a "delete" control, and a "more" control.

[0206] In some embodiments, for example, it can be such as Figure 8 Click the switching control 804 again in the interface shown in (b) to switch the display interface of the electronic device 800 to the one shown in (b). Figure 8 The micro-layout interface shown in (a) is shown in the image.

[0207] In another implementation, when the user clicks the "Photos" button in the switching control 804 to switch the presentation of multiple images from video / comic to photos, the display interface of the electronic device 800 changes as follows: Figure 8 The interface shown in (a) switches to the one shown in the image. Figure 8 The interface shown in (d) displays multiple images in a photographic manner. These images include images 801, 802, and 803, and may also include images 805 and 806. The images are displayed in a uniformly tiled manner.

[0208] Interface 5 could be, for example, Figure 8 The interface shown in (b) is, for example, interface 5. Figure 8 The interface shown in (d) is shown in the figure.

[0209] In some embodiments, the interface 1 of the first device may further include a sharing control. In response to a user clicking the sharing control, the first device may display an interface 6, which includes a thumbnail of an image generated according to the combined layout 1, and / or the interface 6 includes one or more sharing methods available to the user, and / or the interface 6 includes a settings control 1 for the user to set the image generated according to the combined layout 1 as the wallpaper of the first device.

[0210] For example, taking electronic device 900 as the first device, Figure 9 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0211] like Figure 9As shown in (a), the display interface of the electronic device 900 displays a micro-comic image composed of images 901, 902 and 903. The interface may also include a switching control 904, which is used to switch the presentation mode of the image from comic to video, or to switch the presentation mode of the image from video to comic. The interface may also include a return control and a share control 906.

[0212] Users can switch the display interface of electronic device 900 to, for example, by clicking the sharing control 906. Figure 9 The interface shown in (b) displays thumbnails of images generated from the micro-cartoon image composed of images 901, 902, and 903, and also displays multiple sharing icons, such as "Bluetooth", "Connect", and "email". For example, users can click the "Connect" icon to share the image generated from the micro-cartoon image composed of images 901, 902, and 903 to other electronic devices through the Connect application.

[0213] In some embodiments, such as Figure 9 In the interface shown in (b), users can also share images generated from the micro-manga image composed of images 901, 902 and 903 to other electronic devices through the "Huawei Share" function.

[0214] In some embodiments, such as Figure 9 In the interface shown in (b), a control 905 can also be displayed, which is used by the user to set the image generated from the micro-manifest image composed of images 901, 902 and 903 as the wallpaper of the electronic device 900.

[0215] Interface 6 could be, for example, Figure 9 The interface shown in (b) is shown in the image.

[0216] For example, Figure 9 (c) shows a schematic diagram of an image generated based on a combined layout for sharing, provided by an embodiment of this application.

[0217] like Figure 9 As shown in (c), when sharing a combined layout of multiple images, the shared image is an image generated based on the combined layout of the multiple images. The image generated based on the combined layout of the multiple images may include a watermark, which may be a description of the image generated based on the combined layout of the multiple images, an icon, or a signature, etc. The watermark may be displayed in the blank space extending from the edge of the image or on the image content.

[0218] In one example, the combined layout of images 9061, 9062, and 9063 is a vertically aligned layout, with image 9063 displaying a broken grid effect. The image generated based on this combined layout is as follows: Figure 9 For example, in image 906 shown in (c), since the image content is related to rural areas, the displayed watermark could be "Homecoming Trip"; similarly, if the shared image content is related to tourism and the image was taken in Qinghai, the displayed watermark could be "Qinghai Trip".

[0219] For example, Figure 9 (d) in the figure shows a schematic diagram of another image generated from a combined layout for sharing, provided by an embodiment of this application.

[0220] When the main subject of an image that exhibits a broken-out display effect in a combined layout breaks out of the layout, the shared image includes the broken-out main subject. The background of the broken-out main subject can be a transparent background or a solid color background.

[0221] like Figure 9 As shown in (d), in the combined layout corresponding to images 9061, 9062, and 9063, image 9071 is located in the first row of the combined layout, while images 9072 and 9073 are located on the left and right sides of the second row. Image 9071 is displayed with a broken grid effect. The image generated based on this combined layout is as follows: Figure 9 The image 907 shown in (d) includes the main part of the image 7071 that extends beyond the default display area of ​​the image 7071, that is, the main part displayed in the area 908. The background of the main part can be a transparent background or a solid color background, that is, the background of the area 908 can be a transparent background or a solid color background.

[0222] For example, taking electronic device 1000 as the first device, Figure 10 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0223] like Figure 10 (a) and Figure 10 As shown in (b), after setting the micro-cartoon image composed of images 1001, 1002 and 1003 as the lock screen wallpaper of electronic device 1000, when the screen of electronic device 1000 is turned on while the screen is off, the lock screen interface is displayed on the screen of electronic device 1000. The lock screen interface includes the micro-cartoon image composed of images 1001, 1002 and 1003, wherein image 1003 presents a broken display effect.

[0224] In some embodiments, when the display screen of the electronic device 1000 is in a screen-off state, after the screen of the electronic device 1000 is turned on, a lock screen interface is displayed on the display screen of the electronic device 1000. The lock screen interface includes a micro-cartoon image composed of image 1001, image 1002 and image 1003, wherein the display effect of image 1003 dynamically switches from non-grid display to grid display.

[0225] For example, taking electronic device 1100 as the first device, Figure 11 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0226] like Figure 11 As shown in (a), users can share a magic album containing one or more micro-comic images with other electronic devices or set it as the wallpaper of electronic device 1100.

[0227] For example, users can use, as Figure 11 The interface shown in (a) will include a magic album of one or more micro-comic images as the theme for the wallpaper of electronic device 1100.

[0228] In such Figure 11 In the example shown, the Magic Album includes a mini-cartoon image composed of images 1101, 1102, and 1103, where image 1103 is displayed with a broken grid effect. The Magic Album also includes a mini-cartoon image composed of images 1104, 1105, and 1106, where image 1106 is displayed with a broken grid effect.

[0229] like Figure 11 (b) Figure 11 (c) Figure 11 (d) and Figure 11 As shown in (e), when the display screen of electronic device 1100 is in a screen-off state, after turning on the screen of electronic device 1100, a lock screen interface is displayed on the display screen of electronic device 1100. The lock screen interface includes a micro-cartoon image composed of images 1101, 1102 and 1103, wherein image 1103 presents a broken grid display effect. In this case, after switching the state of the display screen of electronic device 1100 to a screen-off state, after turning on the screen of electronic device 1100 again, the lock screen interface is displayed on the display screen of electronic device 1100. The lock screen interface includes a micro-cartoon image composed of images 1104, 1105 and 1106, wherein image 1106 presents a broken grid display effect.

[0230] In some embodiments, when the display screen of the electronic device 1100 is in a screen-off state, after the screen of the electronic device 1100 is turned on, a lock screen interface is displayed on the display screen of the electronic device 1100. The lock screen interface includes a micro-cartoon image composed of images 1101, 1102, and 1103, wherein the display effect of image 1103 dynamically switches from non-grid display to grid display. In this case, after the state of the display screen of the electronic device 1100 is switched to a screen-off state, and the screen of the electronic device 1100 is turned on again, the lock screen interface is displayed on the display screen of the electronic device 1100. The lock screen interface includes a micro-cartoon image composed of images 1104, 1105, and 1106, wherein the display effect of image 1106 dynamically switches from non-grid display to grid display.

[0231] In some embodiments, the interface 1 of the first device may include multiple combined layouts, which may be arranged vertically, i.e., two adjacent combined layouts are arranged vertically. For example, the multiple combined layouts may be presented in a waterfall layout.

[0232] In one implementation, multiple combined layouts are arranged sequentially, one end to the other, top to bottom, on the same page. Due to the limited display area of ​​the screen, only a portion of the multiple combined layouts can be displayed on the current screen. For example, the current screen can display all of combined layout 1 and the upper half of combined layout 2. The user can perform an upward swipe operation on the screen to display all of combined layout 2, as well as the lower half of combined layout 1 and the upper half of combined layout 3. For example, when the display area is sufficient, the current display screen can also display all of two or more combined layouts at the same time.

[0233] In some embodiments, the multiple combined layouts in interface 1 can also be arranged in other ways, such as left and right adjacent arrangement, staggered adjacent arrangement, etc.

[0234] For example, taking electronic device 1200 as the first device, Figure 12 This illustration shows a schematic diagram of an interface corresponding to another image display method provided in an embodiment of this application.

[0235] like Figure 12 As shown in (a), multiple images are presented in the display interface of electronic device 1200 in the form of video, including images 1201, 1202, 1203, 1204, 1205 and 1206.

[0236] Users can switch the presentation of multiple images from video to comics by swiping along the edge of the display interface of the electronic device 1200.

[0237] In one implementation, when the user is in such Figure 12 When performing a swipe-in ​​operation from the edge to the inside of the interface shown in (a), switching the presentation mode of multiple images from video to comics, the display interface of the electronic device 1200 changes as follows: Figure 12 The interface shown in (a) switches to the one shown in the image. Figure 12 The interface shown in (b) is where multiple mini-cartoon images corresponding to multiple pictures are arranged sequentially, one after the other, top to bottom. The current interface can display the entire mini-cartoon image composed of pictures 1201, 1202, and 1203, with picture 1203 displaying an unusual effect; it also displays a portion of the mini-cartoon image composed of pictures 1204, 1205, and 1206.

[0238] like Figure 12 As shown in (c), when the user is in such Figure 12 When the user performs an upward swipe operation on the interface shown in (b), the display interface of the electronic device 1200 displays a portion of the micro-cartoon image composed of images 1201, 1202 and 1203; it also displays the entire micro-cartoon image composed of images 1204, 1205 and 1206, wherein image 1206 presents a unique display effect.

[0239] In some embodiments, the broken-grid display effect presented by image 1203 can be dynamically presented, that is, when the user switches the presentation mode of multiple images from video to comic, the user can perceive the process of image 1203 dynamically changing from non-broken-grid display to broken-grid display; and, when the user passes through, as in Figure 12 In the interface shown in (b), an upward swipe operation is performed so that when image 1206 is displayed on the screen, the user can perceive the process of image 1206 dynamically changing from non-grid display to grid display.

[0240] In some embodiments, in response to a user clicking a share control in interface 1 of a first device, multiple selectable combination layouts may be displayed on the interface of the first device; in response to a user selecting multiple target combination layouts from the multiple selectable combination layouts, the first device may display interface 7, which may include thumbnails of images generated based on the multiple target combination layouts, and / or interface 7 may include one or more share options available to the user, and / or interface 7 may include a settings control 2 for the user to set the images generated based on the multiple target combination layouts as the wallpaper of the first device.

[0241] Among them, multiple selectable combination layouts can be all combination layouts in the combination layout list, or a selection of combination layouts in the combination layout list.

[0242] In some embodiments, after a user clicks the share control, one or more combined layouts can be selected by default. For example, the combined layout closest to the center of the display screen in interface 1 can be selected by default, the combined layout that is fully displayed in interface 1 can be selected by default, or the first combined layout among multiple combined layouts can be selected by default. Alternatively, no default selection can be made. In addition, the user can actively select or deselect one or more combined layouts.

[0243] For example, taking electronic device 1300 as the first device, Figure 13 The present application provides another method for displaying images, and the corresponding interface diagram is shown below.

[0244] like Figure 13 As shown in (a), in the display interface of the electronic device 1300, multiple micro-cartoon images are arranged sequentially, one after the other, top to bottom. These multiple micro-cartoon images include a micro-cartoon image composed of images 1301, 1302, and 1303, wherein image 1303 presents a unique display effect. The micro-cartoon image also includes a micro-cartoon image composed of images 1304, 1305, and 1306, wherein image 1306 presents a unique display effect.

[0245] Among them, due to the limitation of the display area of ​​the screen of electronic device 1300, in such cases... Figure 13 In the interface shown in (a), only a portion of the micro-cartoon image can be displayed. For example, the entire micro-cartoon image consisting of images 1301, 1302, and 1303 and a portion of the micro-cartoon image consisting of images 1304, 1305, and 1306 can be displayed.

[0246] In such Figure 13 The interface shown in (a) may also include a return control 1307 and a share control 1308.

[0247] Users can switch the display interface of electronic device 1300 to, for example, by clicking the sharing control 1308. Figure 13 The interface shown in (b) has a selection box 1309 for users to select a sharing method, which may include "share as a long image", "share as a cover", or "share as a micro-comic".

[0248] For example, users can switch the display interface of the electronic device 1300 to something like this by selecting "Share as Micro-Manga" as the sharing method. Figure 13The display interface shown in (c) displays thumbnails corresponding to the micro-comic images composed of images 1301, 1302 and 1303, and thumbnails corresponding to the micro-comic images composed of images 1304, 1305 and 1306. Each thumbnail corresponding to a micro-comic image is associated with a selection control, which is used by the user to select the micro-comic image that they wish to share.

[0249] The interface can also display multiple sharing icons, such as the "Bluetooth" icon, the "Connect" icon, and the "Email" icon. For example, users can click the "Connect" icon to share the micro-comic images they selected to other electronic devices through the Connect application.

[0250] In some embodiments, such as Figure 13 In the interface shown in (c), users can also share the selected comic images to other electronic devices through the "Huawei Share" function.

[0251] In some embodiments, such as Figure 13 In the interface shown in (c), control 1310 can also be displayed. Control 1310 is used by the user to set the micro-comic image selected by the user as the wallpaper of the electronic device 1300.

[0252] In some embodiments, such as Figure 13 The interface shown in (c) can also display a "One-Click Video Generation" control, which is used by the user to generate a video based on the micro-comic images selected by the user.

[0253] Interface 7 could be, for example, Figure 13 The interface shown in (c) is shown in the image.

[0254] For example, taking electronic device 1400 as the first device, Figure 14 The present application provides another method for displaying images, and the corresponding interface diagram is shown below.

[0255] like Figure 14 As shown in (a), in the display interface of the electronic device 1400, multiple micro-cartoon images are arranged sequentially, one after the other, top to bottom. These multiple micro-cartoon images include a micro-cartoon image composed of images 1401, 1402, and 1403, wherein image 1403 presents a unique display effect. The micro-cartoon image also includes a micro-cartoon image composed of images 1404, 1405, and 1406, wherein image 1406 presents a unique display effect.

[0256] Among them, due to the limitation of the display area of ​​the screen of electronic device 1400, in such cases... Figure 14In the interface shown in (a), only a portion of the micro-cartoon image can be displayed. For example, the entire micro-cartoon image consisting of images 1401, 1402, and 1403 and a portion of the micro-cartoon image consisting of images 1404, 1405, and 1406 can be displayed.

[0257] In such Figure 14 The interface shown in (a) may also include a return control 1407 and a share control 1408.

[0258] Users can switch the display interface of electronic device 1400 to, for example, by clicking the sharing control 1408. Figure 14 The interface shown in (b) has a selection box 1409 for users to select a sharing method, which may include "share as a long image", "share as a cover", or "share as a micro-comic".

[0259] For example, users can switch the display interface of the electronic device 1400 to something like this by selecting "Share as Micro-Manga" as the sharing method. Figure 14 The display interface shown in (c) has a selection control associated with each micro-comic image, allowing users to select which micro-comic images they want to share by checking the boxes in the selection control.

[0260] For example, when a user is in such Figure 14 In the display interface shown in (c), after selecting the micro-cartoon image composed of images 1401, 1402, and 1403 and the micro-cartoon image composed of images 1404, 1405, and 1406, and clicking the "Confirm" control in the interface, the display interface of the electronic device 1400 switches to the one shown in (c). Figure 14 The interface shown in (d) displays thumbnails of images generated from the micro-cartoon image composed of images 1401, 1402, and 1403, and thumbnails of images generated from the micro-cartoon image composed of images 1404, 1405, and 1406. Each thumbnail of an image generated from a micro-cartoon image is associated with a selection control, which allows users to adjust which image they wish to share.

[0261] like Figure 14 The interface shown in (d) can also display multiple sharing icons, such as the "Bluetooth" icon, the "Connect" icon, and the "Email" icon. For example, users can click the "Connect" icon to share the image generated from the micro-comic image selected by the user to other electronic devices through the Connect application.

[0262] In some embodiments, such as Figure 14 In the interface shown in (d), users can also share the images generated from the micro-comic images selected by the user to other electronic devices through the "Huawei Share" function.

[0263] In some embodiments, such as Figure 14 In the interface shown in (d), a "One-Click Video Generation" control 1410 can also be displayed. This "One-Click Video Generation" control 1410 is used by the user to generate a video based on the image generated from the micro-comic image selected by the user.

[0264] In some embodiments, such as Figure 14 In the interface shown in (d), control 1411 can also be displayed. Control 1411 is used by the user to set the image generated from the micro-manga image selected by the user as the wallpaper of the electronic device 1400.

[0265] In some embodiments, when multiple micro-comic images are displayed vertically, the micro-comic images can be presented in a multi-grid format, and the direction of the grid breaking effect in the micro-comic images can include one or more.

[0266] For example, Figure 15 This illustration shows another type of micro-cartoon image presentation provided in an embodiment of this application.

[0267] like Figure 15 As shown, on the display interface of the electronic device 1500, multiple miniature cartoon images are arranged sequentially, one after the other, top to bottom. These multiple miniature cartoon images may include, for example, images 1501, 1502, 1503, 1504, 1505, 1506, 1507, and 1508. In this miniature cartoon image, images 1501, 1502, 1503, 1504, 1505, 1506, 1507, and 1508 are presented in an eight-grid format, with image 1505 displayed out of the grid. The grid direction is upward breaking the grid; the multiple micro-comic images may also include a micro-comic image composed of images 1511, 1512, 1513, 1514, 1515, 1516, 1517, 1518, and 1519. In this micro-comic image, images 1511, 1512, 1513, 1514, 1515, 1516, 1517, 1518, and 1519 are presented in a nine-square grid, and image 1514 is displayed breaking the grid, with the breaking direction being breaking the grid to the right and breaking the grid downward.

[0268] In some embodiments, for example, it can be achieved through Figure 12 The method described in the illustrated embodiment switches the display interface of the electronic device to, as shown in, Figure 15 The interface shown.

[0269] In some embodiments, such as Figure 15 The interface shown may also include a return control 1530 and a share control 1540. For example, the current interface can be exited by using the return control 1530, and one or more micro-comic images displayed on the interface can be shared by using the share control 1540. The method for sharing one or more micro-comic images displayed on the interface using the share control 1540 can be found in [reference needed]. Figure 13 or Figure 14 The real

[0270] For example, Figure 16 This illustration shows a schematic flowchart of a method 1600 for displaying images according to an embodiment of this application. The method is applied to a first device, such as... Figure 16 As shown, the method 1600 includes:

[0271] S1601: In response to detecting a first user operation, the first device displays a first interface, which includes a first combined layout corresponding to M images. The first combined layout includes thumbnails of the M images. In the first combined layout, the thumbnail of the first image among the M images is displayed with a broken grid effect. The layout method of the first combined layout is related to the content of the M images and the association between the M images. M is a positive integer greater than 1. The broken grid effect of the thumbnail of the first image includes the effect that the main body of the first image exceeds the default display area of ​​the thumbnail of the first image.

[0272] The explanation regarding "the layout method of the first combination layout is related to the content of the M images and the relationship between the M images" will be provided later. Figure 17 The description in S1701 of the illustrated embodiment.

[0273] In some embodiments, when the first device displays the first interface, the thumbnail of the first image dynamically changes from a non-grid-breaking display effect to a grid-breaking display effect.

[0274] For example, Figure 17 A schematic flowchart of another image display method 1700 provided in an embodiment of this application is shown, such as... Figure 17 As shown, the method 1700 includes:

[0275] S1701: Based on the content of each of the M images and / or the relationships between the M images, determine one or more layout methods corresponding to the M images, where M is a positive integer greater than 1.

[0276] This involves grouping several images with the same relationship among M images together. Based on these relationships, the grid type in the layout can be determined according to the image content. This grid type can include, for example, long horizontal grids, long vertical grids, small horizontal grids, small vertical grids, diagonal horizontal grids, and diagonal vertical grids. Following this principle, one or more layout options corresponding to the M images can be determined from a variety of candidate layouts.

[0277] by Figure 15 For example, the grid type of image 1505 is a horizontal long grid, the grid type of images 1501, 1502 and 1503 is a horizontal small grid, and the grid type of images 1515, 1516 and 1519 is a vertical small grid.

[0278] In the following Figure 21 For example, the grid type of the image labeled 1 is a vertical long grid, and the grid type of the image labeled 2 is a horizontal diagonal grid.

[0279] In one example, M images are 5 images: image 1, image 2, image 3, image 4, and image 5. Image 1 and image 2 have a relationship 1, and image 3 and image 4 have a relationship 2. Therefore, when determining the layout of these 5 images, image 1 and image 2 are placed together, image 3 and image 4 are placed together, and image 5 is placed separately. Furthermore, based on the content of the images, the grid type for image 1, image 2, image 3, image 4, and image 5 in the layout is determined. For example, if image 1 and image 2 are similar scene images, the grid type in the layout could be two small horizontal grids; if image 3 and image 4 are a series of photos, the grid type in the layout could also be two small horizontal grids; and if image 5 is a distant view, the grid type in the layout could be a long horizontal grid.

[0280] In some embodiments, when the image content is a distant view, a horizontal group photo, a close-up of a face, a partial close-up, or a subject in a horizontal pose, the grid type presented in the layout of the image can be a horizontal long grid.

[0281] For example, Figure 3 Image 303 shown is a distant view, and its grid type is a horizontal long grid; image 302 is a close-up of a face, and its grid type is also a horizontal long grid.

[0282] In some embodiments, when the image content is a standing full-body, half-body, facial close-up, or distant view, the grid type presented in the layout can be a vertical long grid.

[0283] For example, Figure 3The content of the image 304 shown includes a distant view and a half-body shot. The grid type of the image 303 can be either a horizontal long grid or a vertical long grid.

[0284] In some embodiments, when a group of images in the M images are consecutive images taken at the same time and place, images of similar scenes, or images of the same series, then the grid type presented in the layout of this group of images can be horizontal multiple small grids or vertical multiple small grids.

[0285] In some embodiments, when a group of images in the M images is a dynamic image, a moving image, an impactful image, or an image with an exaggerated expression, the grid type presented in the layout of this group of images can be a horizontal diagonal grid or a vertical diagonal grid.

[0286] In some embodiments, the M images are M images selected by the user from the electronic device's image library; the M images may also be M images selected by the electronic device from the electronic device's image library based on the user's usage habits; or the M images may be M images randomly selected by the electronic device from the electronic device's image library.

[0287] S1702: Based on the rule for breaking the rules for images, determine one or more images from the M images that meet the conditions for breaking the rules.

[0288] Specifically, a special calculation is performed on each of the M images to determine one or more images that meet the special criteria.

[0289] The process of performing grid-breaking calculations on images will be described in detail in subsequent embodiments.

[0290] In some embodiments, each of the M images obtained in S1701 is associated with a grid-breaking information. This grid-breaking information is used to indicate whether the associated image can be broken, and can also be used to indicate the direction of the grid-breaking of the associated image, and the priority of the direction of the grid-breaking of the associated image. In this case, S1702 does not need to be executed.

[0291] S1703: In the i-th layout method among one or more layout methods corresponding to the M images, perform collision detection on one or more images among the M images that have the condition of breaking the grid. The initial value of i is 1, and i is a positive integer greater than or equal to 1.

[0292] Specifically, after laying out M images according to the i-th layout method, collision detection is performed on one or more images that meet the conditions for breaking the pattern.

[0293] It can be understood that collision detection is performed on an image to determine whether displaying an image in a broken grid will obscure the main subject of other images in the direction of the broken grid. If it will obscure the main subject of other images in the direction of the broken grid, the collision detection will fail.

[0294] S1704: If at least one of the M images that meet the collision breaking condition passes the collision detection, execute S1705; if no image passes the collision detection, let i = i + 1 and return to S1703. When multiple images are in other layout modes, perform collision detection on the images that meet the collision breaking condition.

[0295] S1705: Under the i-th layout method, the images that pass the collision detection and meet the grid-breaking conditions are subjected to grid-breaking processing to obtain the micro-comic images corresponding to M images.

[0296] In some embodiments, in the same layout, the M images include more than one image that meets the grid-breaking condition and passes collision detection. In this case, the electronic device can determine one image from the more than one image for grid-breaking processing according to the grid-breaking priority of the image; or, the electronic device can output more than one micro-comic image by performing grid-breaking processing on the more than one image separately.

[0297] In some embodiments, after S1705 is executed, it can be determined whether i is greater than or equal to the number of layout methods determined in S1701. If not, i can be set to i+1, and the process can be returned to S1703. When M images are located in other layout methods, collision detection is performed on the images that have the condition of breaking the grid.

[0298] In this way, electronic devices can output multiple micro-comic images with different layouts for users to view or selectively save.

[0299] In other words, in one implementation, an electronic device can output multiple micro-cartoon images. Any two of these micro-cartoon images may have different layouts, different images displayed in a broken grid, or both different layouts and images displayed in a broken grid.

[0300] In some embodiments, in a micro-cartoon image composed of M images, there may be only one image that is displayed in a broken grid pattern, and the area of ​​the image that is displayed in a broken grid pattern is larger than the area of ​​the other images in the M images.

[0301] In some embodiments, when multiple combined layouts are arranged on the same page, collision detection between the multiple combined layouts can be performed.

[0302] In one implementation, multiple combined layouts can be arranged on the same page first, and then collision detection can be performed between adjacent combined layouts. For example, when an image with a broken grid display effect is located in the first row of a combined layout and breaks the grid upwards, collision detection needs to be performed between this combined layout and the combined layout above it. If the subject of the image with the broken grid display upwards obscures the subject of the combined layout above it, the arrangement position of this combined layout needs to be adjusted.

[0303] In one implementation, collision detection can be performed between multiple combined layouts before arranging them on the same page. Based on the collision detection results, the multiple combined layouts are arranged on the same page, so that the main subject displayed in each of the multiple combined layouts arranged on the same page does not obscure the main subject in other combined layouts.

[0304] In some embodiments, multiple combined layouts can be arranged on the same page. For example, multiple combined layouts can be arranged sequentially end-to-end on the same page. However, due to limitations in the display area of ​​the screen, only a portion of the multiple combined layouts can be displayed on the current screen. Figure 12 Taking the interface shown in (b) as an example, the combined layout 1 consisting of images 1201, 1202 and 1203 and the combined layout 2 consisting of images 1204, 1205 and 1206 are arranged vertically on the same page. The interface of device 1200 displays all of combined layout 1 and part of combined layout 2. It should be understood that when the display area is sufficient, the current display interface can also display all of two or more combined layouts at the same time.

[0305] At this point, it is possible that a subject in a combined layout that presents a disruptive display effect may obscure the subject in an image in an adjacent combined layout.

[0306] In one implementation, the arrangement order of multiple combined layouts is fixed. Taking combined layout 1 as an example, image 1 in combined layout 1 is displayed with a broken grid effect, and the broken grid direction is direction 1. If the image adjacent to image 1 in direction 1 is an image in combined layout 1, then only collision detection within combined layout 1 needs to be performed. If the image adjacent to image 1 in direction 1 is an image in combined layout 2, then collision detection between combined layout 1 and combined layout 2 needs to be performed. For example, the position of image 1 in combined layout 1 can be adjusted (e.g., adjusting image 1 displayed in the upper right corner to be displayed in the upper left corner) so that the main body of the broken grid display in image 1 does not obscure the main body in other images in combined layout 1, nor does it obscure the main body in the adjacent image in combined layout 2.

[0307] In some embodiments, if adjusting the layout position of image 1 within the combined layout 1 fails to achieve the desired effect of neither obscuring the main subject in other images within the combined layout 1 nor obscuring the main subject in the adjacent combined layout 2, then image 1 in the combined layout 1 may not exhibit a broken display effect.

[0308] In some embodiments, when multiple combined layouts can be arranged on the same page, two or three adjacent combined layouts can be regarded as a large layout, and collision detection is performed within the large layout to ensure that the broken display of the image in the combined layout does not obscure the subject in other images in the combined layout, nor does it obscure the subject in images in other adjacent combined layouts.

[0309] For example, Figure 18 A schematic flowchart of another image display method 1800 provided in an embodiment of this application is shown, such as... Figure 18 As shown, the method 1800 includes:

[0310] S1801: Determine M images, where the first image among the M images meets the exception condition.

[0311] In some embodiments, a special calculation can be performed on multiple candidate images to determine whether each image in the multiple candidate images can be special; then, one image that meets the special condition (i.e., the first image) and several images that do not meet the special condition are determined as the M images, and the M images are used to generate micro-comic images.

[0312] Among them, multiple candidate images can be images from the electronic device's gallery, images selected by the user from the electronic device's gallery, or images selected by the electronic device from the electronic device's gallery based on the user's usage habits, etc.

[0313] The process of performing grid-breaking calculations on images will be described in detail in subsequent embodiments, and will not be explained in detail here.

[0314] S1802: Based on the content of each of the M images and / or the relationships between the M images, determine one or more layout methods corresponding to the M images.

[0315] Among them, the explanation of this step and Figure 17 The explanation of S1701 in the illustrated embodiment is the same, and for the sake of brevity, it will not be repeated here.

[0316] S1803: In the i-th layout method among one or more layout methods corresponding to the M images, perform collision detection on the first image. The initial value of i is 1, and i is a positive integer greater than or equal to 1.

[0317] Specifically, after laying out the M images according to the i-th layout method, collision detection is performed on the first image among them.

[0318] It can be understood that collision detection is performed on an image to determine whether displaying an image in a broken grid will obscure the main subject of other images in the direction of the broken grid. If it will obscure the main subject of other images in the direction of the broken grid, the collision detection will fail.

[0319] S1804: If the first image passes the collision detection, execute S1805; if the first image fails the collision detection, let i = i + 1 and return to S1803. When M images are in other layout modes, perform collision detection on the first image among them.

[0320] S1805: Under the i-th layout method, the first image is broken to obtain the micro-comic images corresponding to M images.

[0321] In some embodiments, after S1805 is executed, it can be determined whether i is greater than or equal to the number of layout methods determined in S1802. If not, i can be set to i+1, and the process can be returned to S1803. When M images are located in other layout methods, collision detection is performed on the first image among them.

[0322] In this way, electronic devices can output multiple micro-comic images with different layouts for users to view or selectively save.

[0323] In some embodiments, for multiple comic strip images with different layouts, the electronic device can perform proportional calculations and variance calculations on the dimensions of the M images in each comic strip image to select the comic strip image with the optimal layout from the multiple comic strip images with different layouts, and finally present the comic strip image with the optimal layout to the user.

[0324] In some embodiments, all images in the image library can be subjected to grid-breaking calculations. Based on the grid-breaking calculation results, M images are determined. The rule for determining the M images is that at least one image among the M images meets the grid-breaking condition, while the other images do not. Furthermore, in the process of determining the M images, the layout method of the M images can also be determined as a first layout method. In this way, after the electronic device determines the M images, it directly lays out the M images according to the first layout method, and performs grid-breaking processing on the images among the M images that meet the grid-breaking condition. It can also adjust the layout of multiple images under the first layout method, such as adjusting the image size, image spacing, and performing diagonal processing on the images, and finally generate a micro-comic image composed of M images.

[0325] In some embodiments, in a micro-cartoon image composed of M images, there may be only one first image that is displayed in a unique way, and the area of ​​the first image is larger than the area of ​​the other images in the M images.

[0326] The following, combined with Figure 19 and Figure 20 The process of calculating the exceptions in an image is explained in detail.

[0327] The following, by way of example, combines Figure 19 This application provides a detailed description of the method for determining whether an image can be modified beyond its standard dimensions, as provided in the embodiments of this application.

[0328] The image can break the grid upwards when the main body of the image intersects with the top edge of its bounding rectangle at only one point; it can break the grid to the left when the main body of the image intersects with the left edge of its bounding rectangle at only one point; it can break the grid to the right when the main body of the image intersects with the right edge of its bounding rectangle at only one point; and it can break the grid downwards when the main body of the image intersects with the bottom edge of its bounding rectangle at only one point.

[0329] Optionally, when the main body of the image and the edge of the bounding rectangle of the main body have only one intersection point in two adjacent directions, if the angle formed between the line connecting these two intersection points and the edge line of the image is less than 1, then the edge line direction cannot be broken.

[0330] like Figure 19 (a) and Figure 19 As shown in (b) above, in the case of Figure 19In the image shown in (a), the intersection point A of the subject with the upper edge of its circumscribed rectangle is the same as the intersection point B of the subject with the upper edge of its circumscribed rectangle, the intersection point C of the subject with the upper edge of its circumscribed rectangle is the same as the intersection point D of the subject with the lower edge of its circumscribed rectangle. Connecting points A, B, C, and D forms a quadrilateral pattern. This quadrilateral pattern has only one sharp angle ∠BAC in the upward direction of the subject's circumscribed rectangle, and the angle formed by line segment AB and the upper edge of the subject's circumscribed rectangle is not less than 1°. The angle formed by line segment AC and the upper edge of the subject's circumscribed rectangle is also not less than 1°. Therefore, the image can be extended upwards. The quadrilateral pattern has only one sharp angle ∠ABD in the left direction of the subject's circumscribed rectangle, and the angle formed by line segment AB and the upper edge of the subject's circumscribed rectangle is not less than 1°. Therefore, the image can be extended upwards. The angle formed by the left edges of the rectangle is not less than 1 degree, and the angle formed by line segment BD and the left edge of the outer rectangle of the main body is not less than 1 degree, so the image can break the grid to the left; the quadrilateral pattern has only one sharp angle ∠ACD to the right of the outer rectangle of the main body, and the angle formed by line segment AC and the right edge of the outer rectangle of the main body is not less than 1 degree, and the angle formed by line segment CD and the right edge of the outer rectangle of the main body is not less than 1 degree, so the image can break the grid to the right; the quadrilateral pattern has only one sharp angle ∠BDC to the downward direction of the outer rectangle of the main body, and the angle formed by line segment BD and the lower edge of the outer rectangle of the main body is not less than 1 degree, and the angle formed by line segment CD and the lower edge of the outer rectangle of the main body is not less than 1 degree, so the image can break the grid to the downward direction.

[0331] like Figure 19 (c) and Figure 19 As shown in (d) in the figure, in the case of Figure 19 In the image shown in (a), the intersection point E of the subject with the upper edge of its circumscribed rectangle is E; the intersection points F and G with the left edge of the subject's circumscribed rectangle are F and G; the intersection points H and I with the right edge of the subject's circumscribed rectangle are H and I; and the intersection points J and K with the lower edge of the subject's circumscribed rectangle are J and K. Connecting points E, F, G, H, I, J, and K forms a heptagonal pattern. This heptagonal pattern has only one sharp angle ∠FEH in the upward direction of the image, and the angle formed by line segment EF and the upper edge of the subject's circumscribed rectangle is not less than ∠FEH. The angle between line segment EH and the upper edge of the circumscribed rectangle of the main body is not less than 1 degree, so the image can break the grid upwards; the heptagonal pattern has two sharp angles ∠EFG and ∠FGJ to the left of the circumscribed rectangle of the main body, so the image cannot break the grid to the left; the heptagonal pattern has two sharp angles ∠EHI and ∠HIK to the right of the circumscribed rectangle of the main body, so the image cannot break the grid to the right; the heptagonal pattern has two sharp angles ∠GJK and ∠JKI to the downward of the circumscribed rectangle of the main body, so the image cannot break the grid downwards.

[0332] In some embodiments, in a micro-cartoon image composed of M images, there may be only one image that is displayed in a unique way, and the area of ​​this image is larger than the area of ​​the other images in the M images.

[0333] In some embodiments, when an image is displayed with a broken grid, the broken portion should not obscure the main subject in other images.

[0334] The following, by way of example, combines Figure 20 This application provides a detailed description of the method for determining the priority of the direction of image breaking, as provided in the embodiments of this application.

[0335] For example Figure 20 The image shown in (a) is also as follows Figure 20 Taking the image shown in (e) as an example, the intersection points of the main body in the image and the edge of the bounding rectangle of the main body are A, B, C, and D. Connecting A, B, C, and D in sequence forms a shape like... Figure 20 Quadrilateral ABCD shown in (a) is based on Figure 18 As described in the text, this image can be broken in four directions: upward, downward, leftward, and rightward. The priority of breaking the grid upward, leftward, rightward, and downward can be determined as follows:

[0336] In quadrilateral ABCD, the horizontal vertex and the vertex closest in the vertical direction form a rectangular region, and the vertical vertex and the vertex closest in the horizontal direction form a rectangular region. Calculate the area of ​​each rectangular region and sort them according to the size of the area. The larger the area, the higher the priority for exception. Furthermore, exceptions can be made according to a certain area ratio of the rectangular region. This certain area ratio can be, for example, 38.2% or 50%.

[0337] In some embodiments, when an image can be broken in multiple directions, it can be broken in one direction or in multiple directions.

[0338] like Figure 20 As shown in (a), the rectangular region formed by the horizontal vertex A and the vertex B, which is closest in the vertical direction to the horizontal vertex A in quadrilateral ABCD, is region 1. Figure 20 (a) shows the dashed box region; the rectangular region formed by the vertical vertex B of quadrilateral ABCD and the vertex A that is closest in the horizontal direction is region 2. Figure 20 (b) shows the dashed box area; the rectangular area formed by the vertical vertex C of quadrilateral ABCD and the vertex D that is closest in the horizontal direction is region 3. Figure 20 (c) shows the dashed box area; the rectangular area formed by the horizontal vertex D and the vertex B that is closest in the vertical direction in quadrilateral ABCD is region 4. Figure 20(d) shows the dashed box area.

[0339] Among them, the area of ​​region 4 is greater than the area of ​​region 2, the area of ​​region 3, and the area of ​​region 1.

[0340] Therefore, the priority of the direction of breaking the grid is from high to low as follows: breaking the grid downwards, breaking the grid to the left, breaking the grid to the right, and breaking the grid upwards.

[0341] In one implementation, for example Figure 20 The image shown in (e) has a downward grid-breaking effect, as seen in the example below. Figure 20 The image shown in (f) is shown in the image.

[0342] In some embodiments, after determining the layout of the M images, the electronic device can adjust the layout of the M images. For example, in combination with... Figure 21 The rules for adjusting the image layout provided in the embodiments of this application will be described in detail.

[0343] like Figure 21 As shown in (a), when using a micro-diffuse layout with M images, the grid spacing between the images can be fixed. For example, the horizontal spacing between two adjacent images can be fixed, and the vertical spacing between two adjacent images can be fixed. In such cases... Figure 21 In the layout shown in (a), the horizontal spacing between images can be the straight-line distance between A6 and A7, and the vertical spacing between images can be the straight-line distance between A2 and A3.

[0344] In one example, the horizontal spacing between images can be specified as 10 pixels, and the vertical spacing between images as 4 pixels.

[0345] In some embodiments, when M images are arranged in a micro-macro layout, the shortest side of the image is not less than the length 1, which can be, for example, 90 pixels.

[0346] In some embodiments, when using a micro-macro layout with M images, the "inner edge translation principle" can be followed when adjusting the image size. That is, the outer edges of the image remain unchanged, while the inner edges are translated. For example, in... Figure 21 In the layout shown in (a), if you want to adjust the size of image A3A4A5A6, you can keep A3A4 and A4A6 unchanged, and translate A3A5 and / or A5A6.

[0347] like Figure 21 As shown in (b), when using a micro-spread layout of M images, the images can be diagonally arranged. After diagonal arrangement, the spacing between the images can be fixed, for example, the horizontal spacing between two adjacent images is fixed, and the vertical spacing between two adjacent images is fixed. In cases such as... Figure 21In the layout shown in (b), the horizontal spacing between images can be the perpendicular distance from point B7 to the sides B5 and B6, and the vertical spacing between images can be the straight-line distance between B2 and B3.

[0348] In one example, the horizontal spacing between images can be specified as 10 pixels, and the vertical spacing between images as 4 pixels.

[0349] In some embodiments, after the slant processing, the length of the shortest side of the image is not less than length 1, which can be, for example, 90 pixels.

[0350] In some embodiments, the slant processing of images follows the "slope variation principle" and the "non-parallel principle," wherein, as shown in... Figure 21 (a) and Figure 21 Taking the layout shown in (b) as an example, for example... Figure 21 The layout shown in (a) is obtained by diagonal processing. Figure 21 The layout shown in (b) refers to the "slope change principle" which means that the slope of edge B5B6 relative to edge A5A6 changes within a preset slope range. For example, the preset slope range can be 3 to 10°. The "non-parallel principle" means that edge B5B6 is not parallel to edge B8B9.

[0351] In some embodiments, the image is slanted, for example, by using a method that balances the slope.

[0352] One or more modules or units described herein can be implemented in software, hardware, or a combination of both. When any of the above modules or units are implemented in software, the software exists as computer program instructions and is stored in memory. A processor can be used to execute the program instructions and implement the above method flow. The processor can include, but is not limited to, at least one of the following: a central processing unit (CPU), a microprocessor, a digital signal processor (DSP), a microcontroller unit (MCU), or an artificial intelligence processor, etc., and various computing devices that run software. Each computing device may include one or more cores for executing software instructions to perform calculations or processing. The processor can be built into a SoC (System-on-a-Chip) or an application-specific integrated circuit (ASIC), or it can be a separate semiconductor chip. In addition to the cores within the processor for executing software instructions to perform calculations or processing, it may further include necessary hardware accelerators, such as field-programmable gate arrays (FPGAs), PLDs (programmable logic devices), or logic circuits that implement dedicated logic operations.

[0353] When the modules or units described herein are implemented in hardware, the hardware may be any one or any combination of a CPU, microprocessor, DSP, MCU, artificial intelligence processor, ASIC, SoC, FPGA, PLD, application-specific digital circuit, hardware accelerator, or non-integrated discrete device, which may run the necessary software or perform the above method flow independently of software.

[0354] When the modules or units described herein are implemented using software, they can be implemented, in whole or in part, in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0355] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0356] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0357] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0358] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0359] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0360] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0361] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for displaying an image, characterized in that, The method is applied to a first device, and the method includes: The user's first action was detected; In response to the first operation, the first device displays a first interface, which includes a first combined layout corresponding to M images. The first combined layout includes thumbnails of the M images. In the first combined layout, the thumbnail of the first image among the M images is displayed with a broken grid effect. The layout method of the first combined layout is related to the content of the M images and / or the association between the M images. M is a positive integer greater than 1. The thumbnail of the first image exhibits a disruptive display effect, which includes the effect that the main subject of the first image extends beyond the default display area of ​​the thumbnail of the first image.

2. The method according to claim 1, characterized in that, When the first device displays the first interface, the thumbnail of the first image dynamically changes from a non-grid-breaking display effect to a grid-breaking display effect.

3. The method according to claim 1 or 2, characterized in that, The method further includes: In response to the user's swiping operation on the first interface, the first device displays a second interface, which includes a second combined layout corresponding to N images. The second combined layout includes thumbnails of the N images. In the second combined layout, the thumbnail of the second image among the N images is displayed with a broken grid effect. The layout method of the second combined layout is related to the content of the N images and / or the association between the N images, where N is a positive integer greater than 1. The thumbnail of the second image exhibits a disruptive display effect, which includes the subject of the second image extending beyond the default display area of ​​the thumbnail of the second image.

4. The method according to claim 3, characterized in that, The first and second combined layouts are arranged vertically, the first interface includes the entirety of the first combined layout, and in response to a user's swiping operation on the first interface, the first device displays the second interface, including: In response to a user swiping up on the first interface, the first device displays a second interface, which includes the entirety of the second combined layout.

5. The method according to any one of claims 1 to 4, characterized in that, The method further includes: In response to a second operation by the user on a thumbnail of a third image among the M images in the first combined layout, the first device displays the third image.

6. The method according to any one of claims 1 to 5, characterized in that, The first interface further includes a first switching control, and the method further includes: In response to the user clicking the first switching control, the first device displays a third interface, which includes independently displayed thumbnails of the M images; In response to a user's action on the thumbnail of the fourth image among the M images in the third interface, the first device displays the fourth image.

7. The method according to any one of claims 1 to 6, characterized in that, Before the first device displays the first interface, the first device displays a fourth interface, which is an interface for playing a first video. The first video is a video generated based on multiple images, including the M images. The first operation is an operation performed when the fourth interface is displayed.

8. The method according to claim 7, characterized in that, The operations performed when the fourth interface is displayed include a swipe gesture from the edge of the fourth interface inwards, or a tap on the third switching control, wherein the fourth interface includes the third switching control.

9. The method according to any one of claims 1 to 8, characterized in that, The method further includes: In response to a third operation by the user on the thumbnail of the fifth image among the M images in the first combined layout, the first device displays a fifth interface, in which a first video is played starting from the position corresponding to the fifth image. The first video is a video generated based on multiple images, including the M images.

10. The method according to any one of claims 1 to 9, characterized in that, The first interface also includes a sharing control, and the method further includes: In response to a user clicking the share control, the first device displays a sixth interface, which includes a thumbnail of an image generated according to the first combined layout, and / or one or more share options available to the user, and / or a first settings control for the user to set the image generated according to the first combined layout as the wallpaper of the first device.

11. The method according to any one of claims 1 to 9, characterized in that, The first interface also includes a sharing control, and the method further includes: In response to a user clicking the share control, the interface of the first device displays multiple selectable combined layouts; In response to a user selecting a first combined layout and / or a second combined layout from the plurality of selectable combined layouts, the first device displays a seventh interface, the seventh interface including thumbnails of images generated according to the first combined layout and / or images generated according to the second combined layout, and / or one or more sharing methods selectable by the user, and / or a second settings control for the user to set the images generated according to the first combined layout and / or the images generated according to the second combined layout as the wallpaper of the first device.

12. The method according to any one of claims 1 to 11, characterized in that, In the first combined layout, the thumbnail of the first image is located at the top, and the thumbnail of the first image is displayed upwards in an exaggerated manner. Among the thumbnails of the M images, the thumbnail of the first image occupies the largest display area.

13. The method according to any one of claims 1 to 12, characterized in that, Before the first device displays the first interface, the method further includes: Based on the exception information of multiple candidate images, M images are determined from the multiple candidate images, wherein the exception information is used to indicate whether the candidate images meet the exception conditions; wherein, among the determined M images, at least one image meets the exception conditions; The first combined layout is determined based on the content of the M images and / or the relationships between the M images.

14. The method according to any one of claims 1 to 12, characterized in that, Before the first device displays the first interface, the method further includes: Obtain the M images; Identify the images among the M images that meet the exceptional criteria; The first combined layout is determined based on the content of the M images and the relationship between the M images.

15. The method according to claim 14, characterized in that, The process of determining which of the M images meets the exceptional criteria includes: Obtain the defect information of each of the M images, and the defect information of each image is used to indicate whether each image meets the defect conditions; The images that meet the exception criteria are determined based on the exception information of each image.

16. The method according to claim 13 or 15, characterized in that, The grid-breaking information is also used to indicate the grid-breaking direction of the candidate image.

17. The method according to any one of claims 1 to 16, characterized in that, In the first combined layout, after the thumbnail of the first image is displayed with a broken display effect, the main subject in the first image does not obscure the main subjects in the other M images.

18. The method according to claim 1 or 2, characterized in that, The first interface also includes a second combined layout, which includes thumbnails of N images. In the second combined layout, the thumbnail of the second image among the N images is displayed with a broken grid effect. When the first combined layout and the second combined layout are arranged adjacent to each other, the subject in the first image does not obscure the subject in the N images; and the subject in the second image does not obscure the subject in the M images.

19. The method according to claim 18, characterized in that, The first and second combined layouts are arranged adjacent to each other, with the first combined layout located above the second combined layout. The thumbnail of the first image is located at the top of the first combined layout, and the thumbnail of the first image displays an upward-breaking effect. The thumbnail of the second image is located at the top of the second combined layout, and the thumbnail of the second image displays an upward-breaking effect. The subject in the second image does not obscure the subject in the M images.

20. The method according to any one of claims 13 to 19, characterized in that, An image meets the exception criteria when it meets one or more of the following conditions: When the main body in the image intersects with the upper edge of the bounding rectangle of the main body at only one point, the image satisfies the upward breaking condition; When the main subject in the image intersects with the left edge of the bounding rectangle of the main subject at only one point, the image satisfies the condition of breaking the grid to the left. When the main subject in the image intersects with the right edge of the bounding rectangle of the main subject at only one point, the image satisfies the rightward breaking condition; When the subject in the image intersects with the lower edge of the bounding rectangle of the subject at only one point, the image satisfies the downward breaking condition.

21. An electronic device, characterized in that, include: One or more processors; One or more memory units; And one or more computer programs, wherein the one or more computer programs are stored in the one or more memories, the one or more computer programs including instructions that, when executed by the one or more processors, cause the electronic device to perform the method as claimed in any one of claims 1 to 20.

22. A computer-readable storage medium, characterized in that, The storage medium stores a program or instructions that, when executed, implement the method as described in any one of claims 1 to 20.

23. A chip, characterized in that, The chip stores instructions that, when executed, implement the method as described in any one of claims 1 to 20.

24. A computer program product, characterized in that, The computer program product stores a program or instructions that, when executed, implement the method as described in any one of claims 1 to 20.

Images