Screen locking image display method, electronic equipment, chip system and storage medium

Abstract

The invention discloses a screen locking image display method, electronic equipment, a chip system and a storage medium, and belongs to the technical field of terminals. The method is applied to electronic equipment and comprises the following steps: receiving a display operation on a lock screen interface; displaying the screen locking interface; wherein the lock screen interface comprises a target lock screen image, the target lock screen image comprises a first image and a second image, and the second image is displayed on the upper layer of a main body image of the first image in an overlapping manner according to a transparent-to-opaque gradual change effect. According to the method and the device, the overlapping display of the two images can be realized, and the overlapping image positioned on the upper layer can be subjected to a transparent gradual change effect, so that the main body image presents the gradual change effect, and the personalized and diversified setting of the lock screen image and the aesthetic property of the lock screen interface are reflected.

Description

Technical Field

[0001] This application relates to the technical field of terminals, and particularly to a method for displaying a lock screen image, an electronic device, a chip system, and a storage medium. Background Art

[0002] With the development of terminal technology, the basic functions of electronic devices have become more and more perfect. With the improvement of the basic functions of electronic devices, users' other usage requirements for electronic devices have gradually increased. For example, users have paid more and more attention to the personalized settings of electronic devices. Since the lock screen image of an electronic device can usually reflect the user's personality and preferences, more and more users hope to have a personalized lock screen image. Summary of the Invention

[0003] This application provides a method for displaying a lock screen image, an electronic device, a chip system, and a storage medium, which can improve the personalization degree of the lock screen image. The technical solutions are as follows:

[0004] In a first aspect, a method for displaying a lock screen image is provided, which is applied to an electronic device. The method includes:

[0005] Receiving a display operation on the lock screen interface; and displaying the lock screen interface. The lock screen interface includes a target lock screen image, and the target lock screen image includes a first image and a second image. The first image may include a background image and a main image, and the main image is an image obtained by matting the original image. The background image may be a solid color background image separately set for the main image or the original image of the main image. The second image is superimposed and displayed on the main image of the first image according to a gradient effect from transparent to opaque.

[0006] In this way, since the embodiments of this application can implement the superimposed display of two images, and the superimposed image located on the upper layer can have a transparent gradient effect, the main image presents a gradient effect, thereby reflecting the personalized and diversified settings of the lock screen image and the beauty of the lock screen interface.

[0007] As an example, the original image in the first image is displayed in the original layer, the background image of the first image is displayed in the color background layer, the main image of the first image is displayed in the matting layer, and the second image is displayed as a superimposed image in the superimposed layer.

[0008] As an example of this application, the target lock screen image is an image with a depth of field effect, and the main image of the first image partially occludes the system time indicator, and the system time indicator is located above the layer where the first image is located.

[0009] Of course, the electronic device can set the background blur degree of the target lock screen image and whether it has a depth-of-field effect. Exemplarily, in response to the operation of turning off the depth-of-field effect, the electronic device sets the state of the main image in the target lock screen image to the non-display state. In response to the operation of turning on the depth-of-field effect, the electronic device sets the state of the main image in the target lock screen image to the display state.

[0010] In this way, when the target lock screen image is an image with a depth-of-field effect, the hierarchical richness of the lock screen interface is increased, and the aesthetics and personalization degree of the lock screen interface are improved.

[0011] As an example of the present application, before the electronic device receives the display operation of the lock screen interface, it can also respond to the editing trigger operation of the lock screen image to display an image selection interface, which is used to instruct the user to select an image template of the lock screen image; in response to the selection operation of the target image template, the target image template is displayed on the lock screen preview page, the target image target is the image template in the image selection interface, and the target image template includes a reference schematic image and a reference overlay image, the reference overlay image is superimposed on the upper layer of the reference main image of the reference schematic image, and the display effect of the reference overlay image is a transparent gradient display effect; based on the target image template, the target lock screen image is determined.

[0012] As an example, the reference schematic image includes a reference main image and a reference background image, wherein the reference main image is displayed in the cut layer, the reference background image is displayed in the color background layer, and the reference overlay image is displayed in the overlay layer.

[0013] In this way, by presetting the image template, the convenience of setting the personalized lock screen image is improved.

[0014] As an example of the present application, the first image is determined according to the reference schematic image, and the second image is determined according to the reference overlay image;

[0015] The operation of the electronic device to determine the target lock screen image based on the target image template includes:

[0016] Determine that the target image template is the target lock screen image; or,

[0017] In response to the adjustment operation of the target image template, determine the adjusted target image template as the target lock screen image, and the adjustment operation includes the zoom operation and / or the move operation of the target image template.

[0018] In this way, since the target lock screen image can be directly determined according to the target image template, the convenience of determining the target lock screen image is improved.

[0019] As an example of the present application, the first image is obtained by replacing the reference schematic image, and / or the second image is obtained by replacing the reference superimposed image;

[0020] The operations by which the electronic device determines the target lock screen image based on the target image template include:

[0021] In response to the replacement operation of the reference schematic image and / or the reference superimposed image, determine the first target image; determine the first target image as the target lock screen image.

[0022] In this way, by replacing the reference schematic image and / or the reference superimposed image, the freedom for the user to independently select images is enhanced, and the personalization level of the lock screen image is improved.

[0023] As an example of the present application, the operations by which the electronic device determines the first target image in response to the replacement operation of the reference schematic image and the reference superimposed image include:

[0024] In response to the trigger operation of replacing the reference schematic image with the first selected image, determine the target color system of the first main image in the first selected image, where the first selected image is any image in the gallery of the electronic device; obtain the preset superimposed image corresponding to the target color system, and the color system of the preset superimposed image is the same as the target color system; update the background color of the reference schematic image according to the target color system, and replace the reference main image with the first main image; replace the reference superimposed image with the preset superimposed image; determine the first target image according to the first main image and the preset superimposed image.

[0025] As an example, the operations by which the electronic device determines the first target image in response to the replacement operation of the reference schematic image include: in response to the trigger operation of replacing the reference schematic image with the first selected image, determine the target color system of the first main image in the first selected image, where the first selected image is any image in the gallery of the electronic device; update the background color of the reference schematic image according to the target color system, and replace the reference main image with the first main image; superimpose the reference superimposed image on the upper layer of the first main image, and set the display effect of the reference superimposed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0026] As an example, the operations by which the electronic device determines the first target image in response to the replacement operation of the reference schematic image include: in response to the trigger operation of replacing the reference superimposed image with the third selected image, replace the reference superimposed image with the third selected image, where the third selected image is any image in the gallery of the electronic device; superimpose the third selected image on the upper layer of the reference main image, and set the display effect of the third selected image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0027] In this way, when replacing the reference main image with the first main image, it is also possible to simultaneously change the color of the background image and the superimposed image, making the replacement of the target image template faster and more convenient.

[0028] As an example of the present application, the operation of the electronic device to determine the target color system of the first main image in the first selected image in response to a trigger operation of replacing the reference schematic image with the first selected image includes:

[0029] In response to a trigger operation of replacing the first reference image with the first selected image, perform a matte extraction operation on the first selected image to obtain the first main image; perform a color sampling operation on the first main image to obtain the target color system.

[0030] In this way, by performing color sampling on the first main image, the target color system is closer to the overall color of the first main image, improving the harmony between the background image and the main image.

[0031] As an example of the present application, the operation of the electronic device to determine the first target image based on the first main image and the preset superimposed image includes:

[0032] Mix the preset superimposed image with the first main image to obtain a mixed image, where the mixed image includes the first main image and overlapping pixel points, and the overlapping pixel points are the pixel points in the preset superimposed image that overlap with the first main image; set the display effect of the overlapping pixel points in the mixed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0033] In this way, by mixing the preset superimposed image with the first main image, only the first main image and the part of the preset superimposed image that overlaps with the first main image are displayed in the mixed image, making the display effect of the mixed image more harmonious and beautiful.

[0034] As an example of the present application, the operation of the electronic device to set the display effect of the overlapping pixel points in the mixed image to a transparent gradient effect from transparent to opaque to obtain the first target image includes:

[0035] Fuse the mixed image with a transparent gradient area to obtain the first target image. The transparent gradient area is an area set with a transparent gradient effect, and the transparent gradient effect of the overlapping pixel points located in the transparent gradient area is the same as the transparent gradient effect of the transparent gradient area.

[0036] In this way, by setting the transparent gradient area, the setting of the transparent gradient effect of the superimposed image is made more natural and accurate.

[0037] As an example of the present application, the operation of the electronic device to determine the first target image based on the first main image and the preset superimposed image includes:

[0038] Determine the minimum bounding rectangle corresponding to the first main image according to the first position information of the first main image; process the preset superimposed image according to the size of the minimum bounding rectangle, and the size of the processed preset superimposed image is the same as the size of the minimum bounding rectangle; superimpose and display the processed preset superimposed image on the upper layer of the first main image; set the display effect of the processed preset superimposed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0039] In this way, since the first main image and the preset superimposed image can be superimposed in different ways, the superimposing methods are enriched.

[0040] As an example of the present application, after the electronic device determines the first target image based on the first main image and the preset superimposed image, it can also respond to the trigger operation of replacing the preset superimposed image with the second selected image, and superimpose the second selected image on the upper layer of the first main image. The second selected image is any image in the gallery of the electronic device other than the first selected image; set the display effect of the second selected image to a transparent gradient effect from transparent to opaque to obtain the updated first target image; determine the updated first target image as the target lock screen image.

[0041] In this way, since the user can modify the superimposed image, the display richness of the lock screen image is increased, and the personalization degree of the lock screen image is improved.

[0042] As an example of the present application, the operation of the electronic device to determine the adjusted target image template as the target lock screen image in response to the adjustment operation of the target image template includes:

[0043] Respond to the adjustment operation of the reference main image in the target image template, and determine the second position information of the adjusted reference main image; according to the second position information, superimpose the reference superimposed image on the upper layer of the adjusted reference main image; set the display effect of the reference superimposed image to a transparent gradient effect to obtain the adjusted target image template; determine the adjusted target adjustment template as the target lock screen image.

[0044] In this way, the electronic device adjusts the size and position of the reference main image, thereby increasing the interactivity with the user and enhancing the personalization degree of the image display.

[0045] As an example of the present application, the operation of the electronic device to determine the adjusted target image template as the target lock screen image in response to the adjustment operation of the target image template includes:

[0046] In response to an adjustment operation on a reference overlay image in a target image template, determine third position information of the adjusted reference overlay image; according to the third position information, overlay the reference overlay image with adjusted position on the upper layer of a reference main image; set the display effect of the reference overlay image with adjusted position to a transparent gradient effect to obtain an adjusted target image template; determine that the adjusted target image template is a target lock screen image.

[0047] In this way, by separately adjusting the reference overlay image and the reference main image, the adjustment methods are made more diverse and can better reflect the personalization degree of image display.

[0048] As an example of the present application, the operation of the electronic device to determine that the adjusted target image template is a target lock screen image in response to an adjustment operation on the target image template includes:

[0049] Receive a sliding operation on a sliding bar, where the sliding bar is used to adjust the range of an overlapping area between the reference main image and the reference overlay image; in response to the sliding operation on the sliding bar, determine display position information of the sliding bar; according to the display position information, overlay and display the reference overlay image on the upper layer of the reference main image, and set the display effect of the reference overlay image to a transparent gradient effect to obtain an adjusted target image template; determine that the adjusted target image template is a target lock screen image.

[0050] In this way, by adjusting the range of the overlapping area through the sliding bar, the convenience of the adjustment method is increased, and the richness and beauty of image display are improved.

[0051] In a second aspect, an electronic device is provided. The structure of the electronic device includes a processor and a memory. The memory is used to store a program for supporting the electronic device to execute the lock screen image display method provided in the first aspect above, and to store data related to the lock screen image display implemented in the first aspect above. The processor is configured to execute the program stored in the memory. The electronic device may further include a communication bus, and the communication bus is used to establish a connection between the processor and the memory.

[0052] In a third aspect, a chip system is provided. The chip system is applied to an electronic device. The chip system includes one or more processors, and the one or more processors are used to call computer instructions to enable the electronic device to execute the lock screen image display method provided in the first aspect above.

[0053] In a fourth aspect, a computer-readable storage medium is provided. Instructions are stored in the computer-readable storage medium, and when the instructions run on a computer, the computer is enabled to execute the lock screen image display method described in the first aspect above.

[0054] In a fifth aspect, a computer program product including instructions is provided. When it runs on a computer, it causes the computer to execute the method for displaying a locked screen image described in the first aspect above.

[0055] The technical effects obtained in the second, third, fourth, and fifth aspects above are similar to those obtained by the corresponding technical means in the first aspect above, and will not be elaborated here. Description of the Drawings

[0056] Figure 1 is a schematic structural diagram of an electronic device provided by an embodiment of the present application;

[0057] Figure 2 is a schematic diagram of a plurality of layers provided by an embodiment of the present application;

[0058] Figure 3 is a schematic diagram of the styles of each layer provided by an embodiment of the present application;

[0059] Figure 4 is a schematic diagram of the display effect after superimposing different layers provided by an embodiment of the present application;

[0060] Figure 5 is a schematic diagram of image processing provided by an embodiment of the present application;

[0061] Figure 6 is a schematic diagram of the hierarchical relationship of a plurality of layers provided by an embodiment of the present application;

[0062] Figure 7 is a schematic diagram of a wallpaper editing interface provided by an embodiment of the present application;

[0063] Figure 8 is a schematic diagram of an application scenario provided by an embodiment of the present application;

[0064] Fig. 9 is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0065] Fig.10 is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0066] Fig.11 is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0067] Fig.12 is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0068] Fig.13 is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0069] Fig.14 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0070] Fig.15 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0071] Fig.16 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0072] Fig.17 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0073] Fig.18 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0074] Fig.19 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0075] Fig. 20 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0076] Fig.21 It is another schematic diagram of an application scenario provided by an embodiment of the present application;

[0077] Fig. 22 Figure (a) in is a schematic diagram of a software system provided by an embodiment of the present application;

[0078] Fig. 22 Figure (b) in is a schematic diagram of a technical architecture provided by an embodiment of the present application;

[0079] Fig.23 It is a schematic diagram of a method flow for entering a wallpaper editing interface provided by an embodiment of the present application;

[0080] Fig.24 It is a schematic diagram of a display area provided by an embodiment of the present application;

[0081] Fig.25 It is a schematic diagram of a target area of a full-screen image provided by an embodiment of the present application;

[0082] Fig.26 It is a flowchart of a method for displaying a lock screen image provided by an embodiment of the present application;

[0083] Fig. 27 It is a schematic diagram of a json file provided by an embodiment of the present application;

[0084] Fig.28 It is a schematic diagram of cropping a full-screen image provided by an embodiment of the present application;

[0085] Fig.29 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application;

[0086] Fig.30 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application;

[0087] Fig.31 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application;

[0088] Fig.32 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application;

[0089] Fig.33 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application;

[0090] Fig.34 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application;

[0091] Fig.35 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application. Detailed implementation manners

[0092] To make the objectives, technical solutions and advantages of the present application clearer, the following will further describe in detail the embodiments of the present application with reference to the accompanying drawings.

[0093] It should be understood that the "multiple" mentioned in the present application refers to two or more. In the description of the present application, unless otherwise specified, " / " means "or", for example, A / B can represent A or B; herein, "and / or" is merely a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. In addition, in order to clearly describe the technical solutions of the present application, terms such as "first" and "second" are used to distinguish the same items or similar items with basically the same functions and effects. Those skilled in the art can understand that the terms "first" and "second" do not limit the quantity and execution order, and the terms "first" and "second" do not necessarily limit to be different.

[0094] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0095] In some scenarios, when using electronic devices, users usually hope that the electronic devices they use can reflect the user's personality. Among them, the lock screen image (lock screen image can also be called lock screen image, wallpaper, etc.) is a way to reflect the user's personality. Therefore, the user can change the lock screen image of the electronic device.

