Image processing method, electronic equipment and readable storage medium

Abstract

The invention discloses an image processing method, electronic equipment and a readable storage medium. According to the image processing method, when an image, displayed on the electronic equipment, of a target application program is switched, a first image before switching can be replaced with a second image with the size identical to or close to that of a second original image layer after switching, and then the second original image layer covers an original display area of the first image; and gradually displaying the second original image layer in the switching process by changing the transparency of the second original image layer. According to the embodiment of the invention, display black edges caused by inconsistent image sizes before and after switching can be avoided while the switched image is displayed gradually, and the user experience is improved.

Description

[0001] This application claims priority to Chinese Patent Application No. 202411393518.6, filed on September 30, 2024, entitled "Image Processing Method, Electronic Device and Readable Storage Medium", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of computer technology, and in particular to an image processing method, an electronic device, and a readable storage medium. Background Technology

[0003] With the continuous development of computer technology, display technologies and methods are also constantly being updated and enriched. When displaying images, how to provide richer display options while avoiding unpleasant visual experiences brought about by new display methods is a problem that needs to be considered when improving display technology. Summary of the Invention

[0004] This application provides an image processing method, an electronic device, and a readable storage medium that can avoid poor visual experience while providing diverse display methods. The technical solution is as follows:

[0005] In a first aspect, an image processing method is provided, applied to an electronic device, comprising: displaying a first image, the first image including a first original layer and a second original layer; the second original layer being obtained by expanding the first original layer; the transparency of the second original layer being less than a first transparency threshold; the electronic device hiding and displaying the second original layer when the transparency of the second original layer is greater than the first transparency threshold; in response to a first operation on the first image, replacing the first original layer with the second image, setting the transparency of the second image to be less than a second transparency threshold, the second transparency threshold being less than the first transparency threshold; prior to the first operation, the size of the second image being greater than the size of the image display area of ​​the electronic device; the electronic device displaying the second image when the transparency of the second image is less than the second transparency threshold; gradually adjusting the transparency of the second image to be greater than the first transparency threshold, and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold.

[0006] In this embodiment, during the operation of a target application by an electronic device, the target application can display a first image. The first original layer and the second original layer can partially overlap. The information from the aforementioned first operation can be used to instruct the currently displayed first original layer to be switched to a second original layer that is associated with the first original layer. The information from the first operation can be a gesture operation, such as the gesture information for a swipe down operation. The first original layer can be equivalent to the original layer in subsequent embodiments of this application. Figure 1The second original layer can be equivalent to the original layer 2 in subsequent embodiments of this application. In addition to the first and second original layers, the first image may also include a first cutout layer and a second cutout layer. The first cutout layer can be equivalent to cutout layer 1 in other embodiments, and the second cutout layer can be equivalent to cutout layer 2 in other embodiments. The second image can be equivalent to image 1 in other embodiments, or based on the original... Figure 1 Any intermediate image generated during the process of generating the original layer 2.

[0007] When the first operation occurs, the first original layer can be displayed on the screen of the electronic device by the target application, and the target application can receive information about the first operation. Correspondingly, the information about the first operation can be detected and received by the target application. The target application may include, for example, a wallpaper editing application, a desktop application, or a lock screen application.

[0008] The first operation can be applied to any layer in the first image. The size of the original first layer changes as the first operation is performed. For example, the original first layer moves when the first operation is performed. Or, the original first layer shrinks when the first operation is performed.

[0009] In the embodiments of this application, the second original layer is an expanded version of the first original layer, which may include the following two cases.

[0010] Scenario 1: Expand the image of the first original layer to obtain the second original layer. Scenario 2: Shrink the second original layer to obtain the first original layer.

[0011] The image expansion operation described above can also be called image magnification operation. Image magnification operation refers to enlarging the image to be processed along at least one preset direction. The preset direction can include at least one of the following: top, bottom, left, right, and diagonal. It can be understood that during image magnification, the image may be enlarged along at least one preset direction, or it may be reduced along other directions. For example, during image magnification, the image to be processed may be enlarged along the height direction and reduced along the width direction.

[0012] The first original layer can be expanded to obtain the second original layer by at least one of the following methods.

[0013] Method (1), engineered expansion processing. In the engineered expansion processing, the first original layer is expanded according to a set and defined algorithm.

[0014] Method (2), AI expansion processing. In the AI ​​expansion processing, an AI algorithm is used to expand the first original layer.

[0015] Method (3), AI stylization drawing processing. In the process of AI stylization processing, an AI algorithm is used to draw a new image, and the size of the new image is larger than that of the original image in at least one direction.

[0016] In other possible implementations, the second original layer can be processed to obtain the first original layer. For example, the second original layer can be manually cropped or have its watermark / frame removed to obtain the first original layer. Alternatively, the second original layer can be recomposed; during this recomposition process, the background of the second original layer can be cropped to highlight the main subject, thus obtaining the first original layer.

[0017] The aforementioned watermark frame, also known as a watermark border, is typically located at the edge of the image. Among possible implementations, the watermark frame can be removed using at least one of the following methods.

[0018] Method 1: The watermark frame detection algorithm in the system layer database can be called. If a watermark frame is detected in the image to be processed, the watermark in the second original layer can be removed by cropping the original image to obtain the first original layer after the watermark frame is removed.

[0019] Method 2: By default, the image to be processed contains a watermark frame. The second original layer is cropped at the default distance to obtain the first original layer after the watermark frame is removed.

[0020] Furthermore, if the second original layer is obtained by expanding the first original layer, the watermark frame in the first original layer can be removed before expanding it. In this case, in addition to using the two methods mentioned above to remove the watermark frame in the first original layer, a watermark frame detection algorithm can be called from the system layer's database. If a watermark frame is detected in the first original layer, the watermark frame graphic is detected, removed, and the background color is added to the removed watermark graphic area to obtain the first original layer with the watermark frame removed.

[0021] In one possible implementation, the size of the first original layer in at least one preset direction may not be consistent with the size of the second original layer in at least one preset direction.

[0022] In one possible implementation, the size of the second original layer is larger than the corresponding size of the first original layer in at least one preset direction. For example, the size of the second original layer in the height direction is larger than the size of the first original layer in the height direction. Or, the size of the second original layer in the vertical direction is larger than the size of the first original layer in the vertical direction.

[0023] In one possible implementation, the image display area of ​​the electronic device's screen can refer to the image display area within the target application's running interface. If the target application is a wallpaper editing application, the image display area of ​​the screen can refer to the image display area of ​​the wallpaper editing interface. The wallpaper editing interface may also include areas such as a control display bar. Before the first operation, the sizes of the first original layer and the second original layer may be larger than the size of the image display area. Alternatively, before the first operation, the size of the first original layer is equal to the size of the image display area, and the size of the second original layer is larger than the size of the image display area. Simultaneously, the first original layer and the second original layer at least partially overlap. If the transparency of the second original layer is greater than a first transparency threshold, the transparency of the first original layer can be less than a second transparency threshold; that is, if the second original layer is hidden, the first original layer can be displayed without being hidden.

[0024] In another possible implementation, the first transparency threshold can be a value close to 100%, representing the degree of transparency. That is, the first transparency threshold can be close to full transparency. When the transparency of the second original layer is greater than the first transparency threshold, the second original layer can be in a hidden state. The second transparency threshold can be a transparency close to 0, that is, a transparency close to opaque. When the transparency of the first original layer is less than the first transparency threshold, the first original layer is in a non-hidden state.

[0025] In one possible implementation, when the transparency of the second image is set to be less than a second transparency threshold, the transparency of the second image can be set to be the same as the transparency of the first original layer.

[0026] In one possible implementation, gradually adjusting the transparency of the second image to be greater than a first transparency threshold can include gradually changing the transparency over a certain period of time, adjusting the transparency of the second image from its initial transparency to a level greater than the first transparency threshold. In a specific implementation, when adjusting the transparency of the second image, the transparency changes uniformly from a level less than the first transparency threshold to a level greater than the second transparency threshold; that is, the second image gradually changes from a non-hidden display state to a hidden display state.

[0027] In other possible implementations, the transparency of the second image can be gradually adjusted from the transparency before the first operation to a level greater than the first transparency threshold in a non-uniform manner.

[0028] Similarly, when gradually adjusting the opacity of the second original layer to be less than the second opacity threshold, you can use a uniform or non-uniform speed adjustment method to change the opacity of the second original layer from the initial opacity to less than the second opacity threshold.

[0029] In one possible implementation, gradually adjusting the transparency of the second image to be greater than the first transparency threshold and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold may include: simultaneously or in any order gradually adjusting the transparency of the second image and the transparency of the second original layer, adjusting the transparency of the second image to be greater than the first transparency threshold, and adjusting the transparency of the second original layer to be less than the second transparency threshold.

[0030] In another possible implementation, gradually adjusting the transparency of the second image to be greater than the first transparency threshold and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold may include: when the transparency of the second image is related to the transparency of the second original layer, only the transparency of the second image may be adjusted so that the transparency of the second original layer changes automatically; or, only the transparency of the second original layer may be adjusted so that the transparency of the second image changes automatically.

[0031] With the advancement of image processing technology, the sources, parameters, or attributes of images used by users on desktops, lock screens, or in other scenarios may differ. Consequently, during image switching, the images before and after the switch may have inconsistent sizes. When switching images via transparency changes, there may be a brief period of time during which no content is displayed in the area where the image sizes differ, resulting in a black area that negatively impacts the user's visual experience. The method provided in this application replaces the first original layer with a second image during image switching. Before the first operation, the size of the second image is larger than the image display area of ​​the electronic device. Even when scaled down, the top edge will not create a gap with the top edge of the image display area, thus avoiding the black area display problem caused by inconsistent image sizes before and after the switch.

[0032] In one embodiment, the image display method further includes: in response to a first operation, determining mapping information between a second original layer and a first original layer, the mapping information being used to align the second original layer and the first original layer; adjusting the relative size of the second original layer and the first original layer according to the mapping information; and the adjusted second original layer covering the display area of ​​the first original layer at the time of response to the first operation.

[0033] In this embodiment, the response time of the first operation can refer to the moment when the electronic device receives the information of the first operation and then changes the size of the first original layer according to the information of the first operation. Alternatively, the response time of the first operation can refer to the moment when the electronic device receives the information of the first operation, generates response information according to the information of the first operation, and visually displays the response information on the display screen.