[0096] In order to enhance the personalization and diversification of the lock screen image, an embodiment of the present application provides a method for displaying a lock screen image, in which the electronic device can display a lock screen interface in response to a display operation on the lock screen interface, wherein the lock screen interface displays a target lock screen image, wherein the target lock screen image includes a first image and a second image, wherein the second image is superimposed on the main image of the first image, and the second image presents a gradient effect from transparent to opaque on the first image. The embodiment of the present application can realize the superimposed display of two images, and the superimposed image located in the upper layer can have a transparent gradient effect, so that the main image presents a gradient effect, thereby reflecting the personalization and diversification of the lock screen image and the aesthetics of the lock screen interface.

[0097] The display method of the lock screen image provided in the embodiment of the present application can be applied to electronic devices. The electronic device can be a mobile phone, a tablet computer, a wearable device, a digital camera, a vehicle-mounted device, an augmented reality (AR) device, a virtual reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a laptop computer, etc., and the embodiment of the present application does not limit this.

[0098] Figure 1 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 1, the 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, an antenna 1, an 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, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. Among them, the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light 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.

[0099] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than those shown in the figure, or combine certain components, or split certain components, or have different component arrangements. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0100] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units may be independent devices or integrated in one or more processors.

[0101] Among them, the controller may be the nerve center and command center of the electronic device 100. The controller may generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching instructions and executing instructions.

[0102] A memory can also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can hold the instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to use the instruction or data again, it can directly call it from this memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0103] The external memory interface 120 can be used to connect to 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 memory interface 120 to implement the data storage function. For example, files such as music and videos are saved in the external memory card.

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

[0105] The wireless communication function of the electronic device 100 can be implemented through antenna 1, antenna 2, the mobile communication module 150, the wireless communication module 160, the modulation and demodulation processor, and the baseband processor, etc.

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

[0107] The electronic device 100 can implement the shooting function through the ISP, the camera 193, the video codec, the GPU, the display screen 194, and the application processor, etc.

[0108] The electronic device 100 implements the display function through the GPU, the display screen 194, and the application processor, etc.

[0109] The GPU is a microprocessor for image processing, connecting the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or change display information. The display screen 194 is used to display images, videos, etc.

[0110] The touch sensor 180K, also known as the "touch panel". The touch sensor 180K can be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also known as the "touch display screen". The touch sensor 180K is used to detect touch operations acting thereon or nearby. The touch sensor 180K can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In some other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, at a different position from where the display screen 194 is located.

[0111] The embodiments of the present application do not particularly limit the specific structure of the execution subject of the display method of the lock screen image, as long as it can run the code recording the display method of the lock screen image provided by the embodiments of the present application to process according to the display method of the lock screen image provided by the embodiments of the present application. For example, the execution subject of the display method of the lock screen image provided by the embodiments of the present application can be a functional module in the electronic device that can call and execute programs, or can be a processing device applied to the electronic device, such as a chip, etc.

[0112] Next, the lock screen image involved in the display method of the lock screen image provided by the embodiments of the present application will be described.

[0113] The lock screen image in the embodiments of the present application may include multiple layers. The layers described in the embodiments of the present application can also be referred to as views.

[0114] There is a hierarchical relationship between the multiple layers, and this hierarchical relationship refers to the upper and lower layer relationships of the multiple layers when displayed. Generally, the layer in the upper layer will partially or completely block the layer in the lower layer when displayed.

[0115] Figure 2 It is a schematic diagram of multiple layers provided by the embodiments of the present application. The multiple layers can be divided into multiple types.

[0116] Exemplarily, as Figure 2 shown, the multiple layers can include five types of layers, namely: the original layer, the color background layer, the double exposure layer, and the clock layer, where the double exposure layer includes a cutout layer and a superimposed layer.

[0117] Generally, the original layer is located at the bottommost layer. The color background layer is lower in level than the double exposure layer and the clock layer, and the double exposure layer is lower in level than the clock layer; in the double exposure layer, the cutout layer is lower in level than the overlay layer.

[0118] The image of the original layer can be referred to as the original image. By way of example, the original image can be an image selected by the user, such as an image selected by the user from the images in the gallery, or an image selected by the user from the images pre-set in the electronic device. Alternatively, the original image can be the image of the original layer included in an image template selected by the user from multiple image templates pre-set in the electronic device. For example, the original layer can be the layer shown in FIG. (a) in Figure 3 .

[0119] The image of the color background layer is an image that has a certain color as a whole. By way of example, the color of the image can be a solid color or a gradient color. For example, the color background layer can be the layer shown in FIG. (b) in Figure 3 , and the color of the image of the color background layer is a solid color.

[0120] The image of the cutout layer in the double exposure layer can be obtained from the image of the original layer. By way of example, the image of the cutout layer can be the image of the foreground object in the image of the original layer. In some embodiments, the foreground object can be extracted from the image of the original layer according to the object information and edge information in the image of the original layer. For example, in the case where the original layer is the layer shown in FIG. (a) in Figure 3 , the cutout layer can be the layer shown in FIG. (c) in Figure 3 .

[0121] The image of the overlay layer in the double exposure layer can be an image with an unclear foreground object selected by the user. For example, the image of the overlay layer can be a landscape image. Alternatively, the image of the overlay layer can also be a pre-set image obtained by the electronic device according to the color system of the image in the cutout layer; or the image of the overlay layer can also be the image of the overlay layer included in an image template selected by the user from multiple image templates pre-set in the electronic device. For example, the overlay layer can be the layer shown in FIG. (d) in Figure 3 .

[0122] The clock layer is a layer for displaying the system time indicator, and the system time indicator can indicate the system time of the electronic device. By way of example, the clock layer can be the layer shown in FIG. (e) in Figure 3 .

[0123] In practical applications, Figure 2The hierarchy of each of the shown layers is not uniquely determined, and the hierarchy of each layer can also be changed according to the actual situation, or corresponding layers can be deployed according to the wallpaper editing function of the electronic device. In addition, the multiple layers can include not only the above five types, but also other types, such as a decoration layer. Among them, the hierarchy of the decoration layer can be lower than the clock layer and the cutout layer in some cases, and can also be higher than the clock layer and the cutout layer in some cases. The hierarchy of the clock layer can be lower than the cutout layer. The image of the decoration layer is an image that can decorate the main image. Exemplarily, the image can be an image with a photo frame effect, or can be an image with a certain texture, or can be an image with a mask effect, etc., and the embodiments of the present application do not limit this.

[0124] The lock screen image in the embodiments of the present application can include one or more types of layers.

[0125] Exemplarily, the lock screen image can successively include, from the bottommost layer to the topmost layer: the original layer, the clock layer. For example, the lock screen image can be Figure 4 the image shown in FIG. (a) in Figure 3 which includes the original layer shown in FIG. (a) in Figure 3 and the clock layer shown in FIG. (e) in

[0126] Or, the lock screen image can successively include, from the bottommost layer to the topmost layer: the original layer, the color background layer, the clock layer, the cutout layer. For example, the lock screen image can be Figure 4 the image shown in FIG. (b) in Figure 3 which includes the original layer shown in FIG. (a) in Figure 3 the color background layer shown in FIG. (b) in Figure 3 the clock layer shown in FIG. (e) in Figure 3 and the cutout layer shown in FIG. (c) in

[0127] Or, the lock screen image can successively include, from the bottommost layer to the topmost layer: the original layer, the clock layer, the cutout layer, the overlay layer. For example, the lock screen image can be Figure 4 the image shown in FIG. (c) in Figure 3 which includes the original layer shown in FIG. (a) in Figure 3 the clock layer shown in FIG. (e) in Figure 3 the cutout layer shown in FIG. (c) in Figure 3 and the overlay layer shown in FIG. (d) in

[0128] Or, the lock screen image can successively include, from the bottommost layer to the topmost layer: the original layer, the color background layer, the clock layer, the cutout layer, the overlay layer. For example, the lock screen image can be Figure 4 the image shown in FIG. (d) in Figure 3The original layer shown in Figure (a) therein, Figure 3 The color background layer shown in Figure (b) therein, Figure 3 The clock layer shown in Figure (e) therein, Figure 3 The matte layer shown in Figure (c) therein, Figure 3 The overlay layer shown in Figure (d) therein.

[0129] Figure 4 The image shown in Figure (d) therein can make the picture have a foreground and background depth effect through the interaction of the original layer, the color background layer, the clock layer, the matte layer and the overlay layer. In the embodiments of the present application, this effect is called the depth of field effect.

[0130] Of course, in addition to the above examples, various types of layers can also be flexibly combined in other ways to obtain a lock screen image with better visual effects. The embodiments of the present application do not limit this.

[0131] It should be noted that the above Figure 3 and Figure 4 are only exemplary descriptions of the layers and the image, and do not constitute a limitation on the embodiments of the present application.

[0132] As can be seen from the above, the lock screen image in the embodiments of the present application can be obtained by stacking multiple layers according to the hierarchical relationship. For example, by processing Figure 5 an original image shown in Figure (a) therein, a lock screen image shown in Figure (b) therein can be obtained. The lock screen image can include Figure 5 the 5 layers shown in Figure (a) therein, namely: the original layer, the color background layer, the clock layer, the matte layer, and the overlay layer. Their hierarchy from low to high is: 1, 2, 3, 4, 5. The visual elements of the lock screen image are rich and can meet the personalized needs of users. Figure 6

[0133] Figure 6 In some embodiments, as shown in Figure (b) therein, the layer has position information, which can be represented by coordinates (x, y, z). Among them, (x, y) is the center position of the layer. Among them, (z) is used to indicate the hierarchy of the layer among all the layers of the wallpaper to which it belongs. It can be seen that among the 5 layers shown in Figure 6 from the leftmost layer to the rightmost layer, the Z values of the layers increase in turn.

[0134] ​​The display method of the lock screen image provided by the embodiments of the present application can edit various types of layers included in the lock screen graphics. For example, for the original layer, it can be scaled, moved, blurred, etc.; for the color background layer, its color can be adjusted, etc.; for the cutout layer, its depth of field effect can be adjusted, etc.; for the overlay layer, the image can be replaced, scaled, moved, transparency processed, cropped, etc.; for the clock layer, its font, color, etc. can be adjusted.

[0135] For the sake of easy understanding, the application scenarios involved in the embodiments of the present application will be introduced next.

[0136] Figure 7 is a schematic diagram of a wallpaper editing interface provided by the embodiments of the present application. Refer to Figure 7 , the wallpaper editing interface 700 may include function controls 701, a lock screen preview page 702, and a desktop preview page 703.

[0137] The function controls 701 may include main function controls, such as a return control 70, an application control 71, etc. The function controls 701 may also include controls for editing the wallpaper, which can provide various editing functions.

[0138] The lock screen preview page 702 is a page for previewing the edited lock screen image. Among them, the lock screen image refers to the image displayed on the lock screen interface.

[0139] The desktop preview page 703 is a page for previewing the edited desktop wallpaper. Among them, the desktop wallpaper refers to the image displayed on the desktop after the electronic device is unlocked. Optionally, the desktop preview page 703 may also display a thumbnail of the desktop content, so as to better preview the display effect of the desktop wallpaper.

[0140] The lock screen preview page 702 and the desktop preview page 703 may exist in a paged form, and the two can be switched and displayed through a sliding operation. For example, in Figure 7 the wallpaper editing interface 700 shown in FIG. (a) displays the lock screen preview page 702. After the user swipes left on the wallpaper editing interface 700, as Figure 7 shown in FIG. (b), the wallpaper editing interface 700 can display the desktop preview page 703. After that, when the user swipes right on the wallpaper editing interface 700 shown in FIG. (b) in Figure 7 , as Figure 7 shown in FIG. (a), the wallpaper editing interface 700 can display the lock screen preview page 702.

[0141] Exemplarily, as Figure 7As shown in Figure (a) therein, when the lock screen preview page 702 is displayed on the wallpaper editing interface 700, the wallpaper editing interface 700 can also display relevant function controls for editing the lock screen image, such as a lock screen style control 72, a personalized decoration control 73, a depth of field effect control 74, an image replacement control 75, etc. The embodiments of the present application do not limit this.

[0142] Exemplarily, as Figure 7 As shown in Figure (b) therein, when the desktop preview page 703 is displayed on the wallpaper editing interface 700, the wallpaper editing interface 700 can also display relevant function controls for editing the desktop wallpaper, such as a follow lock screen control 76, a color control 77, a wallpaper selection control 78, a blur control 79, etc. The embodiments of the present application do not limit this.

[0143] In some embodiments, the wallpaper editing interface 700 may further include a mask layer 704. Exemplarily, the mask layer 704 may be a blur mask layer, and the blur mask layer refers to a mask layer obtained through blur processing. In this case, the function controls, the lock screen preview page 702, and the desktop preview page 703 can all be displayed on the upper layer of the mask layer 704.

[0144] Exemplarily, the mask layer 704 can be obtained by performing blur processing on the original image of the lock screen image displayed on the lock screen preview page 702. Alternatively, the mask layer 704 can be obtained by performing blur processing on the image of the desktop wallpaper displayed on the desktop preview page 703. Of course, the mask layer 704 can also be obtained by other means, such as by performing blur processing on a preset image. The embodiments of the present application do not limit this.

[0145] In some embodiments, the wallpaper editing interface 700 can be entered from the lock screen interface or the desktop.

[0146] As an example, as Figure 8 As shown in Figure (a) therein, when the electronic device displays the lock screen interface 800, the user can perform a first gesture operation ( Figure 8 taking the two-finger pinch operation as an example in Figure 8 In the lock screen interface 800). In response to the first gesture operation, the electronic device can display Figure 8 the wallpaper editing interface 700 shown in Figure (b) therein. The wallpaper editing interface 700 displays the lock screen preview page 702 and relevant function controls for editing the lock screen image. In this case, the user can edit the lock screen image based on

[0147] If the user wants to edit the desktop wallpaper, they can slide left in the Figure 8 wallpaper editing interface 700 shown in Figure (b) therein, and then as Figure 8As shown in Figure (c), the wallpaper editing interface 700 may display a desktop preview interface 703 and related function controls for editing the desktop wallpaper. In this case, the user may, based on Figure 8 the wallpaper editing interface 700 shown in Figure (c), edit the desktop wallpaper.

[0148] As another example, as shown in Figure (a), when the electronic device displays the desktop 900, the user may perform a second gesture operation ( Fig. 9 taking the two-finger pinch operation as an example) on the desktop 900. In response to the second gesture operation, the electronic device displays Fig. 9 the desktop editing interface shown in Figure (b). This desktop editing interface may display related controls for editing the desktop, such as wallpaper controls, card controls, switching effect controls, desktop setting controls, etc. Subsequently, the user clicks on the wallpaper control in this desktop editing interface. In response to this click operation, the electronic device may display Fig. 9 the wallpaper editing interface 700 shown in Figure (c). The wallpaper editing interface 700 displays a desktop preview interface 703 and related function controls for editing the desktop wallpaper. In this case, the user may, based on Fig. 9 the wallpaper editing interface 700 shown in Figure (c), edit the desktop wallpaper. Fig. 9 the wallpaper editing interface 700 shown in Figure (c), edit the desktop wallpaper.

[0149] If the user wants to edit the lock screen image, the user may swipe to the right in the Fig. 9 wallpaper editing interface 700 shown in Figure (c), and then, as shown in Figure (d), the wallpaper editing interface 700 may display a lock screen preview page 702 and related function controls for editing the lock screen image. In this case, the user may, based on Fig. 9 the wallpaper editing interface 700 shown in Figure (d), edit the lock screen image. Fig. 9 the wallpaper editing interface 700 shown in Figure (d), edit the lock screen image.

[0150] Next, the specific process of editing the lock screen image based on the wallpaper editing interface 700 will be described.

[0151] The embodiments of the present application provide capabilities such as image templates, clock customization, ornament setting, depth of field setting, image replacement, image scaling, etc. for the lock screen image. Through these capabilities, users can edit personalized and characteristic images.

[0152] As an example, after the electronic device displays the wallpaper editing interface 700 shown in Figure (a), the user may click on the lock screen style control 72. In response to this click operation, as shown in Fig.10 Figure (a), the electronic device may display Fig.10As shown in Figure (b), the electronic device can pop up a pop-up window 7011 from the bottom of the wallpaper editing interface 700. Multiple image template options are displayed in the pop-up window 7011. Further, image options in the gallery and some preset wallpaper image options of the electronic device can also be displayed. Suppose the user selects an image template from the multiple image templates. Then, in response to the selection operation of this image template, as Fig.10 shown in Figure (c), the electronic device can close the pop-up window 7011 and display this image template in the lock screen preview page 702.

[0153] In another application scenario, when the lock screen preview page 702 shown in Figure (a) is displayed, if the user does not want to set the depth of field effect, then the user can click on the depth of field effect control 74 in the lock screen preview page 702. In response to the click operation on the depth of field effect control, refer to Fig.11 Figure (b), the electronic device can pop up a pop-up window 7012 from the bottom of the lock screen preview page. A depth of field effect switch 7141 is displayed in the pop-up window 7012. Further, a background blur control 7142 ( Fig.11 taking the control in the form of a slider in Fig.11 as an example) can also be displayed. The user can turn on or off the depth of field effect of the lock screen image in the lock screen preview page 702 through the depth of field effect switch 7141, and adjust the blur degree of the original image of the lock screen image in the lock screen preview page 702 through the background blur control 7142. Suppose the user turns off the depth of field effect switch 7141. Then, in response to the turn-off operation of the depth of field effect switch 7141, as Fig.11 shown in Figure (c), the electronic device can turn off the depth of field effect of the lock screen image in the lock screen preview page 702. After that, if the user determines to complete the setting of the depth of field, then as Fig.11 shown in Figure (c), the user can click on the folding control 710. In response to this click operation, as Fig.11 shown in Figure (d), the electronic device can close the pop-up window 7012.

[0154] In another application scenario, if the user is not satisfied with the main image of the lock screen image displayed in the lock screen preview page, then the user can zoom in or out the main image in the lock screen image of the lock screen preview page 702, and can also move the position of the main image. For example, refer to Fig.12 Figure (a), the user can click on the lock screen image in the lock screen preview interface 702. In response to the click operation on the lock screen image, the electronic device can display as Fig.12In the image adjustment interface 1200 shown in Figure (b), the user can click on the adjustment main image control 1201 in the image adjustment interface 1200; in response to the click operation on the adjustment main image control 1201, the electronic device allows the user to adjust the size and position of the main image in the lock screen image. For example, if the user performs a two-finger zoom-in operation in the image adjustment interface 1200, then in response to this two-finger zoom-in operation, as shown in Fig.12 Figure (c), the electronic device can zoom in on the main image, and re-stack the overlay image in the lock screen image on top of the adjusted main image, and re-set the transparent gradient effect for the overlay image. If the user performs a two-finger zoom-out operation in the image adjustment interface 1200, then in response to this two-finger zoom-out operation, as shown in Fig.12 Figure (d), the electronic device can zoom out the main image, and re-stack the overlay image in the lock screen image on top of the adjusted main image, and re-set the transparent gradient effect for the overlay image. Also, for example, if the user performs an operation to move the main image to the left in the image adjustment interface 1200, then in response to this movement operation, refer to Fig.12 Figure (e), the electronic device can move the main image to the left, and re-stack the overlay image in the lock screen image on top of the adjusted main image, and re-set the transparent gradient effect for the overlay image.

[0155] When the user is satisfied with the adjusted main image, the user can click the confirmation control 1202 (represented by a tick in the figure). If the user regrets the adjustment of the main image, the user can click the cancel control 1203 (represented by a cross in the figure). If the user is satisfied with the adjusted main image and also wishes to adjust the overlay image, then the user can follow the following Fig.12 scenarios to adjust the overlay image.

[0156] In another application scenario, if the user is not satisfied with the overlay image of the lock screen image displayed in the lock screen preview page 702, then the user can zoom in or out the overlay image in the lock screen image of the lock screen preview page 702, and can also move the position of the overlay image. For example, in the case of displaying the image adjustment interface 1200 shown in Figure (a) as shown in Fig.12 , the user can click on the adjustment overlay image control 1204 in the image adjustment interface 1200; in response to the click operation on the adjustment overlay image control 1204, the electronic device allows the user to adjust the size and position of the overlay image in the lock screen image. For example, if the user performs a two-finger zoom-in operation in the image adjustment interface 1200, then in response to this two-finger zoom-in operation, as shown in Fig.13In figure (b), the electronic device can magnify the superimposed image, re-superimpose the magnified superimposed image on the upper layer of the main image, and re-set a transparent gradient effect for the magnified superimposed image. If the user performs a two-finger pinch-to-zoom out operation in the image adjustment interface 1200, in response to this two-finger pinch-to-zoom out operation, as Fig.13 shown in figure (c), the electronic device can reduce the superimposed image, re-superimpose the adjusted superimposed image on the upper layer of the main image, and re-set a transparent gradient effect for the reduced superimposed image. For another example, if the user performs an operation of moving the superimposed image to the left in the image adjustment interface 1200, then in response to this movement operation, see Fig.13 figure (d). The electronic device can move the superimposed image to the left. During the process of moving the superimposed image, the electronic device can continuously superimpose the superimposed image on the upper layer of the main image according to the moving position of the superimposed image, and set a transparent gradient effect for the superimposed image.

[0157] It should be noted that when the superimposed image is superimposed on the upper layer of the main image, the part of the superimposed image that overlaps with the main image in the overlapping area is displayed, and the part of the superimposed image that does not overlap with the main image in the overlapping area is not displayed. During the adjustment process of the superimposed image, it is not the displayed part that is adjusted, but the entire superimposed image. The overlapping area is a pre-set area where the superimposed image overlaps with the main image.

[0158] In another application scenario, the user can not only adjust the superimposed image in the manner shown above Fig.13 but also adjust it in other ways. For example, after the user clicks the superimposed image adjustment control 1204, see Fig.14 figure (a). A slider 1205 is displayed in the image adjustment interface 1200. The user can move the position of the slider 1205 up and down. By moving the position of the slider 1205, the size of the overlapping area where the superimposed image overlaps with the main image can be adjusted. For example, when the user moves the slider upward, in response to the user's upward movement operation of the slider 1205, see Fig.14 figure (b). The electronic device increases the size of the overlapping area between the superimposed image and the main image, and during the process of increasing the overlapping area, continuously superimposes the superimposed image on the upper layer of the main image, and sets a transparent gradient effect for the superimposed image. For another example, when the user moves the slider 1205 downward, in response to the user's downward movement operation of the slider 1204, see Fig.14 figure (c). The electronic device reduces the size of the overlapping area between the superimposed image and the main image, and during the process of reducing the overlapping area, continuously superimposes the superimposed image on the upper layer of the main image, and sets a transparent gradient effect for the superimposed image.

[0159] In yet another application scenario, if the user is not satisfied with the lock screen image displayed on the lock screen preview page 702.

[0160] with its content, then the user can replace the main image and / or the overlay image in the lock screen image. Refer to Fig.15 Figure (a) therein. The user can click on the image replacement control 75 on the lock screen preview page 702. In response to the click operation on the image replacement control 75, as Fig.15 shown in Figure (b) therein, the electronic device can pop up a window 7013 from the bottom of the wallpaper editing interface 700. The image options in the gallery are displayed in the window 7013. Suppose the user selects an image A from these images. After the electronic device closes the window 7013, the electronic device can perform matting on the image A to obtain the main image of the image A, and replace the main image in the lock screen image with the main image of the image A. In this case, the electronic device can also perform color sampling on the main image of the image A to obtain the target color system corresponding to the main image of the image A. The electronic device can update the background color of the lock screen image to the color corresponding to the target color system, and obtain a preset overlay image B corresponding to the target color system according to the target color system; the mobile phone can replace the overlay image in the lock screen image with the preset overlay image B, that is, refer to Fig.15 Figure (c) therein. The electronic device can superimpose and display the preset overlay image B on the main image of the image A, and the display effect of the preset overlay image B is a transparent gradient display effect.

[0161] In yet another application scenario, after the mobile phone displays the lock screen image shown in Figure (c) therein, if the user is not satisfied with the preset overlay image B, then refer to Fig.15 Figure (a) therein. The user can continue to click on the image replacement control 75 on the lock screen preview page 702. In response to the click operation on the image replacement control 75, the mobile phone can display a window 7013 as shown in Fig.16 Figure (b) therein. Two types of image options corresponding to the gallery can be displayed in the window 7013. One type of image option is for the main image, and the other type of image option is for the overlay image. The user can select an image C from the image options for the overlay image. After the electronic device closes the window 7013, the electronic device can replace the preset overlay image B with the image C, that is, refer to Fig.16 Figure (c) therein. The mobile phone can superimpose and display the image C on the main image of the image A, and the display effect of the image C is a transparent gradient display effect. Fig.15 Figure (c) therein. The mobile phone can superimpose and display the image C on the main image of the image A, and the display effect of the image C is a transparent gradient display effect.

[0162] In yet another application scenario, while the user customizes and selects the main image, the user can also customize and select the overlay image. Exemplarily, when the electronic device displays the pop-up window 7013, the user can select Image A as the original image and select Image C as the overlay image. After the electronic device closes the pop-up window 7013, the electronic device can perform matte extraction on Image A to obtain the main image of Image A, and replace the main image in the lock screen image with the main image of Image A. At the same time, the electronic device can also perform a color picking operation on the main image of Image A to obtain the target color system corresponding to the main image of Image A. The mobile phone can update the background color of the lock screen image to the color corresponding to the target color system. In addition, the mobile phone can also replace the overlay image in the lock screen image with this Image C, that is, the mobile phone can superimpose and display Image C on the main image of Image A, and the display effect of this Image C is a transparent gradient display effect. The lock screen image can refer to the lock screen image shown in Figure (c) of the above Fig.15 as shown.

[0163] It should be noted that for the main image and overlay image custom-selected by the user, the user can adjust the custom-selected main image and overlay image in the manner shown in the above Fig.14 and Fig.15 , or can also adjust by other means. This application embodiment will not elaborate on this one by one.

[0164] In yet another application scenario, the user can not only replace the main image and the overlay image in the manner described in the above Fig.15 and Fig.16 , but also replace them by other means. For example, after the electronic device displays the wallpaper editing interface 700 shown in Figure (a) of Fig.17 , the user can click on the personalized decoration control 73. In response to this click operation, as shown in Figure (b) of Fig.17 , the electronic device can pop up a pop-up window 7014 from the bottom of the wallpaper editing interface 700. Multiple color options, multiple main image options, and multiple overlay image options are displayed in the pop-up window 7014. The user can select a main image D from the multiple main image options. In response to the selection operation of this main image, the electronic device can replace the main image in the lock screen image with the main image D. In this case, the electronic device can also perform a color picking operation on the main image D to obtain the target color system corresponding to the main image D. The electronic device can update the background color of the lock screen image to the color corresponding to the target color system, and obtain a preset overlay image G corresponding to the target color system according to the target color system; the mobile phone can replace the overlay image in the lock screen image with this preset overlay image G, that is, see Fig.17In Figure (c), the electronic device can superimpose and display a preset superimposed image G on the main image G, and the display effect of the preset superimposed image G is a transparent gradient display effect.

[0165] In yet another application scenario, the user can also adjust the background color of the lock screen image separately. For example, after the electronic device displays the wallpaper editing interface 700 as shown in Figure (a) below, the user can click on the personalized decoration control 73. In response to this click operation, as Fig.18 shown in Figure (b) below, the electronic device can pop up a window 7014 from the bottom of the wallpaper editing interface 700, and multiple color options are displayed in the window 7014. The user can use these color options to adjust the background color of the lock screen image in the lock screen preview page 702. Suppose the user selects a color, then in response to the selection operation of this color, as Fig.18 shown in Figure (c) below, the electronic device can set the background color of the lock screen image in the lock screen preview page 702 to this color, so that the user can view the display effect of the lock screen image. After that, if the user determines that the setting of the lock screen image is completed, then as Fig.18 shown in Figure (c) below, the user can click on the folding control 70141. In response to this click operation, as Fig.18 shown in Figure (d) below, the electronic device can close the window 7014. Fig.18 After editing the lock screen image in one or more of the above ways, if the user determines that the wallpaper on the current lock screen preview page 702 can meet the requirements, then as

[0166] shown in Figure (a) below, the user can click on the application control 71 in the lock screen preview interface 702. In response to this click operation, as Fig.19 shown in Figure (b) below, the electronic device can set the lock screen image of the lock screen preview page 702 as the lock screen image of the lock screen interface 800. Fig.19 After that, if the user wants to edit the wallpaper again during the use of the electronic device, for example, the user can perform a first gesture operation on the lock screen interface 800. In response to the first gesture operation, the electronic device can display the wallpaper editing interface 700, and the wallpaper editing interface 700 displays the lock screen preview page 702 and relevant function buttons for editing the lock screen image wallpaper. At this time, the lock screen image displayed in the lock screen preview page 702 is the lock screen image that the user edited last time. In this case, the user can continue to edit the lock screen image that was edited last time. For example, the user can re-select a wallpaper template through the lock screen style control 72 in a similar way as

[0167] above, or can change the depth of field effect and background blur degree in the lock screen image that was edited last time in a similar way as Fig.10 above, or can Fig.11 change the depth of field effect and background blur degree in the lock screen image that was edited last time in a similar way as Fig.12 scale and / or move the main image in the lock screen image completed in the previous edit, or can be in a similar Fig.13 way to scale and / or move the overlay image in the lock screen image completed in the previous edit, or can be in a similar Fig.14 way to adjust the overlapping area between the main image and the overlay image in the lock screen image completed in the previous edit; or can be in a similar Fig.15 or Fig.17 way to replace the main image, overlay image, and background color in the lock screen image completed in the previous edit; or can be in a similar Fig.16 way to replace the overlay image in the lock screen image completed in the previous edit; or can be in a similar Fig.18 way to replace the background color in the lock screen image completed in the previous edit.

[0168] Next, the specific process of editing the desktop wallpaper based on the wallpaper editing interface 700 will be described.

[0169] The embodiments of the present application provide capabilities such as following the lock screen, color setting, custom selection, blurring, and scaling for the desktop wallpaper. Through these capabilities, users can edit personalized and characteristic wallpapers.

[0170] As an example, the electronic device displays a wallpaper editing interface 700 as shown in Fig. 20 (a) in the figure. The wallpaper editing interface 700 displays a lock screen preview page 702 and related function controls 701 for editing the lock screen image. The user swipes left in the wallpaper editing interface 700, and then as shown in Fig. 20 (b) in the figure, the wallpaper editing interface 700 displays a desktop preview page 703 and related function controls for editing the desktop wallpaper. Assume that the user clicks on the follow lock screen control 76 in the wallpaper editing interface 700. In response to this click operation, as shown in Fig. 20 (c) in the figure, the electronic device displays the original image in the lock screen image of the lock screen preview page 702 on the desktop preview page 703.

[0171] In some possible implementations, after the user clicks on the follow lock screen control 76 in the wallpaper editing interface 700, the desktop preview page 703 is in the follow lock screen state. In this case, any operation performed by the user on the main image in the lock screen preview page 702 will be synchronized to the desktop preview page 703. Specifically, if the user zooms in on the main image in the lock screen preview page 702, the original image of the main image will also be zoomed in, and the wallpaper on the desktop preview page 703 will be synchronized and zoomed in; if the user zooms out on the main image in the lock screen preview page 702, the original image of the main image will also be zoomed out, and the wallpaper on the desktop preview page 703 will be synchronized and zoomed out; if the user moves the main image in the lock screen preview page 702, the original image of the main image will also be moved, and the wallpaper on the desktop preview page 703 will be synchronized and moved.