[0034] In this embodiment, the display area of ​​the first original layer at the moment of response to the first operation can refer to the display area of ​​the first original layer at the moment when the electronic device responds to the first operation and changes the size of the first original layer. For example, if the first operation is a two-finger pinch operation, the display area of ​​the first original layer at the moment when the electronic device responds to the two-finger pinch operation and shrinks the first original layer can be the display area of ​​the first original layer at the moment of response to the first operation.

[0035] In this embodiment, the first original layer can be replaced with the second image first, and then the mapping information can be calculated. Alternatively, the mapping information can be calculated first, and then the first original layer can be replaced with the second image.

[0036] Aligning the second original layer with the first original layer can refer to aligning the second original layer with the first original layer during the execution of the first operation. The display area of ​​the first original layer at the response time of the first operation can be the display area of ​​the first original layer in the image display area when the electronic device receives the information of the first operation. In the embodiments of this application, the display area of ​​the first original layer in the image display area may be smaller than or equal to the image display area.

[0037] Align the second original layer with the first original layer. The second original layer can shrink and expand synchronously with the first original layer as it shrinks and expands.

[0038] In one implementation, the first object in the first original layer is the same as the second object in the second original layer; determining the mapping information between the second original layer and the first original layer includes: determining the display area of ​​the first original layer at the moment the information of the first operation is received; using the pixel position of the first object in the image display area as the pixel position of the second object in the display area; and determining the mapping information based on the pixel position of the second object in the display area.

[0039] In one possible implementation, the first original layer includes at least one first object. The first object being identical to the second object can mean that, given the same display area size, the first object can completely overlap with the second object. The first object and the second object can refer to the main body in other embodiments of this application. The first object being identical to the second object can mean that the first object and the second object are completely identical or partially identical.

[0040] In another possible implementation, the first object and the second object are identical, which could also mean that the first object and the second object have the same type, attributes, or are partially identical. For example, the subject in the image drawn by AIGC may have the same type and / or attributes as the subject in the original image. In this case, the pixel position of the second object in the display area of ​​the second original layer can be determined based on the pixel position of the first object in the display area of ​​the first original layer, so that after the second original layer covers the display area of ​​the first original layer, the first object and the second object can approximately overlap.

[0041] In one possible implementation, determining the mapping information based on the pixel position of the second object in the display area may include: using the pixel position of the second object in the display area as the mapping information; or, determining the pixel position of at least one reference point of the second original layer in the display area based on the pixel position of the second object in the display area, and using the pixel position of at least one reference point of the second original layer in the display area as the mapping information.

[0042] The aforementioned reference points could be, for example, the corner points of the second original layer.

[0043] The above pixel positions can be the locations of each pixel.

[0044] In one possible implementation, the first object can be one of multiple subjects in a first original layer. The second object can be one of multiple subjects in a second original layer.

[0045] In one implementation, replacing a first original layer with a second image in response to a first operation on a first image includes: replacing the first original layer with a second image if it is detected that the degree of change of the display area of ​​the first original layer by the first operation meets a set change degree condition.

[0046] In one possible implementation, the condition for setting the degree of change could be, for example, that the movement of the display area of ​​the first original layer in a preset direction exceeds a preset threshold, or that the movement of the display area of ​​the first original layer exceeds a preset position (the first original layer). When the first original layer is replaced with the second image, the second image is displayed in the display area where the first original layer was located when the information of the first operation was received.

[0047] In one implementation, replacing a first original layer with a second image in response to a first operation on a first image includes: replacing the first original layer with a second image if it is detected that the degree of change of the display area of ​​the first original layer by the first operation meets a set change degree condition.

[0048] In one implementation, the second image has the same size as the second original layer.

[0049] In possible implementations, the first image can be enlarged using a pre-defined algorithm to obtain the second original layer, or the first original layer can be edited and the size of the second original layer can be enlarged according to the received image editing instructions.

[0050] In possible implementations, the subject in the first original layer may be the same as and / or the subject in the second original layer, the subject in the second original layer may be the same as and / or the subject in the second image, and the subject in the first original layer may be the same as the subject in the second image.

[0051] In one possible implementation, the second image is obtained by scaling up the first original layer.

[0052] In possible implementations, the background in the first original layer and the background in the second original layer can be at least partially the same.

[0053] In one implementation, the second image is an intermediate image generated during the process of expanding the first original layer into the second original layer.

[0054] For example, by adding edge regions to the first original layer, making the first original layer the same size as the second original layer in at least one preset direction, a second image is obtained. The added edge regions can be filled with a certain color, or they can contain certain objects.

[0055] When expanding the first original layer into the second original layer, the size of the first original layer needs to be increased. The second image can be any image generated during the process of expanding the first original layer into the second original layer, and the size of the second image is the same as that of the second original layer.

[0056] In one embodiment, the second original layer is generated by expanding the first image along at least one preset direction, and the size of the second original layer in the preset direction is larger than the size of the first original layer in the preset direction.

[0057] In possible implementations, at least one preset direction can be any direction in the planar coordinate system where the first original layer is located.

[0058] In another possible implementation, regardless of the processing operation applied to the first original layer to obtain the second original layer, as long as the final image obtained after certain processing operations is larger than the first image in at least one direction, the second original layer is obtained.

[0059] In one embodiment, the image processing method further includes: generating a mirror region of the first original layer relative to the edge line corresponding to the first original layer in a preset direction; the size of the mirror region in the preset direction is within a preset first range; and the second image includes the first original layer with the mirror region.

[0060] In one embodiment, the image processing method further includes: smoothing a preset second range and a mirror region in the second image to obtain a second original layer.

[0061] The size of the mirrored area in the preset direction is smaller than the size of the first original layer in the preset direction, so that at least some objects in the first original layer are displayed in the mirrored area of ​​the first original layer, or at least a portion of the objects in the first original layer are displayed.

[0062] In one possible implementation, the mirrored region of the first original layer and a portion of the first original layer are symmetrical about their corresponding edge lines with respect to a preset direction. When the mirrored region is connected to the first original layer, the mirrored region and the first original layer constitute a new image, which can be a second image.

[0063] In possible implementations, the dimensions corresponding to the first and second ranges are smaller than the dimensions corresponding to the first original layer.

[0064] In one embodiment, a second original layer is obtained by smoothing a preset second range and a mirror region in a second image, including at least one of the following: blurring the second range and the mirror region; and changing the colors in the second range and the mirror region.

[0065] In one possible implementation, smoothing the preset second range and mirror region in the first image includes: blurring the second range and mirror region; and changing the colors in the second range and mirror region.

[0066] In another possible implementation, the image after blurring the second range and the mirror region can be used as the second image. Alternatively, the image after changing the colors in the second range and the mirror region can be used as the second image.

[0067] In another possible implementation, the second range may further include a third range and a fourth range. During the smoothing process, the third range and the mirrored region are blurred, and during the color change process, the fourth range and the mirrored region are subjected to a color change operation.

[0068] In one implementation, changing the color in the second range and the mirrored region includes: selecting a target color in a third range of the first image; and adding a transition color of the target color in the second range and the mirrored region.

[0069] In one possible implementation, a target color can be selected using intelligent color picking, so that the target color is coordinated with the colors in the third range.

[0070] In another possible implementation, the color of any pixel within the third range can be selected as the target color.

[0071] In one possible implementation, when adding a transition color of the target color in the second range and the mirror region, the color added near the image edge is darker than the color added at the original image edge.

[0072] In one implementation, blurring the second range and the mirror region includes: blurring the second range and the mirror region in a gradient manner.

[0073] In one possible implementation, when blurring is done in a gradual manner, the blurring degree near the image edge is higher than that far from the image edge.

[0074] In one implementation, the first operation is a two-finger pinch operation performed on the first image.

[0075] In one possible implementation, when a user performs a two-finger pinch operation, the user touches the touchscreen of the electronic device, creating two touch points. The distance between the two touch points can gradually decrease as the user pinches. Conversely, when a user performs a two-finger zoom operation (or two-finger expansion operation), the user touches the touchscreen of the electronic device, creating two touch points. The distance between the two touch points gradually increases as the user zooms. Both two-finger pinch and zoom operations can be implemented using a touchscreen or touchpad, or via external devices such as a stylus.

[0076] In another possible implementation, the two-finger zoom operation can be viewed as a special type of two-finger pinch operation. Similarly, the two-finger pinch operation can be viewed as a special type of two-finger zoom operation.

[0077] In one implementation, the content in the mirrored area includes a mirror image of the subject in the first original layer and a mirror image of the background in the first original layer.

[0078] In another possible implementation, if the target application displays a second original layer, the second original layer can be switched to the first original layer based on information from the image switching operation. If the size of the first original layer in at least one preset direction is smaller than the size of the second original layer in at least one preset direction, and the size of the first original layer in other directions outside the preset direction is the same as the size of the second original layer in other directions outside the preset direction domain, then the switching from the second original layer to the first original layer can be performed in a normal manner.

[0079] In one embodiment, the first image further includes a first cutout layer and a second cutout layer; the first cutout layer is located above the first original layer; the second cutout layer is located above the second original layer; the second cutout layer is located below the first original layer; the first cutout layer includes a cutout image of the main subject in the first original layer; the second cutout layer includes a cutout image of the main subject in the second original layer; the first cutout layer is used to display the depth-of-field effect of the first original layer when the transparency of the first original layer is less than a first transparency threshold; the second cutout layer is used to display the depth-of-field effect of the second original layer when the transparency of the second original layer is less than a second transparency threshold.

[0080] Furthermore, when the electronic device displays the first original layer, the first cutout layer is used to display the depth-of-field effect of the first original layer based on the relative positions of the subject and the clock. When the electronic device displays the second original layer, the second cutout layer is used to display the depth-of-field effect of the second original layer based on the relative positions of the subject and the clock.

[0081] The first cutout layer can be equivalent to cutout layer 1 in other embodiments of this application, and the second cutout layer can be equivalent to cutout layer 2 in other embodiments of this application.

[0082] Secondly, embodiments of this application provide an electronic device, which includes a processor and a memory;

[0083] The memory is used to store a program for an electronic device to perform the method provided in any embodiment of the present application, and to store data involved in implementing the method provided in any embodiment of the present application;

[0084] The processor is configured to execute programs stored in memory.

[0085] Optionally, there may be one or more processors and one or more memories.

[0086] Alternatively, the memory can be integrated with the processor, or the memory can be set up separately from the processor.