[0172] As an example, after the electronic device displays the wallpaper editing interface 700 as shown in Figure (a) of Fig.21 , the user can click on the color control 77. In response to this click operation, as shown in Figure (b) of Fig.21 , the electronic device can pop up a window 7015 from the bottom of the wallpaper editing interface 700. The window 7015 displays a gradient color switch 7161 and multiple color options. The user can set the desktop wallpaper to a solid color wallpaper or a gradient color wallpaper through the gradient color switch 7161, and the user can set the color of the desktop wallpaper through these color options. Suppose the user selects a color. Then, in response to the selection operation of this color and when the gradient color switch 7161 is turned off, as shown in Figure (c) of Fig.21 , the electronic device can display a solid color wallpaper of this color on the desktop preview page 703, so that the user can view the wallpaper display effect. After that, if the user determines to complete the color setting, as shown in Figure (c) of Fig.21 , the user can click on the collapse control 7162. In response to this click operation, as shown in Figure (d) of Fig.21 , the electronic device can close the window 7015.

[0173] As an example, when the desktop preview page 703 and the related function controls 701 for editing the desktop wallpaper are displayed in the wallpaper editing interface 700, the user can select an image from the images in the gallery or the wallpaper images pre-set in the electronic device as the wallpaper for the desktop preview page 703 through the select wallpaper control 78 in the wallpaper editing interface 700. This process is similar to the related process of selecting an image in the above Fig.14 , and will not be elaborated here.

[0174] As an example, when the wallpaper editing interface 700 displays the desktop preview page 703 and the related function controls for editing the desktop wallpaper, the user can adjust the blur degree of the wallpaper on the desktop preview page 703 through the blur control 79 in the wallpaper editing interface 700. This process is similar to the related process of adjusting the blur degree in the above text Fig.11 and will not be elaborated here.

[0175] As an example, when the wallpaper editing interface 700 displays the desktop preview page 703 and the related function controls for editing the desktop wallpaper, the user can zoom in or out the wallpaper on the desktop preview page 703, and can also move the position of the wallpaper. This process is similar to the related process of adjusting the size or position of the main image in the above text Fig.12 and will not be elaborated here.

[0176] After editing the desktop wallpaper in one or more of the above ways, if the user determines that the wallpaper on the current desktop preview page 703 can meet the requirements, the user can click the apply control 71 in the wallpaper editing interface 700. In response to this click operation, the electronic device can set the wallpaper on the desktop preview page 703 as the desktop wallpaper.

[0177] It should be noted that since the wallpaper editing interface 700 includes the lock screen preview page 702 and the desktop preview page 703, after the user clicks the apply control in the wallpaper editing interface 700, the electronic device can set the wallpaper on the current lock screen preview page 702 as the lock screen image, and at the same time set the wallpaper on the current desktop preview page 703 as the desktop wallpaper.

[0178] Another point to note is that in some embodiments, if the electronic device enters the wallpaper editing interface 700 from the lock screen interface 800, then after the user clicks the apply control 71 in the wallpaper editing interface 700, in response to this click operation, the electronic device can display the lock screen interface 800 and display the edited lock screen image on the lock screen interface 800. And if the electronic device enters the wallpaper editing interface 700 from the desktop, then after the user clicks the apply control 71 in the wallpaper editing interface 700, in response to this click operation, the electronic device can display the desktop and display the edited desktop wallpaper on the desktop.

[0179] In some other embodiments, if the user clicks on the application control 71 in the wallpaper editing interface 700 when the lock screen preview page 702 is displayed in the wallpaper editing interface 700, then in response to this click operation, the electronic device can display the lock screen interface 800 and display the edited lock screen image on the lock screen interface 800. And if the user clicks on the application control 71 in the wallpaper editing interface 700 when the desktop preview page 703 is displayed in the wallpaper editing interface 700, then in response to this click operation, the electronic device can display the desktop and display the edited desktop wallpaper on the desktop.

[0180] In still some other embodiments, after the user clicks on the application control 71 in the wallpaper editing interface 700, in response to this click operation, the electronic device can display the desktop and display the edited desktop wallpaper on the desktop.

[0181] It should be noted that the application scenarios described above in the embodiments of the present application are used as examples for illustration and do not limit the embodiments of the present application. Figure 1-Figure 21 shown are used as examples for illustration and do not limit the embodiments of the present application.

[0182] Based on the application scenarios provided in the above embodiments, the implementation environment provided in the embodiments of the present application will be introduced next. Please refer to Fig. 22 , Fig. 22 which is a schematic diagram of a software system provided in the embodiments of the present application. Referring to Fig. 22 Figure (a) therein, the software system may include an application layer, and the application layer may include a lock screen application, a desktop application, and a gallery application. Moreover, the software system can interact with the file system in the hardware layer.

[0183] Both the lock screen application and the desktop application can instruct the gallery application to display the wallpaper editing interface. After receiving the instruction from the lock screen application or the desktop application, the gallery application can load the wallpaper editing interface, that is, load the function controls, the lock screen preview page, and the desktop preview page. Among them, the gallery application can obtain the lock screen image data (which can also be referred to as the lock screen image data) and the desktop wallpaper data from the file system, and display the lock screen image on the lock screen preview page according to the lock screen image data, and display the desktop wallpaper on the desktop preview page according to the desktop wallpaper data.

[0184] Fig. 22 Figure (b) therein is a schematic diagram of a technical architecture provided in the embodiments of the present application. Only the modules related to the embodiments of the present application are shown in this technical architecture diagram. These modules can be set in the gallery application or can be other applications independent of the gallery application. For example, a separate wallpaper editing application. In actual applications, other modules may also be included in this technical architecture diagram and will not be shown one by one.

[0185] As Fig. 22 As shown in Fig. 22 , the gallery application may include a functional main module, a lock screen view module, a desktop view module, and view modules corresponding to each layer, such as a double exposure view module, a color view module, an original layer view module, a clock view module, etc.

[0186] The functional main module is used to implement various editing functions during the wallpaper editing process. The functional main module can interact with the outside world, such as interacting with the lock screen application, the desktop application, and the file system. And, the functional main module can implement parsing work related to wallpaper data during the wallpaper editing process. In addition, the functional main module can also save the operation data of each editing operation during the wallpaper editing process.

[0187] The lock screen view module is used to display the lock screen image on the lock screen preview page and the lock screen interface according to the lock screen image data.

[0188] The desktop view module is used to display the desktop wallpaper on the desktop preview page and the desktop according to the desktop wallpaper data.

[0189] The double exposure view module is used to superimpose and display the main image and the superimposed image.

[0190] The original layer view module is used to display the original image (which can also be called the initial image) in the original layer.

[0191] The clock view module is used to display the system time indicator in the clock layer.

[0192] The color view module is used to render the color of the color background layer.

[0193] After describing the technical architecture diagram provided in the embodiments of the present application, next, the method for displaying the lock screen image provided in the embodiments of the present application will be introduced. Please refer to Fig.23 , Fig.23 which is a schematic flowchart of a method for entering the wallpaper editing interface shown according to an exemplary embodiment. As an example and not a limitation, this method is applied to an electronic device and is described by taking the interaction of multiple modules in the electronic device as an example. This method may include the following parts or all of the content:

[0194] Step 2301: The lock screen application receives a first gesture operation.

[0195] The first gesture operation may be a gesture operation defined in advance. For example, the first gesture operation may be a two-finger pinch operation, a long press operation, a double click operation, an S-shaped swipe operation, etc. The embodiments of the present application do not limit this.

[0196] For example, assuming that the first gesture operation is a two-finger pinch operation, as Figure 8As shown in Figure (a), when the electronic device displays the lock screen interface 800, the user can perform a two-finger pinch gesture on the lock screen interface 800. In this case, the lock screen application can receive this two-finger pinch gesture on the lock screen interface 800. Among them, the two-finger pinch gesture triggered on the lock screen interface 800 is used to indicate entering the wallpaper editing function, that is, to indicate the display of the wallpaper editing interface.

[0197] Step 2302: In response to the first gesture operation, the lock screen application sends a first message to the gallery application.

[0198] Exemplarily, the first message can be an intent message.

[0199] The first message can carry source information, and this source information is used to indicate which application the first message comes from. For example, the source information in the first message can be the application identifier of the lock screen application.

[0200] In some implementations, when the lock screen image has not been edited by the wallpaper editing method provided by the embodiments of the present application, the lock screen image is generally the default wallpaper image. In this case, the first message can also carry the storage path of this wallpaper image.

[0201] Since the first gesture operation triggered on the lock screen interface is used to indicate entering the wallpaper editing function, after the lock screen application receives the first gesture operation, it can send a first message to the gallery application to indicate that the gallery application displays the wallpaper editing interface.

[0202] Step 2303: After the function main body module in the gallery application receives the first message, if it determines that the first message comes from the lock screen application, it displays function controls.

[0203] Exemplarily, as Figure 8 shown in Figures (b) and (c), the function controls can include main function controls, such as a return control, an application control, etc., and can also include related function controls for editing the lock screen image, such as an image replacement control, a lock screen style control, a personality decoration control, a depth of field effect control, etc., and include related function controls for editing the desktop wallpaper, such as a follow lock screen control, a color control, a wallpaper selection control, a blur control, etc.

[0204] The function main body module can determine whether the first message comes from the lock screen application according to the source information in the first message.

[0205] In some embodiments, if the functional main body module determines that the first message comes from the lock screen application, the functional main body module may determine that the display area of the lock screen preview page is a first display area preset within the screen, and the display area of the desktop preview page is a second display area preset, where only a part of the second display area is located within the screen or the second display area is completely located outside the screen. In this case, as Figure 8 shown in figure (b) of

[0206] The size of the first display area is the same as that of the second display area. The area ratio (i.e., the aspect ratio of the area) of the first display area and the area ratio of the second display area are both the same as the screen ratio (i.e., the aspect ratio of the screen) of the electronic device.

[0207] For example, as Fig.24 shown, when the first message comes from the lock screen application, the functional main body module may determine that the display area of the lock screen preview page is a preset display area E within the screen, and the display area of the desktop preview page is a preset display area F. Only a very small part of the display area F is located within the screen, and most of it is located outside the screen. In this case, the user can see the complete lock screen preview page, while only seeing a very small part of the desktop preview page.

[0208] In some embodiments, if the functional main body module determines that the first message comes from the lock screen application, it may also display a mask layer. For example, as Figure 7 shown, the mask layer 704 is the bottommost layer of the wallpaper editing interface 700. The function buttons, the lock screen preview page 702, and the desktop preview page 703 in the wallpaper editing interface 700 are all displayed above the mask layer 704.

[0209] Exemplarily, the mask layer may be a blurred mask layer, which refers to a mask layer obtained through blurring processing.

[0210] As an example, the functional main body module may obtain the corresponding image according to the storage path of the image carried in the first message (i.e., the wallpaper image described above), or the functional main body module may obtain a preset image. Then, the functional main body module may adjust the image according to the screen information so that the size of the image is the screen size, and then perform blurring processing on the image to obtain the mask layer, and then display the mask layer.

[0211] In a possible implementation, the operation of the functional body module to adjust the image according to the screen information may be: cropping the image according to the screen ratio, where the image ratio (i.e., the aspect ratio of the image height to width) of the cropped image is the same as the screen ratio; dividing the screen height by the height of the cropped image, or dividing the screen width by the width of the cropped image, to obtain a scaling ratio; and scaling the cropped image according to the scaling ratio, so that the size of the scaled image is the screen size.

[0212] Step 2304: The functional body module sends a wallpaper data acquisition request to the file system.

[0213] This wallpaper data acquisition request is used to request the acquisition of the lock screen image file and the desktop wallpaper file.

[0214] The lock screen image file is a file containing the relevant data of the current lock screen image of the electronic device.

[0215] The desktop wallpaper file is a file containing the relevant data of the current desktop wallpaper of the electronic device.

[0216] Step 2305: After receiving the wallpaper data acquisition request, the file system sends the lock screen image file and the desktop wallpaper file to the functional body module.

[0217] After receiving the wallpaper data acquisition request sent by the functional body module in the gallery application, the file system may send the first file of the lock screen image as the lock screen image file to the functional body module, and send the first file of the desktop wallpaper as the desktop wallpaper file to the functional body module.

[0218] The first file of the lock screen image is the lock screen image file that the gallery application needs to use when editing the lock screen image. In some implementations, when the lock screen image has not been edited by the wallpaper editing method provided in the embodiments of the present application, the lock screen image may be a preset third image, and then the first file of the lock screen image may contain the storage path of the third image.

[0219] The first file of the desktop wallpaper is the desktop wallpaper file that the gallery application needs to use when editing the desktop wallpaper. In some implementations, when the desktop wallpaper has not been edited by the wallpaper editing method provided in the embodiments of the present application, the desktop wallpaper may be a preset fourth image, and then the first file of the desktop wallpaper may contain the storage path of the fourth image.

[0220] Both the third image and the fourth image are some wallpaper images pre-installed in the electronic device. The third image and the fourth image may be the same or different, and the embodiments of the present application do not limit this.

[0221] Step 2306: After receiving the lock screen image file and the desktop wallpaper file, the functional main module obtains a third image according to the lock screen image file, and obtains a fourth image according to the desktop wallpaper file.

[0222] After the functional main module receives the lock screen image file, when the lock screen image file contains the storage path of the third image, the third image can be obtained according to the storage path.

[0223] After the functional main module receives the desktop wallpaper file, when the desktop wallpaper file contains the storage path of the fourth image, the fourth image can be obtained according to the storage path.

[0224] It should be noted that in the embodiments of the present application, after the functional main module obtains an image (such as the third image or the fourth image) according to the storage path, the obtained image is saved in the memory and subsequent processing is performed on it, rather than directly processing the original image in the storage path. This can avoid destroying the original image during related processing.

[0225] It should be noted that the images described in the embodiments of the present application may exist in the form of image data in the electronic device before being displayed, and when being displayed, they can be drawn (Draw) and rendered according to the image data to present an image on the screen. Therefore, the above-mentioned obtaining of the third image can be understood as obtaining the third image data, and the above-mentioned obtaining of the fourth image can be understood as obtaining the fourth image data.

[0226] Step 2307: The functional main module processes the third image to obtain a first display image, and processes the fourth image to obtain a second display image.

[0227] The first display image is the image displayed on the lock screen preview page. The size of the first display image is the same as the size of the display area of the lock screen preview page.

[0228] The second display image is the image displayed on the desktop preview page. The size of the second display image is the same as the size of the display area of the desktop preview page.

[0229] In some embodiments, the operation of the functional main module processing the third image to obtain the first display image may include the following steps (1) to (4).

[0230] (1) The functional main module determines the initial scaling ratio of the third image according to the screen size and the size of the third image, and scales the third image according to the initial scaling ratio to obtain a full-screen image.

[0231] The initial scaling ratio is used to process the third image into a full-screen image, and the full-screen image refers to an image that can cover the screen.

[0232] Specifically, the height of the screen can be divided by the height of the third image to obtain a first value, and the width of the screen can be divided by the width of the third image to obtain a second value. Then, the larger of the first value and the second value is used as the initial scaling ratio of the third image.

[0233] (2) The functional main body module determines the target area in the full-screen image.

[0234] The target area in the full-screen image is the area that can be displayed on the screen in the full-screen image. The target area in the full-screen image can be an area centered on the center of the full-screen image and having the same area ratio as the screen ratio.

[0235] Exemplarily, the size of the target area in the full-screen image can be the same as the screen size or can also be smaller than the screen size, and the embodiments of the present application do not limit this.

[0236] For example, assuming that the screen ratio is 16:9 and the image ratio of the full-screen image is 4:3, then the target area in the full-screen image can be as Fig.25 shown.

[0237] (3) The functional main body module crops the image in the target area in the full-screen image to obtain a target image.

[0238] (4) The functional main body module scales the target image according to a specific scaling ratio to obtain a first display image.

[0239] The specific scaling ratio is used to process the target image into an image that can be displayed on the lock screen preview page. Exemplarily, the height (or width) of the display area of the lock screen preview page can be divided by the height (or width) of the screen to obtain the specific scaling ratio.

[0240] It should be noted that the operation of the functional main body module to process the fourth image to obtain the second display image is similar to the operation of the functional main body module to process the third image to obtain the first display image, and the embodiments of the present application will not elaborate on this.

[0241] Step 2308: The functional main body module sends a first display request to the lock screen view module and sends a second display request to the desktop view module.

[0242] The first display request is used to request to display the lock screen preview page. The first display request can carry the first display image and further can also carry the position information of the display area corresponding to the first display image (i.e., the display area of the lock screen preview page).

[0243] The second display request is used to request the display of a desktop preview page. The second display request may carry a second display image, and may further carry the position information of the display area corresponding to the second display image (i.e., the display area of the desktop preview page).

[0244] The position information of a certain display area is the position information of this display area in the screen coordinate system. Thus, the corresponding position of this display area in the screen can be located according to the position information of this display area.

[0245] Step 2309: After the lock screen view module receives the first display request, it displays the lock screen preview page.

[0246] Specifically, the lock screen view module may display the first display image at the corresponding position in the screen according to the position information of the display area carried by the first display request, so as to implement the display of the lock screen preview page.

[0247] Step 2310: After the desktop view module receives the second display request, it displays the desktop preview page.

[0248] Specifically, the desktop view module may display the second display image at the corresponding position in the screen according to the position information of the display area carried by the second display request, so as to implement the display of the desktop preview page.

[0249] After displaying the function control, the lock screen preview page, and the desktop preview page through the above steps, the display of the wallpaper editing interface is completed. For example, the displayed wallpaper editing interface may be Figure 8 the wallpaper editing interface 700 shown in Figure (b) of

[0250] After displaying the wallpaper editing interface, the user can edit the lock screen image or the desktop wallpaper based on the wallpaper editing interface to display the edited lock screen image and / or the edited desktop wallpaper. Next, the specific implementation process of displaying the lock screen image will be described in detail.

[0251] Please refer to Fig.26 , Fig.26 which is a flowchart of a method for displaying a lock screen image provided by an embodiment of the present application. Fig.26 The shown flowchart is used to illustrate the example of displaying a lock screen image after the user selects an image template based on the wallpaper editing interface. Refer to Fig.26 ,this method may include the following steps:

[0252] Step 2601: The function main body module receives a click operation on the lock screen style control.

[0253] When the lock screen preview page is displayed on the wallpaper editing interface, various editing operations can be performed on the lock screen image of the lock screen preview page. In some cases, if the user wants to change the style of the lock screen image, as shown in Fig.10 Figure (a) therein, the user can click on the lock screen style control, and the function main module will receive the click operation on the lock screen style control.

[0254] Step 2602: In response to the click operation on the lock screen style control, the function main module displays a first pop-up window.

[0255] Exemplarily, as shown in Fig.10 Figure (b) therein, multiple image template options are displayed in the first pop-up window 7011. Optionally, image options in the gallery and some image options preset in the electronic device can also be displayed.

[0256] Step 2603: The function main module receives the selection operation on the image template option 1.

[0257] Exemplarily, as shown in Fig.10 Figure (b) therein, the user can select this image template by clicking on the image template option 1 displayed in the first pop-up window 7011, and the function main module will receive the selection operation on this image template option 1. Exemplarily, the image template option 1 is the option corresponding to image template 1.

[0258] Step 2604: In response to the selection operation on this image template option 1, the function main module obtains the template identifier corresponding to this image template option 1.

[0259] A template identifier uniquely identifies an image template. The template identifier corresponding to this image template option 1 is the template identifier of the image template 1 indicated by this image template option 1.

[0260] The image templates in the embodiments of the present application can be preset. Each image template can include multiple layers, and the types and hierarchies of the multiple layers included in each image template can be preset.

[0261] Exemplarily, as shown in Figure 4 , an image template can successively include a original layer and a clock layer from the bottommost layer to the topmost layer; or can include a original layer, a color background layer, a clock layer, and a cutout layer; or can include a original layer, a clock layer, a cutout layer, and a superimposed layer; or can include a original layer, a color background layer, a clock layer, a cutout layer, and a superimposed layer. Of course, not limited to these examples, the multiple layers included in an image template can be flexibly set according to actual needs.

[0262] Step 2605: The function main module sends an image template data acquisition request to the file system.

[0263] The image template data acquisition request is used to request a file containing relevant data of Image Template 1. The image template data acquisition request may carry the template identifier of Image Template 1.

[0264] Step 2606: After receiving the image template data acquisition request, the file system sends an image template file to the functional main module.

[0265] Specifically, the file system can obtain the corresponding image template file according to the template identifier and send the image template file to the functional main module.

[0266] Exemplarily, the image template file includes information such as the layer set (layers) information of the image template, the first offset information, the second offset information, the first scale ratio information, the second scale ratio information, the blur factor information, the depth of field effect switch state information (isDepthofFieldSupported), the overlapping area range information, etc.

[0267] The layer set information includes the layer basic information of each layer in a plurality of layers, and the layer basic information of the plurality of layers can be organized in a hierarchical order in the layer set information. Exemplarily, the layer basic information of the original layer may include a layer identifier, a layer type, an image storage path, etc. The layer basic information of the color background layer may include a layer identifier, a layer type, a color setting type, a color value, etc. The layer basic information of the overlay layer may include a layer identifier, a layer type, an image storage path, a color setting type, a color value, etc. The layer basic information of the clock layer may include a layer identifier, a layer type, a font, a color value, a color setting type, etc. The layer basic information of the cutout layer may include a layer identifier, a layer type, an image storage path, etc.

[0268] The first offset information is determined according to the user's movement operation on the main image and is used to indicate how much the center of the moved main image is offset relative to the center of the screen. The first offset information acts on the original layer and the cutout layer. It should be noted that in the case where the user has not moved the main image, the offset in the first offset information can be defaulted to [0,0].

[0269] The second offset information is determined according to the user's movement operation on the overlay image and is used to indicate how much the center of the moved overlay image is offset relative to the center of the screen. The second offset information acts on the overlay layer. It should be noted that in the case where the user has not moved the overlay image, the offset in the second offset information can be defaulted to [0,0].

[0270] The first scaling ratio information is determined based on the user's scaling operation on the main image, and is used to indicate how much the scaled main image has been scaled compared to the original. The first scaling ratio information acts on the original layer and the cutout layer. It should be noted that in the case where the user has not scaled the main image, the scaling ratio in the first scaling ratio information can be defaulted to 1.

[0271] The second scaling ratio information is determined based on the user's scaling operation on the superimposed image, and is used to indicate how much the scaled superimposed image has been scaled compared to the original. The second scaling ratio information acts on the superimposed layer. It should be noted that in the case where the user has not scaled the superimposed image, the scaling ratio in the second scaling ratio information can be defaulted to 1.

[0272] The blurriness information is determined based on the blurriness adjusted by the user, and is used to indicate the blurriness of the main image. The blurriness information acts on the original layer. It should be noted that in the case where the user has not adjusted the blurriness, the blurriness in the blurriness information can be defaulted to 0.

[0273] The depth-of-field effect switch status information is used to indicate whether the depth-of-field effect switch is in the on state or the off state. The depth-of-field effect switch status information acts on the cutout layer. It should be noted that in the case where the user has not operated the depth-of-field effect switch, the status in the depth-of-field effect switch status information can be defaulted to the on state.

[0274] The overlapping area range information is used to indicate the overlapping range between the main image and the superimposed image. The overlapping area range information acts on the cutout layer and the superimposed layer. It should be noted that in the case where the user has not adjusted the overlapping area range, the range in the overlapping area range information is the preset range.

[0275] It should be noted that the layer basic information of each layer in the layer set information included in the image template file can be preset. Moreover, the offset in the first offset information included in the image template file can be defaulted to [0,0], the offset in the second offset information can be defaulted to [0,0], the scaling ratio in the first scaling ratio information can be defaulted to 1, the scaling ratio in the second scaling ratio information can be defaulted to 1, the blurriness in the blurriness information can be defaulted to 0, the status in the depth-of-field effect switch status information can be defaulted to the on state. The range in the overlapping area range information can be defaulted to the preset range.

[0276] In some embodiments, the image template file can be a JSON file. The JSON file can save data in the form of "KEY-VALUE pairs", where each "KEY" has its unique "VALUE", and the "VALUE" can also have its own sub "KEY-VALUE pairs". This structure can well record the above-mentioned layer set information, first offset information, second offset information, first scaling ratio information, second scaling ratio information, blur degree information, depth of field effect switch state information, overlapping area range information, etc.

[0277] As an example, a JSON file can contain various information as shown in Fig. 27 the following. Among them, "type" is the layer type. For example, the meanings of the values of "type" are: [0] original layer, [1] color background layer, [2] decoration layer, [3] clock layer, [5] cutout layer. Among them, "colorPolicy" is the color setting type. For example, the meanings of the values of "colorPolicy" are: [0] color setting not allowed, [1] main color, can be set separately, [4] select clock color. Among them, "isDepthofFieldSupported" is the depth of field effect switch state information. For example, the meanings of the values of "isDepthofFieldSupported" are: [true] on state, [false] off state.

[0278] It should be noted that the JSON file has a simple and efficient format, with simple syntax rules and more efficient data parsing. Therefore, when the image template file is a JSON file, the functional main module can obtain the image template file from the file system faster and can parse the image template file faster.

[0279] Step 2607: After receiving the image template file, the functional main module parses the image template file to obtain image display information, which includes the display information of each layer in multiple layers.

[0280] For example, the display information of the clock layer can include the layer identifier, level, clock setting information (including layout, font, color value) and visibility of the clock layer.

[0281] For example, for other layers except the clock layer, such as the original layer, color background layer, cutout layer, etc., the display information of the layer can include the layer identifier, level, display image and visibility of the layer. The display image is the image to be displayed on the lock screen preview page.

[0282] In some embodiments, the operation of step 2607 can include the following steps (1) to step (5).

[0283] (1) The functional main body module determines the level of the clock layer and the clock setting information according to the layer set information in the image template file, and determines the level of each layer except the clock layer and the full-screen image.

[0284] For other layers except the clock layer, such as the original layer, color background layer, decoration layer, cut-out layer, etc., the layer has an initial image. In the embodiments of the present application, the initial image can be processed into a full-screen image, and the full-screen image refers to an image that can fill the screen.

[0285] As an example, step (1) may include the following steps A to E:

[0286] Step A: The functional main body module determines the number of layers according to the layer set information.

[0287] Exemplarily, the functional main body module can determine the number of layer identifications in the layer set information as the number of layers. For example, for Fig. 27 the shown json file, the number of "id" in "layers" can be determined as the number of layers, that is, the number of layers can be determined to be 5.

[0288] Hereinafter, it is assumed that the number of layers is k, and k is an integer greater than or equal to 2.

[0289] Step B: The functional main body module determines that i is 1.

[0290] Step C: The functional main body module determines whether the i-th layer in the layer set information is the clock layer.

[0291] Exemplarily, the functional main body module can determine whether the i-th layer is the clock layer according to the layer type in the layer basic information of the i-th layer.

[0292] Step D: If the i-th layer is the clock layer, the functional main body module obtains the layout, font, and color value in the layer basic information of the i-th layer as the clock setting information of the clock layer, and determines that the level of the clock layer is i. Then, it is determined whether i is equal to k; if i is not equal to k, then let i = i + 1, and re-execute step C and the subsequent steps; if i is equal to k, the operation ends.

[0293] Step E: If the i-th layer is not the clock layer, the functional main body module parses the layer basic information of the i-th layer, obtains the initial image of the i-th layer, processes the initial image of the i-th layer to obtain the full-screen image of the i-th layer, and determines that the level of the i-th layer is i. Then, it is determined whether i is equal to k; if i is not equal to k, then let i = i + 1, and re-execute step C and the subsequent steps; if i is equal to k, the operation ends.

[0294] Exemplarily, the operation of the functional main body module for parsing the layer basic information of the i-th layer to obtain the initial image of the i-th layer can be as follows: If the layer basic information of the i-th layer contains an image storage path and does not contain a color value and a color setting type, then obtain the image according to the image storage path as the initial image of the i-th layer; If the layer basic information of the i-th layer contains an image storage path, a color value and a color setting type, then obtain the image according to the image storage path, and set the color of the image according to the color value and the color setting type to obtain the initial image of the i-th layer; If the layer basic information of the i-th layer does not contain an image storage path but contains a color value and a color setting type, then generate an image with the same size as the screen size, and set the color of the image according to the color value and the color setting type to obtain the initial image of the i-th layer.

[0295] For example, Fig. 27 The first array in "layers" in the json file shown (i.e., the array containing "id": "layer_origin") is the layer basic information of the first layer. According to the layer type in the first array (i.e., "type": 0), it can be determined that the first layer is the original layer. The image can be obtained according to the image storage path in the first array (i.e., "src": "08_origin.png") as the initial image of the first layer, and the level of the first layer is determined to be 1.

[0296] Fig. 27 The second array in "layers" in the json file shown (i.e., the array containing "id": "layer_color") is the layer basic information of the second layer. According to the layer type in the second array (i.e., "type": 1), it can be determined that the second layer is the color background layer. Since the second array does not contain an image storage path, an image with the same size as the screen size can be generated, and the color of the image is set according to the color value (i.e., "color": "#FF66B3CC") and the color setting type (i.e., "colorPolicy": 1) in the second array to obtain the initial image of the second layer, and the level of the second layer is determined to be 2.

[0297] Fig. 27The third array in "layers" of the shown json file (i.e., the array containing "id": "layer_crop") is the layer basic information of the third layer. According to the layer type in the third array (i.e., "type": 5), it can be determined that the third layer is a double exposure layer. The main image can be obtained according to the main image storage path in the third array (i.e., "src": "08_srcl.png"), and the superimposed image can be obtained according to the superimposed image storage path (i.e., "dts": "08_crop.png") to get the initial image of the third layer, and the level of the third layer is determined to be 3.

[0298] Fig. 27 The fourth array in "layers" of the shown json file (i.e., the array containing "id": "layer_timer") is the layer basic information of the fourth layer. According to the layer type in the fourth array (i.e., "type": 3), it can be determined that the fourth layer is a clock layer. The layout in the fourth array (i.e., "layout": 0), font (i.e., "font": "HonorDigits_RoundVF.ttf"), color value (i.e., "color": "#FF195366"), color type (i.e., "colorPolicy": 4), and font thickness ("thickness": 10) can be obtained as the clock setting information of the clock layer, and the level of the clock layer is determined to be 4.

[0299] Exemplarily, the operation of the functional main module to process the initial image of the i-th layer to obtain the full-screen image of the i-th layer can be: The functional main module determines the initial scaling ratio according to the screen size and the size of the initial image, and scales the initial image according to the initial scaling ratio to obtain the full-screen image of the i-th layer.

[0300] This initial scaling ratio is used to process the initial image into a full-screen image. Specifically, the screen height can be divided by the height of the initial image to obtain a first value, and the screen width can be divided by the width of the initial image to obtain a second value, and then the larger of the first value and the second value is used as the initial scaling ratio.

[0301] (2) The functional main module processes the full-screen image of the original layer according to the first offset information and the first scaling ratio information in the image template file to obtain the target image of the original layer, and processes the full-screen image of the cut layer according to the first offset information and the first scaling ratio information in the image template file to obtain the target image of the cut layer, and processes the full-screen image of the superimposed layer according to the second offset information and the second scaling ratio information in the image template file to obtain the superimposed image of the superimposed layer.

[0302] Exemplarily, as Fig.28 shown, taking the scaling ratio of 1.5 and the offset of [20, 20] as an example, the operation of the functional main body module to process the full-screen image of the original layer according to the first offset information and the first scaling ratio information in the image template file to obtain the target image of the original layer can be: the functional main body module determines the target area in the full-screen image of the original layer, and the target area in the full-screen image is the area that can be displayed on the screen in the full-screen image. The target area in the full-screen image can be the area centered on the center of the full-screen image and having the same area ratio as the screen ratio; while keeping the center of the full-screen image unchanged, scale the full-screen image according to the first scaling ratio in the first scaling ratio information, and then move the scaled full-screen image according to the first offset in the first offset information, so that the offset between the center of the moved full-screen image and the center of the target area is the first offset in the first offset information. After that, crop the image in the full-screen image that is within the target area to obtain the target image of the original layer.