[0087] The processing device in the second aspect above can be a chip. The processor can be implemented in hardware or software. When implemented in hardware, the processor can be a logic circuit, integrated circuit, etc. When implemented in software, the processor can be a general-purpose processor that reads software code stored in memory. The memory can be integrated into the processor or located outside the processor and exist independently.

[0088] In the specific implementation process, the memory can be a non-transitory memory, such as read-only memory (ROM), which can be integrated with the processor on the same chip or set on different chips. This application does not limit the type of memory or the way the memory and processor are set.

[0089] Thirdly, embodiments of this application provide a computer-readable storage medium storing instructions that, when executed on a computer, enable the computer to perform the method described in the first aspect.

[0090] Fourthly, embodiments of this application provide a computer program product that, when run on a computer, causes the computer to perform any of the possible implementations of the first aspect.

[0091] Fifthly, embodiments of this application also provide a processor, including: an input circuit, an output circuit, and a processing circuit. The processing circuit is used to receive signals through the input circuit and transmit signals through the output circuit, causing the processor to execute the method in any of the embodiments of the first aspect described above.

[0092] In specific implementation, the processor can be a chip, the input circuit can be input pins, the output circuit can be output pins, and the processing circuit can be transistors, gate circuits, flip-flops, and various logic circuits. The input signal received by the input circuit can be received and input by, for example, but not limited to, a receiver, and the signal output by the output circuit can be, for example, but not limited to, output to and transmitted by a transmitter. Furthermore, the input circuit and the output circuit can be the same circuit, which is used as both the input circuit and the output circuit at different times. This application does not limit the specific implementation of the processor and various circuits.

[0093] The technical effects achieved by the second, third, fourth, and fifth aspects mentioned above are similar to those achieved by the corresponding technical means in the first aspect mentioned above, and will not be repeated here. Attached Figure Description

[0094] Figure 1This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0095] Figure 2 This is a schematic diagram of a lock screen interface provided in an embodiment of this application;

[0096] Figure 3 This is another lock screen image and lock screen interface schematic diagram provided in the embodiments of this application;

[0097] Figure 4 This is a schematic diagram illustrating the interface changes in response to a two-finger pinch operation when an electronic device presents a lock screen interface, as provided in an embodiment of this application.

[0098] Figure 5 This is a schematic diagram of an architecture provided in an embodiment of this application;

[0099] Figure 6 This is a schematic diagram of an image dilation method provided in an embodiment of this application;

[0100] Figure 7 This is a schematic diagram of the image change process during image expansion according to an embodiment of this application;

[0101] Figure 8 This is a schematic diagram of the image change process during image expansion according to an embodiment of this application;

[0102] Figure 9 This is a schematic diagram of another image expansion effect according to an embodiment of this application;

[0103] Figure 10 This is a schematic diagram of image cropping according to an embodiment of this application;

[0104] Figure 11 This is a schematic diagram of the wallpaper editing interface and the corresponding layer relationships in an embodiment of this application;

[0105] Figure 12 This is a schematic diagram of an image display method provided in an embodiment of this application;

[0106] Figure 13 This is a schematic diagram of an interface for setting a depth-of-field effect provided in an embodiment of this application;

[0107] Figure 14 This is a schematic diagram of a layer relationship provided in an embodiment of this application;

[0108] Figure 15A This is a schematic diagram of the relative size of a layer provided in an embodiment of this application;

[0109] Figure 15B This is a schematic diagram of an interface when a black border is generated according to an embodiment of this application;

[0110] Figure 16A This is a schematic diagram of an image display method provided in an embodiment of this application;

[0111] Figure 16B This is a schematic diagram illustrating one method of forming a cutout layer according to an embodiment of this application;

[0112] Figure 16C This is a schematic diagram of a mapping method according to an embodiment of this application;

[0113] Figure 17 This is a schematic diagram of a layer relationship provided in an embodiment of this application;

[0114] Figure 18 This is a schematic diagram illustrating layer changes during the implementation of the display method provided in this application embodiment;

[0115] Figure 19 This is a schematic diagram illustrating layer changes during the implementation of the display method provided in this application embodiment;

[0116] Figure 20 This is a schematic diagram illustrating layer changes during the implementation of the display method provided in this application embodiment;

[0117] Figure 21 This is a schematic diagram of the wallpaper editing interface during the implementation of the display method provided in this application embodiment;

[0118] Figure 22 This is a schematic diagram of the display method involved in the embodiments of this application. Detailed Implementation

[0119] In the following description, specific details such as particular system architectures and technologies are set forth for illustrative purposes and not for limiting purposes, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details.

[0120] It should be understood that, when used in this specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components, and / or collections thereof. The terms "comprising," "including," "having," and variations thereof all mean "including but not limited to," unless otherwise specifically emphasized.

[0121] It should be understood that "one or more" as mentioned in this application refers to one, two, or more, and "multiple" as mentioned in this application refers to two or more. In the description of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B. The "and / or" in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone.

[0122] Furthermore, to facilitate a clear description of the technical solutions of this application, the terms "first" and "second" are used to distinguish identical or similar items with essentially the same function and effect. Those skilled in the art will understand that the terms "first" and "second" do not limit the quantity or execution order, and that the terms "first" and "second" do not necessarily imply that they are different.

[0123] The terms "one embodiment" or "some embodiments" used in this application mean that one or more embodiments of this application include the specific features, structures, or characteristics described in that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this application do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized.

[0124] The wallpaper editing method provided in this application can be applied to electronic devices. These electronic devices can be mobile phones, tablets, wearable devices, digital cameras, in-vehicle devices, augmented reality (AR) devices, virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), laptops, etc., and this application does not limit the specific type of device.

[0125] Figure 1 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. See also... Figure 1The 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 sensor module 180, buttons 190, an indicator 192, a camera 193, a display screen 194, etc. The sensor module 180 may include a pressure sensor 180A, a fingerprint sensor 180H, a touch sensor 180K, etc.

[0126] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more than Figure 1 The illustrated electronic device has more or fewer components, or combines some components, or separates some components, or has different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware.

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

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

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

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

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

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

[0133] Electronic device 100 implements display functions through GPU, display screen 194, and application processor.

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

[0135] Touch sensor 180K, also known as a "touch panel," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touch display." Touch sensor 180K detects touch operations applied to or near it. 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 display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of electronic device 100, in a different position than display screen 194.

[0136] With the development of computer technology, electronic devices can perform diverse image processing. When users use images on electronic devices, they may process the images according to the specific needs of the scenario in which the images are used, resulting in images of different sizes.

[0137] Figure 2 This is a schematic diagram of a possible image processing scenario according to an embodiment of this application. Figure 2 As shown in (a), when the electronic device is a mobile phone, the lock screen displays a lock screen wallpaper, clock, date, lock screen notification icon 21, unlock notification text, signal strength icon, and battery icon. The unlock notification text may be "Slide to unlock," indicating the unlocking method. The lock screen wallpaper includes a subject and a background. The subject of the lock screen wallpaper can be the main or emphasized object in the image, such as a person, building, plant, animal, or other still life. For example... Figure 2 In the lock screen wallpaper shown in (a), the main subject is a person. To better display the wallpaper, a subject layer can be overlaid in front of the lock screen wallpaper. The subject layer includes a transparent layer and the main subject in the lock screen wallpaper. When the user adjusts the size of the area of ​​the lock screen wallpaper in the lock screen interface, in response to the user's operation of enlarging or shrinking the lock screen wallpaper, the relative position of the main subject in the subject layer and the clock in the lock screen interface is determined, and then the overlay relationship between the main subject and the clock is adjusted according to the relative position of the main subject and the clock.

[0138] For example, in Figure 2 In the lock screen of (a), the position ratio between the subject and the clock is not within the preset depth-of-field effect threshold range, therefore... Figure 2 In the lock screen interface shown in (a), the clock covers the main body of the lock screen wallpaper. And... Figure 2 In the lock screen interface shown in (b), the position ratio between the subject and the clock is within the preset depth-of-field effect threshold range, therefore... Figure 2 In the lock screen interface shown in (b), the main body of the lock screen wallpaper covers the clock, while the background of the lock screen wallpaper is still below the clock, creating a depth-of-field effect in the lock screen interface.

[0139] In such Figure 2 The lock screen interface shown can be used to create a depth-of-field effect. This effect means that the main body of the wallpaper is displayed above the clock, while the background is displayed below, creating the illusion of the wallpaper and the clock being at different depths.

[0140] When the main body of the lock screen wallpaper obscures the clock's height by no more than a first value (e.g., 50%), the clock's visibility remains unaffected, thus creating a depth-of-field effect. Figure 2(b) shows the above. When the height of the clock obscured by the main body of the lock screen wallpaper exceeds the first value mentioned above, the clock is mostly obscured and invisible. In order to ensure the visibility of the clock, a depth effect can be omitted. The first value can be set as needed and is not limited here.

[0141] Presenting a depth-of-field effect on the lock screen can provide users with a better visual experience; however, some images, due to composition and other reasons, cannot effectively display this effect. For example, Figure 3 The original image shown in (a) also includes the subject and background, but the distance between the subject and the top edge of the original image is smaller. When the electronic device responds to the user's instruction to set a lock screen wallpaper, it will... Figure 3 When the original image shown in (a) is applied to the lock screen, the lock screen looks like this. Figure 3 As shown in (b) in the diagram. Figure 3 In the lock screen interface shown in (b), the relative position ratio between the main body of the lock screen wallpaper and the clock exceeds the preset depth-of-field effect threshold range, therefore... Figure 3 In the lock screen interface shown in (b), the clock covers the main body. Furthermore, because the main body is too close to the top edge of the original image, there is no way to adjust it downwards; therefore, the electronic device cannot adjust the position of the main body relative to the clock downwards according to the user's command. When the user pinches their fingers together... Figure 3 When using the lock screen wallpaper in (b) of the above, the effects may include, for example: Figure 4 As shown in (a) or as Figure 4 As shown in (b). Figure 4 The interface shown in (a) corresponds to a larger two-finger pinch operation. Figure 4 The interface shown in (b) corresponds to a smaller two-finger pinch operation.

[0142] Similarly, even if the distance between the top edge of the lock screen wallpaper and the top edge of the original image is slightly increased, the limited distance between the subject and the top edge of the lock screen wallpaper may prevent electronic devices from displaying a depth-of-field effect. For example... Figure 7 As shown in (a), the distance between the main body of the lock screen wallpaper and its top edge is still insufficient to create a depth-of-field effect. Therefore, [the following is missing from the original text: "will..."] Figure 7 When (a) is applied to the lock screen wallpaper, the wallpaper editing application still cannot shrink the lock screen wallpaper to a degree that can produce a depth-of-field effect.