[0303] The operation of the functional main body module to process the matte layer according to the first offset information and the first scaling ratio information in the image template file to obtain the target image of the matte layer, and the operation of processing the full-screen image of the overlay layer according to the second offset information and the second scaling ratio information in the image template file to obtain the overlay image of the overlay layer are both similar to the operation of the functional main body module to process the full-screen image of the original layer according to the first offset information and the first scaling ratio information in the image template file to obtain the target image of the original layer, and the embodiments of the present application will not elaborate on this again.

[0304] (3) The functional main body module blurs the target image of the original layer according to the blur degree information in the image template file.

[0305] (4) When the depth-of-field effect switch state information in the image template file indicates the on state, the functional main body module sets the visibility of all layers in the multiple layers to visible; exemplarily, this can achieve Fig.11 the depth-of-field effect in the image of the lock screen preview page 702 shown in FIG. (a) therein. When the depth-of-field effect switch state information in the image template file indicates the off state, the functional main body module sets the visibility of all other layers except the matte layer in the multiple layers to visible, and sets the visibility of the matte layer to invisible. Exemplarily, this can turn off the depth-of-field effect, such as Fig.11 the image of the lock screen preview page 702 shown in FIG. (d) therein, which has no depth-of-field effect.

[0306] (5) The functional main body module scales the target image of the original layer according to a specific scaling ratio to obtain the display image of the original layer, scales the target image of the cut layer to obtain the display image of the cut layer, and scales the full-screen images of the other layers in the multiple layers except the original layer, the cut layer, and the clock layer to obtain the display images of the other layers.

[0307] The specific scaling ratio is used to process the image into an image that can be displayed on the lock screen preview page. For example, the height (or width) of the display area of the lock screen preview page can be divided by the screen height (or screen width) to obtain the specific scaling ratio.

[0308] Step 2608: The functional main body module sends a third display request to the lock screen view module.

[0309] The third display request is used to request the display of the lock screen preview page. The third display request carries the image display information and the position information of the display area of the lock screen preview page.

[0310] It should be noted that after the functional main body module sends the third display request to the lock screen view module, the subsequent lock screen view module can display the corresponding image template. In this case, the lock screen image file currently used by the functional main body module is the image template file.

[0311] Step 2609: After receiving the third display request, the lock screen view module sends display messages to the view modules corresponding to each layer.

[0312] It should be noted that each layer is displayed in the lock screen view, and the view module corresponding to each layer can render the corresponding view module. Therefore, the lock screen view module can send display messages to the view modules corresponding to each image.

[0313] As an example, the image display information carried in the display messages sent to the view modules corresponding to different layers is also different. For example, the display message sent to the double exposure view module carries the image display information of the cut layer and the overlay layer, the display message sent to the view module corresponding to the color background layer carries the image display information of the color background layer, the display message sent to the view module corresponding to the original layer carries the image display information of the original layer, and the display message sent to the view module corresponding to the clock layer carries the image display information of the clock layer.

[0314] Step 2610: The double exposure view module renders the main image and the overlay image according to the image display information of the double exposure layer.

[0315] As described above, the double-exposure layer includes a cutout layer and an overlay layer, and the image display information of the double-exposure layer includes the image display information of the cutout layer and the image display information of the overlay layer. As an example, the double-exposure view module can display the main image in the cutout layer according to the image display information of the cutout layer, and then process the overlay image according to the image display information of the overlay layer and the image display information of the main image.

[0316] In some embodiments, the double-exposure view module can display the bottom edge of the main image in the vertical direction at the bottom edge of the cutout layer, and the bottom edge of the cutout layer is usually the bottom edge of the lock screen image.

[0317] In some embodiments, the operation of the double-exposure view module to process the overlay image according to the image display information of the overlay layer and the image display information of the main image includes: the double-exposure view module can determine the minimum bounding rectangle of the main image, and process the overlay image according to the size of the minimum bounding rectangle, and the size of the processed overlay image is the same as that of the minimum bounding rectangle; set the display effect of the processed overlay image to a transparent gradient effect from transparent to opaque.

[0318] As an example, an overlapping area may be set in the double-exposure layer. In the case where an overlapping area is set, the processed overlay image displays the part in the overlapping area and does not display the part outside the overlapping area.

[0319] In a possible implementation manner, the double-exposure view module can set the display effect of the overlay image starting from a specified position to a transparent gradient effect. For example, set the processed overlay image to perform transparent gradient processing starting from the half position of the main image in the vertical direction. The transparency of each row of pixel points in the transparent gradient effect can be processed according to the pre-set transparency, and the embodiments of the present application do not make specific settings in this regard.

[0320] In another possible implementation manner, a transparent gradient area may be set in the double-exposure layer, and the double-exposure view module can fuse the processed overlay image with the transparent gradient area, and the transparent gradient effect of the fused overlay image is the same as the transparent gradient effect of the transparent gradient area.

[0321] It should be noted that in the embodiments of the present application, the transparent gradient effect can be a gradient effect from transparent to opaque in the direction from top to bottom, or a gradient effect from transparent to opaque in the direction from left to right or from right to left, or, it can also be a gradient effect from transparent to opaque in the direction of a diagonal line of any screen. The embodiments of the present application do not make specific limitations in this regard.

[0322] In some embodiments, the dual-exposure view module can also display the main image and the superimposed image in other ways. For example, the dual-exposure view module can perform pixel blending on the main image and the superimposed image. During the blending process, pixel blending processing is performed on the pixels in the superimposed image that overlap with the main image, and the pixels in the superimposed image that do not overlap with the main image are not processed, and the pixels in the superimposed image that are not blended are not displayed.

[0323] As an example, during the blending process, for the pixels where the main image and the superimposed image overlap, the dual-exposure view module can display the pixels of the superimposed image, that is, the pixels of the superimposed image cover the upper layer of the main image. Or, for the overlapping part at the same position, the dual-exposure view module can determine a new pixel value based on the pixel value of the pixel at this position in the main image and the pixel value of the pixel at this position in the superimposed image, and update the pixel value of the pixel at this position to the new pixel value.

[0324] It should be noted that the dual-exposure view module can perform blending processing on the superimposed image and the main image through a pixel blending tool. For example, the dual-exposure view module can blend the superimposed image and the main image through the Xfermode tool.

[0325] As can be seen from the above, there may be an overlapping area in the dual-exposure image. In this case, for the blended superimposed image, the dual-exposure view module can display the superimposed image within the overlapping area. That is, for the superimposed image, the dual-exposure view module can display the part of the superimposed image that is within the overlapping area and overlaps with the main image, and the part of the superimposed image that is outside the overlapping area or does not overlap with the main image will not be displayed.

[0326] Step 2611: When the original layer view module receives the display message, render the initial image onto the original layer.

[0327] Step 2612: The color view module sets the color of the color background layer to the color value carried in the display message.

[0328] Step 2613: The clock view module renders the clock layer according to the image display information of the clock layer carried in the display message.

[0329] Since the position information of the display area is carried in the third display request, the lock screen view can display each layer in the corresponding position on the screen in ascending order of layer level. In addition, since each layer is displayed within the lock screen preview page, after each layer performs image display according to the corresponding image display information, the display of the image template can be realized, and thus the display of the lock screen preview page is realized. Exemplarily, the displayed lock screen preview page can be Fig.10 The lock screen preview page 702 shown in Figure (c) therein, where an image template selected by the user is displayed, and this image template is the lock screen image.

[0330] Step 2614: After the view modules corresponding to each layer complete the layer display, they send a display completion message to the lock screen view module.

[0331] Fig.29 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application. Fig.29 In the flowchart, it is described by taking the example of the user replacing the image in the image template. Refer to Fig.29 , this method may include the following steps:

[0332] Step 2901: The function main body module receives a click operation on the image replacement control in the lock screen preview interface.

[0333] In some cases, if the user wants to change the main image of the lock screen image, as shown in Figure (a) therein, the user can click the image replacement control, and the function main body module will receive the click operation on the image replacement control. Fig.15

[0334] Step 2902: In response to the click operation on the image replacement control, the function main body module displays a second pop-up window.

[0335] Fig.15 For example, as shown in Figure (b) therein, the image options in the gallery are displayed in the second pop-up window 7013, that is, the image options for the main image and the image options for the superimposed image are displayed.

[0336]

[0337] Step 2903: The function main body module receives a selection operation on an image option. Fig.15

[0337] For example, as shown in Figure (b) therein, the user can select an image option by clicking an image option displayed in the second pop-up window 7013, and the function main body module will receive the selection operation on this image option. Fig.15

[0338] Step 2904: In response to the selection operation on this image option, the function main body module obtains the image corresponding to this image option as the original image, and generates a main image containing the foreground object in the original image.

[0339] Step 2905: The function main body module performs a color sampling operation on the main image to obtain the color system corresponding to the main image.

[0340] Step 2906: The function main body module obtains a preset superimposed image and the color value corresponding to this color system according to the color system corresponding to the main image.

[0341] It should be noted that the color system of the preset superimposed image is the same as that corresponding to the main image.

[0342] In some embodiments, the electronic device pre-stores preset superimposed images corresponding to each color system, and each color system can correspond to one or more preset superimposed images. Therefore, after the functional main module determines the color system corresponding to the main image, it obtains any one of the preset superimposed images corresponding to the color system.

[0343] Since each color system may correspond to one or more colors, the functional main module can obtain the color value of the color closest to the color system. Alternatively, the corresponding relationship between the color system and the color value can be stored in the electronic device. In this way, the functional main module can obtain the corresponding color value from this corresponding relationship according to the color system of the main image.

[0344] Step 2907: The functional main module sends a storage message to the file system.

[0345] It should be noted that the storage message carries the original image, the main image, the preset superimposed image, and the color value.

[0346] Step 2908: When the file system receives the storage message, it stores and updates the layer basic information of each layer to obtain the updated layer basic information of each layer.

[0347] Step 2909: The file system returns the updated layer basic information of each layer to the functional main module.

[0348] Step 2910: When the functional view module receives the updated layer basic information of each layer, it parses the updated layer basic information of each layer and sends an information update message to the lock screen view module.

[0349] It should be noted that the operation of the functional view module parsing the updated layer basic information of each layer can refer to the operation in step 2607 above. The information update message carries the updated layer basic information of each layer.

[0350] Step 2911: The lock screen view module sends an image update message to the view modules corresponding to each layer.

[0351] It should be noted that each image update message carries the updated layer basic information of the corresponding layer.

[0352] As an example, the information carried in the image update messages sent to the view modules corresponding to different layers is different. For example, the image update message sent to the double-exposure view module carries the layer basic information of the updated double-exposure layer, the image update message sent to the view module corresponding to the color background layer carries the layer basic information of the updated color background layer; the image update message sent to the view module corresponding to the original layer carries the layer basic information of the updated original layer.

[0353] Step 2912: The double-exposure view module displays the updated main image and the updated superimposed image in the double-exposure layer according to the updated layer basic information.

[0354] It should be noted that the operation of the double-exposure view module to display the updated main image and the updated superimposed image in the double-exposure layer according to the updated layer basic information can refer to the operation in Step 2610 above, and this application embodiment will not elaborate on it one by one.

[0355] In some embodiments, the double-exposure view module can update the display of the double-exposure layer according to the display positions of the main image and the superimposed image before the update. It can also update the display of the double-exposure layer according to the default display position.

[0356] It should be noted that the default display position means that the main image is centered horizontally, and the bottom edge of the main image is close to the bottom edge of the cutout layer vertically, and the superimposed image is centered horizontally, and the bottom edge of the superimposed image is close to the bottom edge of the cutout layer vertically.

[0357] Step 2913: The color view module replaces the color value in the color background layer with the color value carried in the updated layer basic information.

[0358] Step 2914: The original layer view module replaces the image in the original layer with the original image carried in the updated layer basic information.

[0359] After the view modules corresponding to each layer update the display of the corresponding layer, an updated lock screen image can be obtained, and the updated lock screen image is displayed on the lock screen preview page. Exemplarily, the shown lock screen preview page can be as Fig.15 shown in Figure (c).

[0360] Step 2915: After the view modules corresponding to each layer complete the layer update, they send a display completion message to the lock screen view module.

[0361] It should be noted that the user may also replace the superimposed image. The replacement operation can refer to the above steps. When replacing the superimposed image without replacing the main image, there is no need to update the color background layer, the original layer, the matte layer, and the clock layer. However, during the process of updating the superimposed layer, when the display information of the matte layer remains unchanged, the double exposure view module needs to redraw the matte layer. The operation of the double exposure view module to update the superimposed layer can refer to the operation in step 2912 above.

[0362] Fig.30 It is a flowchart of another method for displaying a lock screen image provided by an embodiment of the present application. Fig.30 In the illustrated flowchart, the example is given where the user adjusts the position and size of the main image. Refer to Fig.30 , and the method may include the following steps:

[0363] Step 3001: The function main body module receives a click operation on the lock screen image in the lock screen preview page.

[0364] In some cases, if the user wants to adjust the size and / or position of the lock screen image, then as shown in Fig.13 Figure (a), the user can click on the lock screen image in the lock screen preview interface, and the function main body can receive the click operation on the lock screen image.

[0365] Step 3002: The function main body module responds to the click operation on the lock screen image and displays an image adjustment interface.

[0366] Exemplarily, as shown in Fig.13 Figure (b), the lock screen image can be displayed full screen in the image adjustment interface, and the image adjustment interface includes a superimposed image adjustment control, a main image adjustment control, a confirmation control, and a cancellation control.

[0367] Step 3003: The function main body module receives a click operation on the main image adjustment control.

[0368] If the user wants to adjust the position and / or size of the main image, then the user can click on the main image adjustment control.

[0369] Step 3004: The function main body module responds to the click operation on the main image adjustment control and sends a main image adjustment message to the lock screen view module.

[0370] Step 3005: The lock screen view module sets the matte layer to an editable state.

[0371] It should be noted that when the matte layer is in an editable state, other layers are in an uneditable state. The uneditable state means that during the process of the user moving the position or scaling the size of the main image, the image positions and sizes in other layers do not change.

[0372] Step 3006: The functional main body module receives an adjustment operation on the main body image on the lock screen preview page.

[0373] In some requests, if the user wants to adjust the size and position of the main body image of the lock screen image, the user can perform a zoom operation and a move operation on the lock screen preview page, and the functional main body module will receive the zoom operation and the move operation, both of which are adjustment operations.

[0374] Step 3007: In response to the adjustment operation, the functional main body module determines the zoom distance and the move distance.

[0375] The zoom distance is the distance the mobile phone moves during the zoom operation. The move is the distance the move operation moves on the screen.

[0376] Exemplarily, in the case where the zoom operation is a two-finger zoom-in operation or a two-finger zoom-out operation, the target zoom distance and the target offset can be determined according to the sliding direction, sliding distance, sliding position, etc. of the two fingers.

[0377] Step 3008: The functional main body module sends the zoom distance and the move distance to the lock screen view module.

[0378] Step 3009: The lock screen view module determines the first target zoom ratio of the main body image according to the zoom distance, and determines the first target offset of the main body image according to the move distance.

[0379] Step 3010: The lock screen view module sends the first target zoom ratio and the first target offset to the double exposure view module.

[0380] Step 3011: The double exposure view module updates the size and position of the main body image according to the first target zoom ratio and the first target offset, and re-renders the superimposed image during the process of updating the size and position of the main body image.

[0381] In some embodiments, the double exposure view module can multiply the main body image by the first target zoom ratio on the basis of the original size, and move the first target offset on the original position to obtain the updated main body image.

[0382] It should be noted that since the size and position of the main body image change, the overlapping part between the main body image and the superimposed image will also change accordingly. Therefore, the double exposure view module can re-render the superimposed image during the process of updating the main body image. And the double exposure view module can redraw the superimposed image according to the operation in step 2610 above. The display position of the superimposed image does not change during this process.

[0383] Exemplarily, after adjusting the main body image, if a magnification operation is performed on the main body image, the updated lock screen image can be as shown in Fig.12 Figure (c) therein; if a reduction operation is performed on the main body image, the updated lock screen image can be as shown in Fig.12 Figure (d) therein; if a moving operation is performed on the main body image, the updated lock screen image can be as shown in Fig.12 Figure (e) therein.

[0384] Step 3012: After the dual exposure view module completes the update of the dual exposure layer, it sends a display completion message to the function main body module through the lock screen view module.

[0385] Step 3013: The function main body module sends a matte layer update message to the file system.

[0386] It should be noted that the matte layer update message carries the first target scaling ratio and the first target offset. Alternatively, the matte layer update message carries the scaling distance and the moving distance.

[0387] Step 3014: The file system stores the information carried in the matte layer update message and updates the layer basic information of the matte layer.

[0388] The user may not only adjust the size and / or position of the main body image, but also adjust the size and / or position of the superimposed image. Next, taking the user's adjustment of the size and position of the superimposed image as an example, please refer to Fig.31 , Fig.31 which is a schematic flowchart of a display method of a lock screen image shown according to another example. By way of example and not limitation, this method is applied to an electronic device, and is described by taking the interaction of multiple modules in the electronic device as an example. This method may include some or all of the following content:

[0389] Step 3101: The function main body module receives a click operation on the lock screen image in the lock screen preview page.

[0390] Step 3102: In response to the click operation on the lock screen image, the function main body module displays an image adjustment interface.

[0391] Step 3103: The function main body module receives a click operation on the adjusted superimposed image control.

[0392] If the user wants to adjust the position and / or size of the superimposed image, the user can click the adjusted superimposed image control.

[0393] Step 3104: In response to the click operation on the adjusted superimposed image control, the function main body module sends a superimposed image adjustment message to the lock screen view module.

[0394] Exemplarily, this process can refer to the scenario shown in Figure (a) in the above Fig.13 above.

[0395] Step 3105: The lock screen view module sets the overlay to an editable state.

[0396] It should be noted that when the overlay is in an editable state, other layers are in an uneditable state. The fact that other layers are in an uneditable state means that during the process of the user moving the position or scaling the size of the overlay image, the positions and sizes of the images in other layers do not change.

[0397] Step 3106: The functional main body module receives an adjustment operation on the overlay image on the lock screen preview page.

[0398] It should be noted that the adjustment operation can be the scaling operation and / or the moving operation. In the embodiments of the present application, the adjustment operation including the scaling operation and the moving operation is taken as an example for illustration.

[0399] Step 3107: In response to the adjustment operation, the functional main body module determines the scaling distance and the moving distance.

[0400] Step 3108: The functional main body module sends the scaling distance and the moving distance to the lock screen view module.

[0401] Step 3109: The lock screen view module determines the second target scaling ratio of the overlay image according to the scaling distance, and determines the second target offset of the overlay image according to the moving distance.

[0402] Step 3110: The lock screen view module sends the second target scaling ratio and the second target offset to the double exposure view module.

[0403] Step 3111: The double exposure view module updates the size and position of the overlay image according to the second target scaling ratio and the second target offset.

[0404] In some embodiments, the double exposure view module can multiply the overlay image by the second target scaling ratio on the basis of the original size, and move the second target offset on the original position to obtain the updated main image.

[0405] Step 3112: During the process of updating the size and position of the overlay image, the double exposure view module re-renders the main image.

[0406] It should be noted that since the size and position of the superimposed image change, the overlapping part between the main image and the superimposed image also changes accordingly. Therefore, the double-exposure view module can re-render the main image during the process of updating the superimposed image. And the double-exposure view module can redraw the main image according to the operation in step 2610 above. The display position of the main image does not change during this process.

[0407] Exemplarily, after adjusting the superimposed image, if the superimposed image is enlarged, the updated lock screen image can be as shown in Fig.13 Figure (b); if the superimposed image is reduced, the updated lock screen image can be as shown in Fig.13 Figure (c); if the superimposed image is moved, the updated lock screen image can be as shown in Fig.13 Figure (d).

[0408] Step 3113: After the double-exposure view module completes the update of the double-exposure layer, it sends a display completion message to the function main body module through the lock screen view module.

[0409] Step 3114: The function main body module sends a superimposed layer update message to the file system.

[0410] It should be noted that the second target scaling ratio and the second target offset are carried in the superimposed layer update message. Alternatively, the scaling distance and the moving distance are carried in the superimposed layer update message.

[0411] Step 3115: The file system stores the information carried in the superimposed layer update message and updates the layer basic information of the superimposed layer.

[0412] When an overlapping area is set in the electronic device, the user can also adjust the range of the overlapping area. Refer to Fig.32 , Fig.32 which is a schematic flowchart of a display method for a lock screen image shown according to another example. By way of example and not limitation, this method is applied to an electronic device and is described by taking the interaction of multiple modules in the electronic device as an example. This method may include some or all of the following content:

[0413] The operations in steps 3201 to 3205 can refer to the operations in steps 3101 to 3105 above, and the embodiments of the present application will not repeat them one by one.

[0414] It should be noted that in response to a click operation on the superimposed image adjustment control, the function main body module can also display a sliding bar in the image adjustment interface, and the sliding bar can move up and down in the image adjustment interface. Exemplarily, the sliding bar can be Fig.14The sliding rod 1205 shown in Figure (a) therein.

[0415] Step 3206: The functional main body module receives a sliding operation on the sliding rod on the lock screen preview page.

[0416] Step 3207: In response to the sliding operation, the functional main body module determines the sliding offset of the sliding rod.

[0417] Step 3208: The functional main body module sends the sliding offset to the lock screen view module.

[0418] Step 3209: The lock screen view module displays the sliding rod at the position indicated by the sliding offset and obtains the display position information of the sliding rod.

[0419] That is to say, the lock screen view module moves the sliding rod according to the sliding offset and determines the display position information after the sliding rod stops moving.

[0420] Step 3210: The lock screen view module determines the range information of the overlapping area according to the display position information of the sliding rod.

[0421] It should be noted that the lock screen view module can determine that the lower part area in the vertical direction located at the position of the sliding rod is the overlapping area. Exemplarily, this overlapping area can refer to Fig.14 The lower part area at the position of the sliding rod shown.

[0422] Step 3211: The lock screen image module sends the range information of the overlapping area to the double exposure view module.

[0423] Step 3212: The double exposure view module re-renders the main image and the superimposed image according to the range information of the overlapping area.

[0424] Since the range of the overlapping area changes, the visible part in the superimposed image also changes accordingly. Therefore, the double exposure view module re-renders the main image and the superimposed image according to the range information of the overlapping area. This process can refer to the operation in step 2610 above, and this application embodiment will not repeat it one by one.

[0425] Step 3212: After the double exposure view module completes the update of the double exposure layer, it sends a display completion message to the functional main body module through the lock screen view module.

[0426] Step 3213: The functional main body module sends a superimposed layer update message to the file system.

[0427] It should be noted that the sliding offset of the sliding rod, or the display position information of the sliding rod, or the range information of the overlapping area is carried in the superimposed layer update message.

[0428] Step 3214: The file system stores the information carried in the overlay update message and updates the layer basic information of the overlay.

[0429] If the user is satisfied with the current lock screen image, the user can apply the lock screen image. During the process of applying the lock screen image, the lock screen image file of the current lock screen image can be stored. Please refer to Fig.33 , Fig.33 FIG. is a schematic flow chart of a method for displaying a lock screen image shown according to another example. By way of example and not limitation, the method is applied to an electronic device and is described by taking the interaction of multiple modules in the electronic device as an example. The method may include the following parts or all of the content:

[0430] Step 3301: The function main body module receives a click operation on the application control in the lock screen preview interface.

[0431] Step 3302: The function main body module obtains update information in response to the click operation.

[0432] It should be noted that the update information refers to the information of the layer after the layer is updated, including the image storage path of the changed main image, the first target scaling ratio, the first target offset, the image storage path of the overlay image, the second target scaling ratio, the second target offset, the overlapping area range information, and the changed color value in the case where the color of the color background layer changes, etc.

[0433] Step 3303: When the function main body module obtains the update information, it sends the update information and the original image to the file system.

[0434] In some embodiments, when the function main body module does not obtain the update information, it means that the lock screen image has not been updated, and the function main body module does not need to perform a storage operation and can directly exit the lock screen preview page.

[0435] Step 3304: The file system stores the update information and stores the original image.

[0436] Since some processes are irreversible during the process of editing the lock screen image, in order to provide the user with a function of reverting the operation, the file system can store the image in the original layer. And in order to quickly display the lock screen image next time, the file system can store the update information in the Ison file format.

[0437] Next, the embodiments of the present application will be introduced with the electronic device as the execution subject. Please refer to Fig.34 , Fig.34FIG. 0 is a schematic flowchart of a method for displaying a lock screen image shown according to another example. By way of example and not limitation, this method is applicable to an electronic device, and this method may include some or all of the following content:

[0438] Step 3401: Receive a display operation on the lock screen interface.

[0439] As an example, when the electronic device is in the screen-off state or the AOD display mode, the user can trigger the display of the lock screen interface. For example, the user can press the power button, or the user can click on the screen, so that the electronic device can receive the display operation of the lock screen interface.

[0440] Step 3402: Display the lock screen interface.

[0441] It should be noted that the lock screen interface includes a target lock screen image, and the target lock screen image includes a first image and a second image. The first image may include a background image and a main image, and the main image is an image obtained by matting the original image. The background image may be a solid-color background image set separately for the main image or the original image of the main image. The second image is superimposed and displayed on the main image of the first image according to a gradient effect from transparent to opaque. Exemplarily, the target lock screen image may be the image shown in FIG. (c) or (d) above (excluding the case of the clock layer). Figure 4 in FIG. (c) or (d) (excluding the case of the clock layer).

[0442] In some embodiments, the target lock screen image may be an image with a depth-of-field effect. The main image of the first image partially occludes the system time indicator, and the system time indicator is located above the layer where the first image is located.

[0443] As an example, the original image in the first image is displayed in the original layer, the background image of the first image is displayed in the color background layer, the main image of the first image is displayed in the matting layer, and the second image is displayed as a superimposed image in the superimposed layer.

[0444] It is worth noting that when the target lock screen image is an image with a depth-of-field effect, the level richness of the lock screen interface is increased, and the beauty and personalization degree of the lock screen interface are improved.

[0445] It should be noted that before displaying the target lock screen image, the user can set the lock screen image as the target lock screen image. This process is shown by Fig.35 shown, Fig.35 FIG. 30 is a schematic flowchart of a method for displaying a lock screen image shown according to another example. By way of example and not limitation, this method is applicable to an electronic device, and this method may include some or all of the following content:

[0446] Step 3501: In response to an editing trigger operation on the lock screen image, display an image selection interface.

[0447] It should be noted that the image selection interface is used to instruct the user to select an image template for the lock screen image; the image selection interface can be the pop-up window 7011 shown in FIG. (b) above. Fig.10 in the above.

[0448] Step 3502: In response to a selection operation on the target image template, display the target image template on the lock screen preview page.

[0449] It should be noted that the target image template includes a reference schematic image and a reference overlay image. The reference overlay image is superimposed on the reference main image of the reference schematic image, and the display effect of the reference overlay image is a transparent gradient display effect. The reference schematic image includes a reference main image and a reference background image. Among them, the reference main image is displayed in the cut layer, the reference background image is displayed in the color background layer, and the reference overlay image is displayed in the overlay layer.

[0450] Step 3503: Determine the target lock screen image based on the target image template.

[0451] As an example, the first image can be determined according to the reference schematic image, and the second image can be determined according to the reference overlay image.

[0452] In a possible implementation manner, the operation of the electronic device to determine the target lock screen image based on the target image template includes: determining the target image template as the target lock screen image. In this case, the reference schematic image is the first image, and the reference overlay image is the second image. Exemplarily, the target lock screen image can refer to the lock screen image shown in FIG. (c) above. Fig.10 in the above.

[0453] In another possible implementation manner, the electronic device determines the adjusted target image template as the target lock screen image in response to an adjustment operation on the target image template. The adjustment operation includes a scaling operation and / or a moving operation on the target image template. In this case, if both the reference schematic image and the reference overlay image are adjusted, then the adjusted reference schematic image is the first image, and the adjusted reference overlay image is the second image. Exemplarily, the target lock screen image can refer to the lock screen images shown in FIGS. (b), (c), and (d) above, and Fig.12 in the above. Fig.13 in the lock screen images shown in FIGS. (b), (c), and (d).

[0454] It is worth noting that since the target lock screen image can be directly determined according to the target image template, the convenience of determining the target lock screen image is improved.

[0455] It should be noted that the adjustment operation of the electronic device on the target image template can act on the reference main image or the reference overlay image.

[0456] Exemplarily, in response to the adjustment operation on the reference main image in the target image template, the electronic device determines the second position information of the adjusted reference main image; according to the second position information, the reference overlay image is superimposed on the upper layer of the adjusted reference main image; the display effect of the reference overlay image is set to a transparent gradient effect to obtain the adjusted target image template; the adjusted target adjustment template is determined as the target lock screen image. Exemplarily, this adjustment scenario can refer to the Fig.12 application scenario shown above.

[0457] It should be noted that the second position information can be determined according to the first target scaling ratio and the first target offset in step 3009 above. That is, the second position information is the position information determined after the reference main image is scaled and moved from its position before adjustment. According to the second position information, superimposing the reference overlay image on the upper layer of the adjusted reference main image means updating the size and position of the reference main image according to the first target scaling ratio and the first target offset, and re-rendering the reference overlay image during the process of updating the reference main image. This process can refer to the operation in step 3011 above.

[0458] It should also be noted that the process of the adjustment operation of the electronic device for adjusting the reference main image can refer to the Fig.30 adjustment process shown above, and the embodiments of the present application will not elaborate on this one by one.

[0459] It is worth noting that by adjusting the size and position of the reference main image, the electronic device increases the interactivity with the user and improves the personalization degree of image display.

[0460] In some embodiments, in response to the adjustment operation on the reference overlay image in the target image template, the electronic device determines the third position information of the adjusted reference overlay image; according to the third position information, the reference overlay image with adjusted position is superimposed on the upper layer of the reference main image; the display effect of the superimposed reference image with adjusted position is set to a transparent gradient effect to obtain the adjusted target image template; the adjusted target image template is determined as the target lock screen image. Exemplarily, this adjustment scenario can refer to the Fig.13 application scenario shown above.

[0461] It should be noted that the third position information can be determined according to the second target scaling ratio and the second target offset in step 3109 above. That is, the third position information is the position information determined after scaling and moving the reference superimposed image based on its position before adjustment. According to the third position information, superimposing the adjusted reference superimposed image on the upper layer of the reference main image means updating the size and position of the reference superimposed image according to the second target scaling ratio and the second target offset, and re-rendering the reference main image during the process of updating the reference superimposed image. This process can refer to the operations in steps 3111 and 3112 above.

[0462] It is worth noting that by separately adjusting the reference superimposed image and the reference main image, the adjustment method becomes more diverse and can better reflect the personalization degree of image display.

[0463] In some embodiments, in response to an adjustment operation on the target image template, the electronic device can simultaneously adjust the reference superimposed image and the reference main image; superimpose and display the adjusted reference superimposed image on the upper layer of the adjusted reference main image; set the display effect of the adjusted reference superimposed image to a transparent gradient effect to obtain the adjusted target image template; and determine the adjusted target image template as the target lock screen image. This process can refer to the Fig.30 and Fig.31 process shown above. Embodiments of the present application will not elaborate on this one by one.

[0464] In some embodiments, in the presence of a sliding bar, the adjustment operation of the electronic device on the target image template can also include an adjustment operation on the overlapping area range in the target image template.

[0465] Exemplarily, the electronic device can receive a sliding operation on the sliding bar, where the sliding bar is used to adjust the range of the overlapping area between the reference main image and the reference superimposed image; in response to the sliding operation on the sliding bar, determine the display position information of the sliding bar; according to the display position information, superimpose and display the reference superimposed image on the upper layer of the reference main image, and set the display effect of the reference superimposed image to a transparent gradient effect to obtain the adjusted target image template; and determine the adjusted target image template as the target lock screen image. Exemplarily, this process can refer to the Fig.14 application scenario shown above.