[0143] In other words, in electronic devices Figure 3 (a) or Figure 7 When the original image shown in (a) is applied to the lock screen, regardless of the user's actions, Figure 3 (a) or Figure 7 The relative positions between the subject and the clock shown in (a) cannot be adjusted to produce a depth-of-field effect. Therefore, using... Figure 3 (a) or Figure 7 When the original image shown in (a) is used as a lock screen wallpaper, the electronic device cannot adjust the position ratio of the subject and the clock to within the preset depth-of-field effect threshold range, thus failing to present the depth-of-field effect when the user needs it.

[0144] Therefore, in order to solve the above problems, the embodiments of this application can address the following: Figure 3 (a) and / or Figure 7 The original image shown in (a) is enlarged to increase the distance between the subject and the top edge of the image, resulting in an enlarged image. Thus, when the enlarged image is used as a lock screen wallpaper, the user can zoom in and out of the wallpaper. The electronic device can adjust the subject downwards or upwards relative to the clock according to the user's instructions, presenting the desired depth-of-field effect or canceling the depth-of-field effect based on the user's instructions. In one possible implementation of image enlargement, the direction of enlargement can include the top of the original image. In other possible scenarios, the direction of enlargement may include any direction of the image. This arbitrary direction may include visually above, below, left, right, or diagonal directions.

[0145] Figure 5 This is a schematic diagram of the software system architecture involved in an image processing method provided in this application embodiment, taking the image processing operation performed by a wallpaper editing application as an example. See also... Figure 5 The software system can include an application layer and a system layer. The application layer can include wallpaper editing applications, lock screen applications, desktop applications, and gallery applications. Furthermore, the application layer can interact with the file system in the system layer. In addition to the file system, the system layer also includes an algorithm database configured for the electronic device's system. Different algorithm databases can be included in the system layer depending on the electronic device's operating system. For example, if the electronic device's software system is Android, the system layer is the Android system layer, and its database can include 3D graphics processing libraries, 2D graphics engines, etc. The wallpaper editing applications, lock screen applications, desktop applications, and gallery applications in the application layer can call algorithms from the system layer's algorithm database to process images.

[0146] Wallpaper editing applications, lock screen applications, and desktop applications can all instruct the gallery application to display an image editing interface. After receiving an operation command, the control module of the wallpaper editing application can load the wallpaper editing interface, i.e., load the functional controls for the wallpaper editing interface, as well as the wallpaper editing interface for the lock screen wallpaper or the desktop wallpaper. Based on the operation commands to the functional controls, the wallpaper editing application can perform engineered image expansion, artificial intelligent (AI) image expansion, or artificial intelligence generated content (AIGC) drawing operations on the current lock screen wallpaper.

[0147] The wallpaper editing application can obtain the storage addresses of the lock screen wallpaper and the desktop wallpaper from the file system. If the application receives relevant operation instructions while the lock screen is displayed, it can display the wallpaper editing interface based on the lock screen wallpaper and the desktop wallpaper. Alternatively, if the application receives relevant operation instructions while the desktop is displayed, it can display the wallpaper editing interface based on the desktop wallpaper. These operation instructions may include a two-finger pinch gesture or other gesture commands.

[0148] The file system can store images from the gallery. When a wallpaper editing application performs wallpaper editing operations according to user instructions, it can obtain the necessary information from the file system. For example, when the wallpaper editing application changes the lock screen wallpaper according to user instructions, it can obtain the storage address of the image to be processed in the file system.

[0149] Figure 5 The various modules shown can be integrated into the wallpaper editing application, or they can exist as separate applications, or even within applications other than the wallpaper editing application. In practical applications, the electronic device architecture may also include other modules, which are not shown individually.

[0150] For example, such as Figure 5 As shown, a wallpaper editing application may include a control module and a view module. The control module receives user commands and sends them to the view module. The view module generates a visual view on the electronic device's screen. The view can be a rectangular area on the screen, and the view module can draw layer information within the view to generate visual layers.

[0151] In one example of this application, an engineering extension approach can be used to address, for example... Figure 7 The original shown in (a) Figure 1To expand, the expansion process may include, for example Figure 6 The steps are shown. In this embodiment, the engineering expansion operation can also be called the engineering map expansion operation. The engineering map expansion operation can be an expansion operation implemented through a limited set of pre-defined process steps. Through the engineering map expansion operation, the original map can be expanded upwards, and there is a certain continuity between the expanded area and the area of ​​the original map.

[0152] Step 61: In the original Figure 1 Above, according to the preset first ratio and the original Figure 1 The size, for the original Figure 1 To supplement the image, in the original Figure 1 The area above which the supplementary image is generated is used to obtain image 1.

[0153] For example, the area of ​​the supplementary image is connected to the upper edge of the original image, within the original... Figure 1 The image after generating the supplementary image in the area above is as follows: Figure 7 As shown in (b) of the diagram, the content of the area in the supplementary image includes the original... Figure 1 The mirror image, the mirror image and the original Figure 1 The line of symmetry between them is the original Figure 1 The upper edge. In Figure 7 In the image shown in (b), the original shape is represented by a dashed line. Figure 1 The boundary between the regions of the supplementary image and the region of the complementary image.

[0154] exist Figure 7 (a) and Figure 7 In the example shown in (b), the mirror image in the complement region includes both the background and the subject. Furthermore, the mirror image in the complement region is a reflection of the original. Figure 1 A partial mirror image of the original content. The width of the supplementary image area is the same as the original. Figure 1 The widths are the same, and the height of the supplementary area is the same as the original. Figure 1 The height is multiplied by a preset first scale. Therefore, the mirror image in the supplementary image region is a mirror image of a segment of content from the top edge of the original image to a height of 1 - the preset first scale. In other possible implementations, the mirror image of the supplementary image region can also be any segment of content from the original image, where the height of any segment is a first scale of the original image height.

[0155] In other possible implementations, if both the height and width of the supplemented image's region are larger than the original image's region, then the supplemented image's region includes the entire original image. Figure 1 A mirror image. If the height of the complemented image is less than the height of the original image, then the content of the complemented image in the height direction is the same as the original image. Figure 1 A partial mirror image of the content in the height direction. If the width of the area in the complement image is smaller than the area of ​​the original image, then the content of the complement image in the width direction is the same as the original image. Figure 1A mirror image of a portion of the content along the width.

[0156] In other possible implementations, the area of ​​the supplementary image may include only a mirror image of the subject, or only a mirror image of the background, or include the original image. Figure 1 A mirror image of any part of the content, or including the original. Figure 1 Copy of at least a portion of the content.

[0157] In other possible implementations, the area of ​​the supplementary image can be filled with any other content.

[0158] In step 61, the preset first ratio can be less than 100%. Further, the preset ratio can be 1%-50%. Further, the preset first ratio can be 35%. According to the preset first ratio and the original... Figure 1 The size, for the original Figure 1 The area size X of the resulting supplementary image is calculated as: the first scale multiplied by the original... Figure 1 The size.

[0159] Step 62: According to the second ratio, determine the blur processing area in image 1, blur the blur processing area, and obtain image 2.

[0160] The lower edge of the blurred area is the original Figure 1 The second proportion of the height line, the second proportion does not exceed 100%, such as Figure 8 As shown in (a) above. Further, the second proportion can be 50%-100%. Further, the second proportion can be 82.5%.

[0161] In specific examples, blurring methods may include at least one of the following: a) Gaussian blur: Gaussian blur is a blurring method based on a Gaussian function. It achieves the blurring effect by weighted averaging of each pixel in the image and its neighboring pixels. The core of Gaussian blur may include a Gaussian kernel (also known as a Gaussian filter), which determines the degree and range of blurring. b) Mean blur: Mean blur is a simple blurring method that replaces the original pixel value by calculating the average value of each pixel in the image and its neighboring pixels. c) Median blur: Median blur is a non-linear blurring method that replaces the original pixel value by calculating the median value of each pixel in the image and its neighboring pixels.

[0162] When blurring a region, the blur level can be gradually varied to obtain the blurred image, as shown in Figure 2. Figure 8As shown in (a) above. Gradient gradients can include stepped gradients or uniform gradients. A stepped gradient refers to a gradient where the blur level is the same within a sub-region. A uniform gradient refers to a gradient where the blur level changes uniformly along the height (or width, etc.) direction within a sub-region.

[0163] In one possible implementation, different sub-regions within the blurred region are blurred using different methods. For example... Figure 8 As shown in (a), the blurred processing region includes a first sub-region 81, a second sub-region 82, and a third sub-region 83. The blur level in the first sub-region is a first blur level, the blur level in the second sub-region is a second blur level, and the blur level in the third sub-region is a third blur level. The first blur level is greater than the second blur level, and the second blur level is greater than the third blur level. In other possible implementations, the first blur level may be less than the second or third blur level, and the second blur level may be less than the third blur level.

[0164] In other possible implementations, a gradual blur effect can also be set in the blurred area. That is, the first blur level mentioned above can be a uniformly gradual blur level. Similarly, the second blur level and / or the third blur level can also be uniformly gradual blur levels. For example, the first blur level includes 90%-80%, and in the height direction of image 2, the first blur level is uniformly gradual within the range of 90%-80%.

[0165] In other possible implementations, when a gradual blur effect is set in the target processing area, the degree of blur can also be gradually varied along the width direction, diagonal direction, or any other arbitrary direction of image 2 in the target processing area.

[0166] For example, the first sub-region 81 includes the position from the top edge of image 2 to the height line of image 2 at a third scale. The second sub-region 82 may include the position from the height line of image 2 at a third scale to the height line of image 2 at a fourth scale. The third sub-region 83 may include the position from the height line of image 2 at a fourth scale to the height line of image 2 at a second scale.

[0167] For example, the third percentage can be between 100% and 90%, such as 95%. The fourth percentage can be between 90% and 80%, such as 87.5%.

[0168] In other possible implementations, a uniform blurring method can be used to blur the entire area. Alternatively, a stepped blur effect can be applied to one sub-region, while a uniform blur effect can be applied to the other sub-regions.

[0169] Step 63: Obtain the target color value in Image 1.

[0170] The target color value can be obtained in the fourth sub-region near the top edge of Image 1.

[0171] For example, the target color value can be the color value corresponding to the red-green-blue (RGB) color model. The electronic device can call an AI color picking algorithm to pick the color in the fourth sub-region of image 1 to obtain the target color value. The fourth sub-region can be the area of ​​the top edge of the original image at -90% height.

[0172] Among other possible implementations, AI color picking algorithms can be combined with the original... Figure 1 The target color value can be determined by combining all the colors in the image. Alternatively, the AI ​​color picking algorithm can also determine the target color value by combining the colors in the regions of the complementary image. Or, the AI ​​color picking algorithm can determine the target color value by combining all the colors in Image 1.

[0173] In other possible implementations, the electronic device can use pre-defined steps to calculate the target color value. For example, the electronic device can obtain the color value containing the most pixels in the background color and assign this color value as the target color value. Alternatively, the electronic device can calculate the average color value of the background color and assign this average color value as the target color value.

[0174] The engineered map expansion node applies a color gradient to the region of the supplementary map and its adjacent regions. Using the target color, a gradient is added to the region of the supplementary map and its adjacent regions to obtain the expanded original map. Figure 1 The data, the expanded original Figure 1 The data can include at least the original layer 2. To create a depth-of-field effect when needed, the wallpaper editing application can generate a cutout layer 2 based on the original layer 2.

[0175] Step 64: According to the fifth scale, determine the color processing area in image 2, add the target color value to the color processing area, and obtain image 3.

[0176] exist Figure 8 In the example shown in (a), the fifth scale can be the same as the second scale. The method for determining the color processing area can be the same as the method for determining the blur processing area. That is, the color processing area can be a blur processing area. For example, the color processing area may include... Figure 8 The first subregion 81, the second subregion 82, and the third subregion 83 are shown in (a) in the figure.

[0177] In other possible implementations, the fifth ratio can differ from the second ratio, and the method for determining the color processing area can differ from the method for determining the blur processing area. In other words, the color processing area can be different from the blur processing area.

[0178] exist Figure 8 (a) and Figure 8 In the example shown in (b), Figure 8 Image 2 shown in (a) is obtained after color processing as follows: Figure 8 Image 3 is shown in (b) of the image. Figure 8 (b) in the original text is the same as the original text. Figure 1 The result after expansion processing.

[0179] Apart from Figures 6 to 8 Beyond the example shown, wallpaper editing applications can also use AI-powered expansion to enlarge the original image, resulting in an enlarged image. Through AI expansion, the original image may be expanded along at least one direction, and the electronic device can generate at least one expanded area based on the original image. The direction of expansion can be determined by an AI algorithm, which may combine the content of the original image within the expanded area to generate an intelligent background. For example... Figure 9 (a) and Figure 9 As shown in (b), the electronic device extends its operation via AI to... Figure 9 The original image shown in (a) is processed to obtain... Figure 9 The expanded diagram shown in (b) is shown in the image.

[0180] compared to Figure 9 The original image shown in (a) is shown in the figure. Figure 9 The expanded image shown in (b) is obtained by the AI ​​algorithm generating expanded regions 31 in the top, bottom, left, and right directions of the original image. In other implementations, the AI ​​expansion direction can be any at least one of the top, bottom, left, and right directions of the original image. Figure 9 The dashed lines in (b) indicate the locations of the top, bottom, left, and right edges of the original image. The size of the expanded region 31 can be calculated by the AI ​​algorithm based on the size of the original image. The content in the expanded region 31 can be generated by the AI ​​algorithm based on the content of the original image. For example, if the background of the original image is plants and birds, the AI ​​algorithm can add other plants to the expanded region 31 during the AI ​​expansion process.

[0181] Besides using engineered or AI-based expansion methods to enlarge the original image, electronic devices can also use other methods. For example, a user can manually edit the image, and the electronic device can modify the original image according to the user's instructions to obtain the enlarged image.

[0182] pass Figures 6 to 9 In the illustrated embodiment, the electronic device can enlarge the original image, ensuring sufficient distance between the subject and the top edge of the image when the user sets a depth-of-field effect. The electronic device can then display the depth-of-field effect using the enlarged image in response to user commands. For example... Figure 13 (a) and Figure 13 As shown in (b), the electronic device responds to the user's pinch gesture with two fingers, allowing the main body of the cutout layer to be placed over the clock, presenting the depth-of-field effect desired by the user.

[0183] Besides enlarging images, electronic devices may also shrink images based on user needs when the user is using them. For example, the electronic device may crop the image in response to a user's command. For instance, if the proportions between the subject and background in the original image are inappropriate, and the subject is not prominent enough, the user may need the electronic device to crop the image to highlight the subject. For example, when a user uses... Figure 10 The image shown in (a) is used as a profile picture on social media, or... Figure 10 The image shown in (a) can be inserted into the document, or... Figure 10 When the image shown in (a) is used as a lock screen wallpaper, the electronic device may need to... Figure 10 The image shown in (a) is cropped to obtain Figure 10 The cropped image shown in (b) is shown in the image.

[0184] pass Figures 2 to 10 As can be seen, when users process images using electronic devices, the image size may change, making the processed image (e.g., an enlarged image) smaller or larger than the original image (also known as the image to be processed). Furthermore, in some cases, the electronic device may switch from displaying the original image to displaying the processed image, or vice versa, based on user instructions. Because the original image and the processed image are not the same size, when the electronic device switches from displaying a smaller image to displaying a larger image based on user instructions, display issues may arise because the size of the switched image is smaller than the target image. The following section will describe the image switching process and the resulting display problems.

[0185] For example, in electronic devices displaying such Figure 2 When the lock screen interface is as shown in (a), the electronic device receives information that the user has performed an initial two-finger pinch operation on the lock screen interface and launches the wallpaper editing application. The wallpaper editing application can display, for example,... Figure 11 The wallpaper editing interface shown in (a) displays, for example, Figure 11 When the wallpaper editing interface shown in (a) is displayed, the original Figure 1 The area is larger than the wallpaper display area in the wallpaper editing interface. Users can interact with the wallpaper editing interface, and the wallpaper editing application executes commands based on these interactions. Figure 12 Steps 181 to 1811 shown in the figure are from the original display Figure 1 Switch to display original Figure 1 The expanded image (i.e., the original layer 2).

[0186] Besides wallpaper editing applications, other possible implementations could also involve users interacting with other applications, allowing those applications to change the display source. Figure 1 Switch to displaying the original image Figure 1 The expansion of the image is not limited in the embodiments of this application.

[0187] Step 181: The wallpaper editing application displays the original... Figure 1 When extracting layer 1, receive user feedback on the original... Figure 1 Information about the first two-finger pinch operation of the cutout layer 1.

[0188] exist Figure 12 In the example shown, when step 181 is executed, the wallpaper editing application displays the original... Figure 1 The interface for cutting out layer 1 can be referenced. Figure 11 As shown in (a) in the figure. Figure 11 (c) in the middle is Figure 11 In the wallpaper editing interface corresponding to (a) in the original... Figure 1 A diagram showing the relative sizes of the area and the wallpaper display area. From Figure 11 As can be seen from (c) in the original text, Figure 1 Slightly larger than the wallpaper display area, within which the electronic device displays the original... Figure 1 Part of it.

[0189] Wallpaper editing applications can include a controller module and a view module. The controller module, also known as the wallpaper controller, receives user commands and sends them to the view module. The view module generates a visual representation of the user's commands on the electronic device's screen.

[0190] Reference Figure 14 As shown in (b), the view module will cut out layer 2, the original layer 2, the cut out layer 1, and the original layer 2. Figure 1 Interlaced display. Layer 2 (cut out) has the same dimensions as the original layer 2, while layer 1 (cut out) has the same dimensions as the original layer 2. Figure 1 Same. Original Figure 1This is the original image layer before expansion; layer 1 is extracted as the original. Figure 1 The original layer 2 is the original image layer of the expanded image, and the cutout layer 2 is the cutout layer of the original layer 2. Before performing step 181, the view module of the wallpaper editing application controls the transparency of the cutout layer 2 and the original layer 2, setting the transparency of the two layers to a first transparency level. The first transparency level can be 100% or greater than a first transparency threshold. For example, the first transparency threshold can be any value between 90% and 100%. In this way, the cutout layer 2 and the original layer 2 are transparent or nearly transparent. At the same time, the view module can set the transparency of the cutout layer 1 and the original layer 2. Figure 1 The transparency is set to the second transparency, which is 0 or less than the second transparency threshold. The second transparency threshold can be any value between 0% and 10%. This allows for the extraction of layer 1 and the original... Figure 1 Opaque, or nearly opaque. Therefore, during step S181, both the cut-out layer 2 and the original layer 2 are hidden, and the original... Figure 1 And cut out layer 1 to display.

[0191] exist Figure 14 (a) and Figure 14 In the example shown in (b), the view module places cutout layer 2 below cutout layer 1; that is, cutout layer 1 covers cutout layer 2. The view module displays cutout layer 2 in the original view. Figure 1 In other words, layer 2 is cut out and covers the original. Figure 1 The view module will also include the original Figure 1 Displayed above the original layer 2, the original Figure 1 Overwrite the original layer 2.

[0192] In other possible implementations, the first two-finger pinch operation can be replaced by other gesture operations, such as long press, double tap, S-shaped swipe, etc., and this application embodiment does not limit this.

[0193] Step 182: The control module sends the information for the first two-finger pinch operation to the view module of the wallpaper editing application.

[0194] Information about the first two-finger pinching operation may include information about the duration of the first two-finger pinching operation and information about the release of the first two-finger pinching operation.

[0195] Alternatively, the user can pinch two fingers together and hold the pinch for a while without releasing them. In other words, the information about the first pinch can include the duration of the pinch operation.

[0196] Step 183: The view module responds to the information from the first two-finger pinch operation and determines the original... Figure 1 The upper edge position.

[0197] In step 183, the view module detects in real time the distance between the two finger touch points during the first two-finger pinch operation, and determines the original distance based on the distance between the two finger touch points. Figure 1 The amount of shrinkage, and thus the original Figure 1 The upper edge position.

[0198] Step 184: The view module determines the original Figure 1 Touch the top edge of the wallpaper display area in the wallpaper editing interface, or the original... Figure 1 When the top edge of the view module is above the top edge of the wallpaper display area in the wallpaper editing interface, the view module displays the original wallpaper. Figure 1 Partial or complete.

[0199] In the original Figure 1 When the top edge of the wallpaper display area in the wallpaper editing interface is touched, the original wallpaper will be displayed. Figure 1 All of it. In the original Figure 1 When the top edge of the wallpaper is located above the top edge of the wallpaper display area in the wallpaper editing interface, the original wallpaper will be displayed. Figure 1 Part of it.