[0466] It should be noted that the operation process of the electronic device adjusting the position of the sliding bar to adjust the range of the overlapping area between the reference main image and the reference superimposed image can refer to the Fig.32 process shown above. Embodiments of the present application will not elaborate on this one by one.

[0467] It should be noted that by adjusting the range of the overlapping area through the sliding rod, the convenience of the adjustment method is increased, and the richness and aesthetics of the image display are improved.

[0468] In another possible implementation, the first image can be obtained by replacing the reference schematic image, and / or the second image can be obtained by replacing the reference superimposed image. That is, the electronic device determines the first target image in response to the replacement operation of the reference schematic image and / or the reference superimposed image; determines the first target image as the target lock screen image. Exemplarily, the first target image can be the lock screen image shown in Figure (c) of Fig.15 the attached drawings.

[0469] It should be noted that by replacing the reference schematic image and / or the reference superimposed image, the freedom of the user to independently select images is enhanced, and the personalization degree of the lock screen image is improved.

[0470] As an example, the operation of the electronic device to determine the first target image in response to the replacement operation of the reference schematic image includes: in response to the trigger operation of replacing the reference schematic image with the first selected image, determining the target color system of the first main image in the first selected image, where the first selected image is any image in the picture library of the electronic device; updating the background color of the reference schematic image according to the target color system, and replacing the reference main image with the first main image; superimposing the reference superimposed image on the upper layer of the first main image, and setting the display effect of the reference superimposed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0471] It should be noted that updating the background color of the reference schematic image according to the target color system is to update the background image in the reference schematic image.

[0472] As an example, the operation of the electronic device to determine the first target image in response to the replacement operation of the reference schematic image includes: in response to the trigger operation of replacing the reference superimposed image with the third selected image, replacing the reference superimposed image with the third selected image, where the third selected image is any image in the picture library of the electronic device; superimposing the third selected image on the upper layer of the reference main image, and setting the display effect of the third selected image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0473] As an example, the operations for an electronic device to obtain a first target image in response to an operation of replacing a reference schematic image and a reference overlay image include: in response to a trigger operation of replacing the reference schematic image with a first selected image, determining a target color system of a first main image in the first selected image, where the first selected image is any image in the gallery of the electronic device; obtaining a preset overlay image corresponding to the target color system, where the color system of the preset overlay image is the same as the target color system; updating the background color of the reference schematic image according to the target color system, and replacing the reference main image with the first main image; replacing the reference overlay image with the preset overlay image; and determining the first target image according to the first main image and the preset overlay image.

[0474] It should be noted that the operation process for the electronic device to obtain the first target image in response to the operation of replacing the reference schematic image and the reference overlay image, the operation process for the electronic device to obtain the first target image in response to the operation of replacing the reference schematic image, and the operation process for the electronic device to obtain the first target image in response to the operation of replacing the reference overlay image can all refer to the Fig.29 process shown above, and the embodiments of the present application will not elaborate on them one by one.

[0475] It is worth noting that when replacing the reference main image with the first main image, the color of the background image and the overlay image can also be changed simultaneously, making the replacement of the target image template faster.

[0476] In some embodiments, the operations for the electronic device to determine the target color system of the first main image in the first selected image in response to a trigger operation of replacing the reference schematic image with the first selected image include: in response to a trigger operation of replacing a first reference image with the first selected image, performing a matte extraction operation on the first selected image to obtain the first main image; and performing a color sampling operation on the first main image to obtain the target color system.

[0477] It should be noted that the operation for the electronic device to obtain the first main image can refer to the operation in step 2904 above, and the operation for the electronic device to obtain the target color system can refer to the operation in step 2906 above. The embodiments of the present application will not elaborate on them one by one.

[0478] It is worth noting that by performing color sampling on the first main image, the target color system is closer to the overall color of the first main image, improving the harmony between the background image and the main image.

[0479] In some embodiments, the operation of the electronic device to determine the first target image based on the first main body image and the preset superimposed image includes: mixing the preset superimposed image with the first main body image to obtain a mixed image, where the mixed image includes the first main body image and overlapping pixel points, and the overlapping pixel points are the pixel points in the preset superimposed image that overlap with the first main body image; setting the display effect of the overlapping pixel points in the mixed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0480] It should be noted that by mixing the preset superimposed image with the first main body image, only the first main body image and the part of the preset superimposed image that overlaps with the first main body image are displayed in the mixed image, so that the display effect of the mixed image is more harmonious and beautiful.

[0481] In some embodiments, the operation of the electronic device to set the display effect of the overlapping pixel points in the mixed image to a transparent gradient effect from transparent to opaque to obtain the first target image includes: fusing the mixed image with a transparent gradient area to obtain the first target image, where the transparent gradient area is an area with a transparent gradient effect, and the transparent gradient effect of the overlapping pixel points located in the transparent gradient area is the same as that of the transparent gradient area.

[0482] It should be noted that the operation of the electronic device to mix the preset superimposed image with the first main body image to obtain a mixed image and set the display effect of the mixed image to a transparent gradient effect can refer to the operation in step 2610 above, and the embodiments of the present application will not elaborate on this one by one.

[0483] It should be noted that by setting the transparent gradient area, the setting of the transparent gradient effect of the superimposed image is made more natural and accurate.

[0484] As an example, the electronic device can not only determine the first target image in the above manner, but also determine it in other ways. Exemplarily, the electronic device can determine the minimum circumscribed rectangle corresponding to the first main body image according to the first position information of the first main body image; process the preset superimposed image according to the size of the minimum circumscribed rectangle, and the size of the processed preset superimposed image is the same as that of the minimum circumscribed rectangle; superimpose and display the processed preset superimposed image on the upper layer of the first main body image; set the display effect of the processed preset superimposed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

[0485] It should be noted that the operation of the electronic device to process the preset superimposed image according to the first position information of the first main body image and set the transparent gradient effect for the processed preset superimposed image can also refer to the operation in step 2610 above, and the embodiments of the present application will not elaborate on this one by one.

[0486] It should be noted that since the first main image and the preset superimposed image can be superimposed in different ways, the superimposing methods are thus enriched.

[0487] In some embodiments, after the user obtains the preset superimposed image based on the first main image, the user may still be dissatisfied with the preset superimposed image. In this case, the electronic device can also continue to replace the preset superimposed image.

[0488] As an example, in response to a trigger operation to replace the preset superimposed image with a second selected image, the electronic device superimposes the second selected image on the upper layer of the first main image. The second selected image is any image in the electronic device's gallery other than the first selected image, or the second selected image is any image in the electronic device's gallery; the display effect of the second selected image is set to a transparent gradient effect from transparent to opaque to obtain an updated first target image; it is determined that the updated first target image is the target lock screen image. Exemplarily, the application scenario of this process can refer to the Fig.16 application scenario shown above, and the updated first target image can be as shown in Fig.16 Figure (c) therein.

[0489] It should be noted that since the user can modify the superimposed image, the display richness of the lock screen image is increased, and the personalization degree of the lock screen image is improved.

[0490] It should be noted that the operation of the electronic device to superimpose the second selected image on the upper layer of the first main image and set the display effect of the second selected image to a transparent gradient effect from transparent to opaque to obtain an updated first target image can also refer to the operations in the latter 2610 steps above, and the embodiments of the present application will not elaborate on this one by one.

[0491] In some embodiments, the electronic device can also change the color of the background image in the target lock screen image on the lock screen preview page. Exemplarily, this scenario can refer to the Fig.17 application scenario shown above.

[0492] Of course, when the electronic device displays the wallpaper editing interface, it can also set the background blur degree of the target lock screen image and whether it has a depth of field effect. Exemplarily, when the electronic device displays the wallpaper editing interface, in response to the operation to turn off the depth of field effect, the state of the main image in the target lock screen image is set to the non-display state. In response to the operation to turn on the depth of field effect, the state of the main image in the target lock screen image is set to the display state.

[0493] As an example, the functional main body module can receive an operation to turn off the depth-of-field effect switch. In response to the operation to turn off the depth-of-field effect switch, the functional main body module updates the state in the depth-of-field effect switch state information in the currently used lock screen image file to the off state, and sets the visibility of the cutout layer to invisible. The functional main body module sends the layer identifier and visibility of the cutout layer to the lock screen view module. After receiving the layer identifier and visibility of the cutout layer, the lock screen view module notifies the double exposure view module to update the display information of the cutout layer. The lock screen view module displays the lock screen preview page.

[0494] In the embodiment of the present application, in response to a display operation on the lock screen interface, the electronic device can display the lock screen interface, in which a target lock screen image is displayed. The target lock screen image includes a first image and a second image. The second image is superimposed on the main image of the first image, and the second image presents a gradient effect from transparent to opaque on the upper layer of the first image. Since the embodiment of the present application can implement the superimposed display of two images, and the superimposed image located on the upper layer can have a transparent gradient effect, the main image presents a gradient effect, thereby reflecting the personalized and diversified settings of the lock screen image and the beauty of the lock screen interface.

[0495] In the above embodiment, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it 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 instructions are loaded and executed on a computer, the processes or functions described in the embodiments of the present application are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website, a computer, a server, or a data center to another website, a computer, a server, or a data center in a wired manner (such as coaxial cable, optical fiber, Digital Subscriber Line (DSL)) or a wireless manner (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer, or a data storage device such as a server or a data center that includes one or more available media integrated. The available medium can be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a Digital Versatile Disc (DVD)), or a semiconductor medium (such as a Solid State Disk (SSD)), etc.

[0496] The foregoing are alternative embodiments provided by the present application and are not intended to limit the present application. Any modifications, equivalent replacements, improvements, etc. made within the technical scope disclosed in the present application shall be included within the protection scope of the present application.

Claims

1. A method for displaying a locked screen image, characterized in that Applied to an electronic device, the method includes: Receiving a display operation on the lock screen interface; Displaying the lock screen interface; Wherein, the lock screen interface includes a target lock screen image, the target lock screen image includes a first image and a second image, and the second image is superimposed and displayed on the main image of the first image with a gradient effect from transparent to opaque.

2. The method according to claim 1, characterized in that, The target lock screen image is an image with a depth of field effect. The main image of the first image partially obscures the system time indicator, and the system time indicator is located above the layer where the first image is located.

3. The method according to claim 1 or 2, characterized in that, Before receiving the display operation on the lock screen interface, it further includes: In response to an editing trigger operation on the lock screen image, displaying an image selection interface for instructing the user to select an image template for the lock screen image; In response to a selection operation on the target image template, displaying the target image template in the lock screen preview page. The target image is the image template in the image selection interface, and the target image template includes a reference schematic image and a reference superimposed image. The reference superimposed image is superimposed and displayed on the reference main image of the reference schematic image, and the display effect of the reference superimposed image is a transparent gradient display effect; Based on the target image template, determining the target lock screen image.

4. The method according to claim 3, wherein The first image is determined according to the reference schematic image, and the second image is determined according to the reference superimposed image; The determining the target lock screen image based on the target image template includes: Determining the target image template as the target lock screen image; Or, In response to an adjustment operation on the target image template, determining the adjusted target image template as the target lock screen image. The adjustment operation includes a scaling operation and / or a moving operation on the target image template.

5. The method according to claim 3, wherein The first image is obtained by replacing the reference schematic image, and / or the second image is obtained by replacing the reference superimposed image; The determining the target lock screen image based on the target image template includes: In response to a replacement operation on the reference schematic image and / or the reference superimposed image, determining a first target image; Determining the first target image as the target lock screen image.

6. The method according to claim 5, wherein The determining the first target image in response to the replacement operation on the reference schematic image and the reference superimposed image includes: In response to a trigger operation of replacing the reference schematic image with a first selected image, determining the target color system of the first main image in the first selected image. The first selected image is any image in the gallery of the electronic device; Obtaining a preset superimposed image corresponding to the target color system, and the color system of the preset superimposed image is the same as the target color system; Updating the background color of the reference schematic image according to the target color system, and replacing the reference main image with the first main image; Replacing the reference superimposed image with the preset superimposed image; Determining the first target image according to the first main image and the preset superimposed image.

7. The method according to claim 6, wherein Determining the target color system of the first main image in the first selected image in response to a trigger operation for replacing the reference schematic image with the first selected image includes: In response to the trigger operation for replacing the first reference image with the first selected image, performing a matte extraction operation on the first selected image to obtain the first main image; Performing a color sampling operation on the first main image to obtain the target color system.

8. The method according to claim 6 or 7, characterized in that, Determining the first target image according to the first main image and the preset superimposed image includes: Mixing the preset superimposed image with the first main image to obtain a mixed image, where the mixed image includes the first main image and overlapping pixel points, and the overlapping pixel points are the pixel points in the preset superimposed image that overlap with the first main image; Setting the display effect of the overlapping pixel points in the mixed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

9. The method according to claim 8, wherein The step of setting the display effect of the overlapping pixel points in the mixed image to a transparent gradient effect from transparent to opaque to obtain the first target image includes: Fusing the mixed image with a transparent gradient area to obtain the first target image, where the transparent gradient area is an area with a transparent gradient effect set, and the transparent gradient effect of the overlapping pixel points located in the transparent gradient area is the same as the transparent gradient effect of the transparent gradient area.

10. The method according to claim 6 or 7, characterized in that, Determining the first target image according to the first main image and the preset superimposed image includes: Determining the minimum bounding rectangle corresponding to the first main image according to the first position information of the first main image; Processing the preset superimposed image according to the size of the minimum bounding rectangle, and the size of the processed preset superimposed image is the same as the size of the minimum bounding rectangle; Superimposing and displaying the processed preset superimposed image on top of the first main image; Setting the display effect of the processed preset superimposed image to a transparent gradient effect from transparent to opaque to obtain the first target image.

11. The method according to any one of claims 6-10, characterized in that, After determining the first target image according to the first main image and the preset superimposed image, further includes: In response to a trigger operation for replacing the preset superimposed image with a second selected image, superimposing the second selected image on top of the first main image, where the second selected image is any image in the gallery of the electronic device other than the first selected image; Setting the display effect of the second selected image to a transparent gradient effect from transparent to opaque to obtain an updated first target image; Determining the updated first target image as the target lock screen image.

12. The method according to claim 4, wherein Determining the adjusted target image template as the target lock screen image in response to an adjustment operation on the target image template includes: In response to an adjustment operation on the reference main image in the target image template, determining the second position information of the adjusted reference main image; According to the second position information, superimposing the reference superimposed image on top of the adjusted reference main image; Set the display effect of the reference overlay image to a transparent gradient effect to obtain an adjusted target image template; Determine that the adjusted target adjustment template is the target lock screen image.

13. The method according to claim 4 or 12, characterized in that, The determining that the adjusted target image template is the target lock screen image in response to an adjustment operation on the target image template includes: In response to an adjustment operation on the reference overlay image in the target image template, determine the third position information of the adjusted reference overlay image; According to the third position information, superimpose the reference overlay image with adjusted position on the upper layer of the reference main image; Set the display effect of the superimposed reference image with adjusted position to a transparent gradient effect to obtain an adjusted target image template; Determine that the adjusted target image template is the target lock screen image.

14. The method according to any one of claims 4, 12 or 13, characterized in that The determining that the adjusted target image template is the target lock screen image in response to an adjustment operation on the target image template includes: Receive a sliding operation on a sliding bar, where the sliding bar is used to adjust the range of the overlapping area between the reference main image and the reference overlay image; In response to the sliding operation on the sliding bar, determine the display position information of the sliding bar; According to the display position information, superimpose and display the reference overlay image on the upper layer of the reference main image, and set the display effect of the reference overlay image to a transparent gradient effect to obtain an adjusted target image template; Determine that the adjusted target image template is the target lock screen image.

15. An electronic device, characterized in that, The electronic device includes: one or more processors, and a memory; the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code includes computer instructions, and the one or more processors call the computer instructions to cause the electronic device to execute the method according to any one of claims 1 to 14.

16. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system includes one or more processors, and the one or more processors are used to call computer instructions to cause the electronic device to execute the method according to any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes instructions, and when the instructions are run on an electronic device, the instructions cause the electronic device to execute the method according to any one of claims 1 to 14.

Images