[0200] Displayed in wallpaper editing applications as follows Figure 11 After entering the wallpaper editing interface shown in (a), the user can perform a two-finger pinch or two-finger spread operation. The control module of the wallpaper editing application detects the coordinates of the two fingers in real time, determines the distance between the two fingers based on the coordinates, and then determines the rate of change of the distance between the two fingers. The wallpaper editing application then scales the original wallpaper based on the rate of change of the distance between the two fingers. Figure 1 .

[0201] exist Figure 11 Based on (a) in the original text, the view module displays the original text. Figure 1 The effect is as follows Figure 11 As shown in (b) in the diagram. Figure 11 In the wallpaper editing interface shown in (b), the original Figure 1 Similar to the wallpaper display area, the wallpaper display area shows all the original images. Figure 1 .

[0202] Step 185: The control module receives information about the second two-finger pinch operation.

[0203] The second two-finger pinch operation can be replaced by other gesture operations, such as long press, double tap, S-shaped swipe, etc., and this application embodiment does not limit this.

[0204] exist Figure 11 Based on (b) in the previous section, a second two-finger pinch operation is implemented on the wallpaper editing interface.

[0205] Step 186: The control module sends the information for the second two-finger pinch operation to the view module.

[0206] Step 187: The view module determines the original based on the information from the second two-finger pinch operation. Figure 1 The upper edge position.

[0207] Step 188: The view module determines the original Figure 1 When the top edge of the view module is below the top edge of the wallpaper display area in the wallpaper editing interface, the view module displays the original layer data 2 and the cut-out layer data 2.

[0208] In this embodiment, the original layer data is used to display the corresponding original layer; for example, original layer data 2 is used to display original layer 2. The cutout layer data is used to display the corresponding cutout layer; for example, cutout layer data 2 is used to display cutout layer 2.

[0209] Original layer data 2 and cutout layer data 2 are Figure 9 The example shown contains the original layer data 2 and the cut-out layer data 2.

[0210] From step S186 to step S188, in Figure 11 Based on (b) above, after performing a two-finger pinch operation on the wallpaper editing interface, the display effect in step S188 is as follows: Figure 13 As shown in (a), users can... Figure 13 Continue with the two-finger pinch operation based on the wallpaper editing interface shown in (a).

[0211] In step 188, when the view module displays the original layer data 2 and the cutout layer data 2, the opacity of the original layer 2 and the cutout layer 2 is gradually changed from 100% to less than the second opacity threshold. Simultaneously, the view module... Figure 1 Change the opacity of layer 1 from 0 to a value greater than the first opacity threshold using a gradient.

[0212] Step 189: The control module receives information about the first two-finger expansion operation.

[0213] Step 1810: The control module sends the information of the first two-finger expansion operation to the view module.

[0214] Step 1811: Based on the information from the first two-finger expansion operation, the view module determines that the relative position between the main body and the clock layer in the cutout layer data 2 meets the preset relative position conditions, and then displays the depth-of-field effect of the original layer data 2 and the cutout layer data 2.

[0215] exist Figure 13Based on (a) in the above, in response to the first two-finger expansion, the area of ​​the lock screen wallpaper expands, and with the first two-finger expansion operation, the depth-of-field effect of the cut-out layer data 2 and the original layer data 2 is as follows: Figure 13 As shown in (b) of the diagram.

[0216] In the example of this application, the first two-finger pinch operation and the second two-finger pinch operation can be consecutive two-finger pinch operations.

[0217] In other possible implementations, the first two-finger pinch operation and the second two-finger pinch operation can also be two-finger pinch operations performed independently. For example, after the first two-finger pinch operation is performed, the user releases the two fingers and then pinches them again to perform the second two-finger pinch operation.

[0218] exist Figure 13 Based on (b) above, users can change the way they continue to perform two-finger expansion operations. Figure 13 (b) original Figure 1 The display area is adjusted so that the wallpaper editing application responds to the user's two-finger expansion gesture, switching from displaying the expanded image corresponding to the lock screen wallpaper to displaying the original image corresponding to the lock screen wallpaper.

[0219] Original Figure 1 The dimension in the height direction is smaller than the dimension in the original layer 2 in the height direction. Figure 1 The top edge of it is below the top edge of the original layer 2. And... Figures 11 to 13 During the switching process shown, the wallpaper editing application changes from displaying the original... Figure 1 When switching to display the original layer 2, an alpha fade-in effect is used to gradually change the original color. Figure 1 The transparency of the original layer 2 makes the original Figure 1 As the layer gradually hides, the original layer 2 gradually appears. This alpha fade-in method described above refers to controlling the gradual appearance of layers by changing their opacity.

[0220] The conditions that trigger the display switch in the wallpaper editing application include: with a two-finger pinch operation, the original... Figure 1 The top edge of the wallpaper is lower than the top edge of the wallpaper display area in the wallpaper editing interface. However, when the condition triggering the display switch occurs, the original... Figure 1 There is a gap between the top edge of the wallpaper and the top edge of the wallpaper display area. Although the original layer 2 covers this gap, at the moment the switch was triggered, the opacity of the original layer 2 has not yet changed from 100% to 0; the original layer 2 is close to transparent. Figure 1 The top edge of the wallpaper and the top edge of the wallpaper display area are not yet visually covered by the original layer 2. In other words, when switching the original... Figure 1 During the process of changing the opacity of the original layer 2 from 100% to 0, the time taken was shorter than that of the original layer 2. Figure 1The time it takes for an image to shrink during a pinch-to-zoom operation is longer. For example, the time it takes for the opacity to change from 100% to 0 is hundreds of milliseconds, while the time it takes for the image to shrink during a pinch-to-zoom operation is approximately a few milliseconds. During this brief period of a few milliseconds when the pinch-to-zoom operation is performed and causes the image to shrink, the original layer 2 does not have time to be displayed. Figure 1 The gap between the top edge of the original layer and the top edge of the wallpaper display area does not display image content (or the displayed content is not obvious, and the user cannot visually see the original layer 2), such as... Figure 15A As shown. Therefore, in the original Figure 1 There is a visual black border in the gap between the top edge of the image and the top edge of the wallpaper display area, such as... Figure 15B As shown.

[0221] Generally, the black border phenomenon worsens as the speed of pinching with two fingers increases. For example... Figure 15B (a) shows the black border phenomenon when the two-finger pinching operation is performed at a relatively fast speed. Figure 15B (b) shows the black border phenomenon when the speed of the two-finger pinch operation is relatively slow. Figure 15B (c) in the middle is Figure 15B The relationship between the display area of ​​the wallpaper editing interface and the lock screen wallpaper in (a) of the diagram. Figure 15B (d) in the middle is Figure 15B The relationship between the display area of ​​the wallpaper editing interface and the lock screen wallpaper in (b) of the diagram. Figure 15B (c) and Figure 15B (d) in the text corresponds to two different pinching speeds with two fingers. Figure 15B The relative speed of pinching with two fingers corresponding to (c) in the middle. Figure 15B The (d) option corresponds to a faster two-finger pinching speed. Figure 15B (c) Figure 15B In the diagram shown in (d), the lock screen wallpaper shrinks downwards, resulting in a gap between the top edge of the lock screen wallpaper and the wallpaper display area. At this moment, although the original... Figure 1 The expanded map can cover the original Figure 1 The gap between the top edge of the wallpaper display area and the top edge of the wallpaper display area, but the original Figure 1 The expanded image has 100% transparency, meaning the user cannot visually see the original image. Figure 1 The image is expanded, thus creating a visual black border.

[0222] To address the black border issue that occurs when rapidly pinching between two fingers during the transition from an enlarged image displayed on an electronic device to the original image, this application provides an image processing method to resolve this visual black border problem caused by rapid pinching during image switching. Detailed operational steps involved in the switching process from the original image to the enlarged image, and from the enlarged image back to the original image, in the image processing method provided in this application can be found in [reference needed]. Figure 16A As shown.

[0223] Step 161: Display the original Figure 1 In the case of layer 1 being cut out, the control module of the wallpaper editing application receives information about the third two-finger pinch operation.

[0224] In other possible implementations, the information of the third two-finger pinch operation can also be replaced by information of other gesture operations.

[0225] When performing step 161, the wallpaper editing application displays the original... Figure 1 In the case of layer 1 being cut out, users can see, as follows Figure 11 The wallpaper editing interface is shown in (b) above. Figure 11 In the wallpaper editing interface shown in (b), the original wallpaper is displayed with different levels of transparency. Figure 1 Layer 1 (exposed), original layer 2, and layer 2 (exposed). The original layer... Figure 1 The relative positions of cutout layer 1, original layer 2, and cutout layer 2 can be referenced. Figure 14 As shown. During step 3001, the view module of the wallpaper editing application will... Figure 1 The opacity of the cutout layer 1 is set to the second opacity threshold, while the view module sets the opacity of both the original layer 2 and the cutout layer 2 to the first opacity threshold. Thus, the original... Figure 1 Layer 1 (the cutout layer) is opaque, while the original layer 2 and the cutout layer 2 are transparent. The view module displays the original layer. Figure 1 Layer 1 (exposed), the original layer 2, and the exposed layer 2 are hidden in the view module. The first transparency threshold can be 0 or a value close to 0, such as 1%. The second transparency threshold can be 100% or a value close to 100%, such as 99%.

[0226] Step 162: The control module of the wallpaper editing application sends information about the third two-finger pinch operation to the view module of the wallpaper editing application.

[0227] Step 163: The view module determines the original based on the information from the third two-finger pinch operation. Figure 1 The upper edge position.

[0228] For example, when the user performs a third two-finger pinch operation, the view module calculates the original value in real time based on the change in the distance between the two fingers during the third two-finger pinch operation. Figure 1 The amount of contraction.

[0229] Step 164: The view module determines the original Figure 1 The top edge of the wallpaper is lower than the top edge of the wallpaper display area in the wallpaper editing interface.

[0230] Step 165: The view module checks if the original exists. Figure 1 The expanded image, if the original is not saved Figure 1 If the expanded map is obtained, it will be returned directly.

[0231] In one possible implementation, the control module controls the original... Figure 1 During dilation, determine the original image. Figure 1 Does it meet the preset expansion conditions? If the original Figure 1 If the expansion conditions are not met, expansion will not occur, and correspondingly, the original [extension] will not exist. Figure 1 The corresponding expanded map. If the original map does not exist. Figure 1 The expanded map, however, cannot achieve the same result as the original map. Figure 1 The transition to expanded view can be initiated by temporarily shrinking the original view module as the third two-finger pinch operation ends. Figure 1 Restore to its original size.

[0232] exist Figure 16A In the example shown, the expansion of the original drawing can refer to the engineering expansion.

[0233] In other possible implementations, image expansion of the original image can include at least one of engineered image expansion and AI image expansion. It can also include processing the original image using other image processing methods, resulting in an image whose size is expanded relative to the original image. Engineered image expansion refers to the image obtained after processing the original image using engineered expansion. AI image expansion refers to the image obtained after processing the original image using AI expansion.

[0234] Step 166: If the original exists Figure 1 If the image is expanded, the view module will again determine the original image in real time based on the information from the third two-finger pinch operation. Figure 1 The location.

[0235] In the original Figure 1 In the case of a rectangle, the original Figure 1 The location can include the original Figure 1 The position of the rectangle's edge. Or, the original... Figure 1 The location can include the original Figure 1 The positions of the four rectangle sides and / or the original Figure 1 The position of the corner point. Or, the original Figure 1 The location can include the original Figure 1 The location of the main body. Or, the original Figure 1 The location can include the original Figure 1 The position of each pixel.

[0236] The above original Figure 1 The position is used to place the original Figure 1 Map it to the original layer 2.

[0237] Step 167: The view module will display the original... Figure 1 The position is mapped to the original layer 2, making the original Figure 1 The pixels that are identical to those in the original layer 2 are overlapped to obtain the first mapping data.

[0238] At the same time, because the cutout layer 1 is to remove the original Figure 1 The main body is set in a transparent layer, such as Figure 16B (a) and Figure 16B As shown in (b) above, the cutout layer 1 and the original layer are separated. Figure 1 The two layers always maintain the same pixel overlap. Similarly, since layer 2 is obtained by setting the main subject in the original layer 2 within a transparent layer, layer 2 and the original layer 2 always maintain the same pixel overlap. Figure 1 The mapping process is as follows Figure 16C As shown.

[0239] For example, the first mapping data includes the original Figure 1 The correspondence between multiple pixels in the image and the image coordinates in the original layer 2. For example, the original... Figure 1 The four corner points of the image are represented by two-dimensional image coordinate data, corresponding to the four two-dimensional image coordinate data of the original layer 2. These image coordinate data can be referenced to the coordinate system on the electronic device's display screen or other preset coordinate systems. When the original layer 2 covers the original... Figure 1 Above, and the coordinate data of the four two-dimensional images in the original layer 2 are the same as the original. Figure 1 When the pixels containing the four corner points a1, a2, a3, and a4 overlap, the pixels in the original layer 2 will be the same as those in the original layer. Figure 1 The same content overlaps. In other words, the main subject in the original layer 2 can overlap with the original... Figure 1 The main body overlaps, and the background in the original layer 2 can overlap with the original. Figure 1 The backgrounds at least partially overlap.

[0240] Step 168: The view module sets the display area of ​​the original layer 2 and the cut-out layer 2 based on the first mapping data.

[0241] Since the main body of the cutout layer 2 always overlaps with the main body of the original layer 2, when the display area of ​​the original layer 2 is set in the view module, the display area of ​​the cutout layer 2 changes synchronously with the display area of ​​the original layer 2.

[0242] Step 169: The view module replaces the original image with image 1. Figure 1 And set the transparency of image 1 to 0.

[0243] In this example, image 1 can be Figure 7 The image shown in (b) is in Figure 6 The intermediate data generated during the implementation of the process shown.

[0244] Other possible implementations can also be used. Figure 8 The image shown in (a) replaces the original Figure 1 .

[0245] By replacing the original with image 1 Figure 1 The layer relationships in the wallpaper editing interface are from Figure 14 Become Figure 17 .

[0246] In other possible implementations, other images can be used to replace the original. Figure 1 The height of the other images is the same as the height of the original layer 2.

[0247] Step 1610: The view module uses alpha fading to change the opacity of both the original layer 2 and the cut-out layer 2 from 100% to 0, while simultaneously using alpha fading to fade the original layer. Figure 1 Change the opacity of layer 1 from 0 to 100%.

[0248] In one possible implementation, alpha fading can refer to gradually revealing something by changing its transparency, while alpha fading can refer to gradually hiding something by changing its transparency.

[0249] For example, in the case of an electronic device running the Android system, an alpha fade-in can be implemented using Extensible Markup Language (XML) animations or software modules. When using XML animation for fade-in, the view module can create an XML animation file that defines the gradient process from transparent to opaque. The view module can then load this animation in the code and apply it to the corresponding view.

[0250] When implementing alpha fade-in using software modules, the fade-in effect can be achieved by obtaining the view's background or drawing object and changing its transparency using the alpha function. Alternatively, the view's transparency can be dynamically adjusted based on the scrolling distance by listening to the scroll events of scrolling components such as scroll views.

[0251] exist Figure 16A In the example shown, the alpha fade-out effect of Image 1 and the cutout layer 1, as well as the alpha fade-in effect of the original layer 2 and the cutout layer 2, can be referenced. Figures 17 to 19 As shown.

[0252] Figure 17 and Figure 18 This demonstrates the moments before the alpha fade-out and alpha appear, the transparency between layers, and the interface as seen by the user. Figure 17 (a) and Figure 17 At the moment shown in (b), the user has just triggered the electronic device to switch from displaying the original image to displaying an expanded image of the original image. The view module in... Figure 17 (a) and Figure 17 At the time shown in (b) in the image, the original Figure 1 Replace with image 1. Image 1 initially has an opacity of 0, as shown below. Figure 18 As shown in (a), at the start of the alpha fade-in or alpha fade-out process, the opacity of Image 1 and the cutout layer 1 is 0%, while the opacity of the original layer 2 and the cutout layer 2 is 100%. The view module in... Figure 17 (a) and Figure 17 The time corresponding to (b) in the middle and Figure 18 At the moment corresponding to (a) in the diagram, the displayed interface effect is as follows: Figure 18 As shown in (b) above, the layer relationships are as follows: Figure 18 As shown in (c) in the figure.

[0253] During step 1610, the view module gradually changes the opacity of Image 1, Cutout Layer 1, Original Layer 2, and Cutout Layer 2 at a certain rate. For example, the view module changes the opacity in increments of 10% per unit time. Then, the original... Figure 1 The opacity of the cutout layer 1 changes over time as follows: 100% at the first moment, 90% at the second moment, 80% at the third moment, 70% at the fourth moment... 10% at the tenth moment, and 0% at the eleventh moment. Simultaneously, the opacity of the original layer 2 and the cutout layer 2 changes over time as follows: 0% at the first moment, 10% at the second moment, 20% at the third moment, 30% at the fourth moment, 40% at the fourth moment... 90% at the tenth moment, and 100% at the eleventh moment. The time intervals between these adjacent moments are unit times.

[0254] Figure 19 (a) to Figure 19 (c) shows an intermediate moment (sixth moment) between Alpha's emergence and alpha's fading. Figure 1 The display states of the cutout layer 1, the original layer 2, and the cutout layer 2. At the sixth moment of the alpha fade-in and alpha fade-out phase, the opacity of image 1, cutout layer 1, the original layer 2, and the cutout layer 2 is 50%. That is, image 1, cutout layer 1, the original layer 2, and cutout layer 2 are each in a semi-transparent state. The layer transparency relationships are as follows: Figure 19 As shown in (a) above, the layer is displayed as follows: Figure 19 As shown in (b), image 1 and the original layer 2 each display half the transparency.

[0255] After the switch is complete, Image 1's opacity is 100%, and the original Layer 2's opacity is 0%. The original Layer 2 is displayed, and Image 1 is not displayed. Correspondingly, the wallpaper editing interface will display as follows: Figure 20 As shown.

[0256] In other possible implementations, the view module can also change the original at different rates. Figure 1 The opacity of the cutout layer 1, the original layer 2, and the cutout layer 2 can be adjusted. In other possible implementations, the view module could also first change the opacity of the original layer 2. Figure 1 First, adjust the opacity of layer 1, then adjust the opacity of both the original layer 2 and the adjusted layer 2.

[0257] In both cutout layers 1 and 2, everything except the area containing the main subject is transparent. Therefore, when changing the transparency of cutout layers 1 and 2, only the transparency of the main subject needs to be changed. In this embodiment, the transparency is 0%, or 0%. When the transparency is 0%, the main subject in cutout layer 1 or cutout layer 2 is displayed.

[0258] When the transparency of the expanded original layer and the expanded cutout layer is changed, the view module can switch the original image to the expanded image by executing steps 166 to 1610 above. When the user wants to switch from the expanded image display to the original image display, they can do so using a second two-finger expansion operation. The wallpaper editing application responds to the second two-finger expansion operation by executing steps S1611 to S1617 below to switch from the expanded image to the original image.

[0259] Step 1611: When the wallpaper editing application is on the expanded lock screen wallpaper interface, the control module of the wallpaper editing application receives information from the user's second two-finger expansion operation on the original layer data 2 and the cut-out layer data 2.

[0260] For example, in one possible scenario, when the user performs a second two-finger pinch operation, the interface displayed by the wallpaper editing application is as follows: Figure 20As shown in (b) of the diagram.

[0261] Step 1612: The control module sends information about the second two-finger expansion operation to the view module of the wallpaper editing application.

[0262] Step 1613: In response to the information from the second two-finger expansion operation, the view module determines the position of the upper edge of the original layer data 2 and the cut-out layer data 2 in the wallpaper display area.

[0263] Step 1614: The view module determines that if the relative positions of the top edges of the original layer data 2 and the cut-out layer data 2 with the top edge of the wallpaper display area meet the preset relative position conditions, then displays the original layer data 2. Figure 1 .

[0264] When the view module switches from displaying the original layer 2 to displaying the original layer... Figure 1 During the process, the alpha gradual appearance method can also be used to change the original Figure 1 The transparency makes the original Figure 1 The original layer 2 is gradually revealed, and the view module can use alpha fading to change the transparency of the original layer 2, causing the original layer 2 to gradually hide and appear.

[0265] If the user is Figure 20 Based on the interface in (b), a second two-finger expansion operation is implemented. The wallpaper editing application responds to the second two-finger expansion operation by displaying the original... Figure 1 The corresponding display effect is as follows Figure 11 As shown in (b) of the diagram.

[0266] Step 1615: The control module receives information about the third two-finger expansion operation.

[0267] For example, in one possible scenario, when a user performs a third two-finger pinch operation, the interface displayed by the wallpaper editing application is as follows: Figure 11 As shown in (b) of the diagram.

[0268] Step 1616: The control module sends information about the third two-finger expansion operation to the view module.

[0269] Step 1617: The view module zooms in on the original image based on the information from the third two-finger expansion operation. Figure 1 The original wallpaper is displayed in a magnified form in the wallpaper display area. Figure 1 Part of it.

[0270] exist Figure 11 Based on the example shown in (b), the wallpaper editing application responds to the third two-finger expansion operation and displays different values ​​depending on the degree of expansion in the third two-finger expansion operation. Figure 21 (a) or Figure 21 The interface shown in (b) is shown in the image. Figure 21(a) or Figure 21 The interface display effect shown in (b) is the same as Figure 3 The effect of (b) is similar, but in Figure 21 (a) or Figure 21 In the interface shown in (b), the wallpaper editing application can expand the area mapped from the lock screen wallpaper to the wallpaper display area according to the user's instructions, allowing more content from the lock screen wallpaper to be displayed in the wallpaper display area, and switch to, for example... Figure 20 The interface shown in (b) is shown in the image.

[0271] Through steps 1611 and 1617 above, the switching from the expanded image to the original image is achieved.

[0272] In execution Figure 16A Following the image display method shown, the wallpaper editing application can also, during the switching process of displaying the original layer 2, determine in real time whether to display a depth-of-field effect based on the user's two-finger pinch operation, and display the depth-of-field effect if determined to do so. Similarly, the wallpaper editing application can also, during the switching process of displaying the original layer 2, determine whether to display a depth-of-field effect based on the user's two-finger pinch operation, and display the depth-of-field effect if determined to do so. Figure 1 During the process, it determines in real time whether to display a depth-of-field effect, and displays the depth-of-field effect if the determination is made. Next, the original wallpaper will be displayed using a wallpaper editing application. Figure 1 Taking the display of depth of field effect as an example, combined with Figure 22 This section describes the process of implementing the depth-of-field effect.

[0273] Step 2201: Display the original Figure 1 While hiding and displaying the original layer 2, the wallpaper editing application receives information about the switching operation.

[0274] In some cases, the switching operation may include information from the aforementioned two-finger expansion operation or two-finger pinch operation.

[0275] Step 2202: In response to the information from the switching operation, the wallpaper editing application changes from displaying the original... Figure 1 Switch to displaying the original layer 2 and hide the original layer. Figure 1 .

[0276] The switching process in step 2202 can be as follows: Figure 16A And related implementation examples.

[0277] Step 2203: The wallpaper editing application receives information about the third two-finger pinch operation.

[0278] Step 2204: The wallpaper editing application obtains the position information of the display area of ​​the main body of the cutout layer 2 based on the information from the third two-finger pinch operation.

[0279] In step 2204, the position information of the display area of ​​the main body of the cut-out layer 2 is obtained, which may also include obtaining the position information of the display area of ​​the main body of the lock screen wallpaper page and the position information of the clock frame where the clock is located.

[0280] Step 2205: The wallpaper editing application scales the cutout layer 2 based on the position information of the main subject's display area and displays the cutout layer 2 above the clock.

[0281] During the engineering expansion process, the wallpaper editing application generated the original... Figure 1 The application stores the cutout layer 1 and the cutout layer 2 of the original layer 2. Therefore, when it receives the third two-finger pinch operation information, it can retrieve the cutout layer 1 and the cutout layer 2 from the storage space.

[0282] In other possible implementations, the wallpaper editing application may not store cutout layers 1 and 2 during the engineering expansion process. If the wallpaper editing application does not store cutout layers 1 and 2 during the engineering expansion process, it can generate cutout layer 2 of the original layer 2 upon receiving information about a third two-finger pinch operation.

[0283] In step 2205, the position information of the main display area and the position information of the clock frame meet the preset conditions.

[0284] Step 2206: The wallpaper editing application determines the position information of the original layer 2's display area based on the position information of the main subject's display area.

[0285] During the implementation of step 2206, the offset and scaling information of the original layer 2 can be determined in real time based on the position information of the display area of ​​the main body in the cut-out layer 2. The original layer 2 is then scaled according to the offset and scaling information of the original layer 2 to obtain the layer data of the original layer 2 in the wallpaper display area.

[0286] Step 2207: The wallpaper editing application displays the original layer 2 based on the position information of the original layer 2's display area.

[0287] This application also provides an image switching device, including an operation information acquisition module, a replacement module, and a transparency adjustment module.

[0288] The acquisition module is used to display a first image, which includes a first original layer and a second original layer; the second original layer is an expanded version of the first original layer; the transparency of the second original layer is greater than a first transparency threshold; when the transparency of the second original layer is greater than the first transparency threshold, the electronic device hides and displays the second original layer.

[0289] A replacement module is configured to, in response to a first operation on the first image, replace the first original layer with the second image, set the transparency of the second image to be less than a second transparency threshold, the second transparency threshold being less than the first transparency threshold; prior to the first operation, the size of the second image is larger than the size of the image display area of ​​the electronic device; when the transparency of the second image is less than the second transparency threshold, the electronic device displays the second image.

[0290] The transparency adjustment module is used to gradually adjust the transparency of the second image to be greater than the first transparency threshold, and to gradually adjust the transparency of the second original layer to be less than the second transparency threshold.

[0291] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0292] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0293] This application also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, can implement the steps in the above-described method embodiments.

[0294] This application also provides a computer program product that, when run on an electronic device, enables the electronic device to perform the steps described in the various method embodiments above.

[0295] This application also provides a chip system, which includes a processor coupled to a memory. The processor executes a computer program stored in the memory to implement the steps of any method embodiment of this application. The chip system can be a single chip or a chip module composed of multiple chips.

[0296] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as 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, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line, DSL) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer, or a data storage device such as a server or data center that integrates one or more available media. The available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., Digital Versatile Discs (DVDs)), or semiconductor media (e.g., Solid State Disks (SSDs)).

[0297] The above-described embodiments are optional embodiments provided by this application and are not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the technical scope disclosed in this application should be included within the protection scope of this application.

Claims

1. An image processing method, characterized by, The method is applied to an electronic device, and comprises: displaying a first image, the first image comprising a first original layer and a second original layer; the second original layer being an expanded version of the first original layer; the second original layer having a transparency greater than a first transparency threshold; in a case where the transparency of the second original layer is greater than the first transparency threshold, the electronic device hides the display of the second original layer; in response to a first operation on the first image, replacing the first original layer with a second image, and setting the transparency of the second image to be less than a second transparency threshold, the second transparency threshold being less than the first transparency threshold; before the first operation, the size of the second image is greater than the size of an image display area of the electronic device; in a case where the transparency of the second image is less than the second transparency threshold, the electronic device displays the second image; gradually adjusting the transparency of the second image to be greater than the first transparency threshold, and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold.

2. The method of claim 1, wherein, The method further comprises: determining mapping information of the second original layer and the first original layer, the mapping information being used to align the second original layer with the first original layer; adjusting the relative size of the second original layer and the first original layer according to the mapping information; the adjusted second original layer covers the display area of the first original layer at the response time of the first operation.

3. The method of claim 2, wherein, A first object in the first original layer is identical to a second object in the second original layer; the determination of the mapping information of the second original layer and the first original layer comprises: determining the display area of the first original layer at the time when the information of the first operation is received; taking the pixel position of the first object in the image display area as the pixel position of the second object in the display area; determining the mapping information according to the pixel position of the second object in the display area.

4. The method according to any one of claims 1 to 3, characterized in that, The response to the first operation on the first image, replacing the first original layer with the second image, comprises: in a case where it is detected that the change degree of the first operation on the first original layer meets a set change degree condition, replacing the first original layer with the second image.

5. The method of claim 4, wherein, The first operation is a double-finger pinch operation, and the set change degree condition comprises: the upper edge of the first original layer being below the upper edge of the image display area.

6. The method according to any one of claims 1 to 5, characterized in that, The size of the second image is identical to that of the second original layer.

7. The method of claim 6, wherein, The second image is obtained after the size of the first original layer is expanded.

8. The method of claim 7, wherein, The second image is an intermediate image generated in the process of expanding the first original layer into the second original layer.

9. The method according to any one of claims 6 to 8, characterized in that, The second original layer is generated by expanding the first original layer along at least one preset direction, and the size of the second original layer in the preset direction is greater than that of the first original layer in the preset direction.

10. The method of claim 9, wherein, The method further comprises: generating a mirror region of the first original layer relative to an edge line corresponding to the preset direction of the first original layer; the mirror region has a size in the preset direction within a preset first range; and the second image includes the first original layer with the mirror region.

11. The method of claim 10, wherein, The method further includes: performing smoothing processing on the second range and the mirror region in the second image to obtain the second original layer.

12. The method of claim 11, wherein, The performing smoothing processing on the second range and the mirror region in the second image to obtain the second original layer includes at least one of: performing blur processing on the second range and the mirror region; changing colors in the second range and the mirror region.

13. The method of claim 12, wherein, The changing colors in the second range and the mirror region includes: selecting a target color in a third range of the first image; adding a transition color of the target color in the second range and the mirror region.

14. The method according to claim 12 or 13, characterized in that, The performing blur processing on the second range and the mirror region includes: performing blur processing in a gradient manner in the second range and the mirror region.

15. The method according to any one of claims 10-14, characterized in that, The content in the mirror region includes a mirror of a subject in the first original layer and a mirror of a background in the first original layer.

16. The method of any of claims 1-15, wherein, The first image further includes a first cutout layer and a second cutout layer; the first cutout layer is located above the first original layer; the second cutout layer is located above the second original layer; the second cutout layer is located below the first original layer; the first cutout layer includes a cutout graph of the subject in the first original layer; the second cutout layer includes a cutout graph of the subject in the second original layer; the first cutout layer is used to display a depth-of-field effect of the first original layer when the transparency of the first original layer is less than the first transparency threshold; the second cutout layer is used to display a depth-of-field effect of the second original layer when the transparency of the second original layer is less than the second transparency threshold.

17. An electronic device, comprising: The electronic device includes a processor and a memory; The memory is used to store a program for the electronic device to execute the method of any one of claims 1-16, and to store data involved in the method of any one of claims 1-16; The processor is configured to execute the program stored in the memory.

18. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions, which, when executed on a computer, cause the computer to execute the method of any one of claims 1-16.

Images